Vue是一個元件化開發的架構，一般我們在項目中使用元件的步驟是這樣的。
1.建立一個元件：
比方說我們現在建立一個demo.vue檔案，随便寫一行代碼。
{{msg}}
export default {
data() {
return {
msg:'隻是新建立的一個元件'
}
}
}
2.使用元件
在我們需要使用元件的地方，引入之前寫好的元件，并通過components綁定，就可以直接使用了。
import demo from './components/demo/demo.vue'
export default {
components: {
demo //等價與demo:demo,es6文法
}
}
從上述的例子可以看出，我們使用元件，需要經過引入，綁定兩個步驟。那麼，如果我們需要使用一些全局元件或者第三方的元件庫怎麼辦呢？
比如我們要用一些第三方的元件庫(以element-ui為例)，當然最簡單的辦法就是直接引用，在idnex.html上或者是我們需要的頁面，直接通過link引入。
截于elemrnt-ui官網
官網還提供了另一種引入方式(在引用之前需要使用npm安裝一下)。
截于elemrnt-ui官網
而且還可以按需引入。(按需引入需要安裝 babel-plugin-component)
現在我們知道了使用元件，有兩種方式。一種是引入檔案，通過components綁定來使用。另一是引入檔案，通過Vue.use()來使用。
那麼自己寫的元件，如何通過vue.use()來使用呢？
1.先建立一個元件
{{msg}}
export default {
data() {
return {
msg:'loading......'
}
}
}
2.在元件的同級目錄下，再建立一個idnex.js檔案(名字可以随便起)
import LoadingComponents from './loading.vue';
const loading = {
install:function(Vue) {
Vue.component('Loading', LoadingComponents)
}
}
export default loading;
3.引入自定義元件，并使用
import Vue from 'vue'
import App from './App.vue'
import loading from './components/loading/'
Vue.use(loading);
new Vue({
el: '#app',
data:{
eventHub: new Vue()
},
render: h => h(App)
})
現在就可以在任何地方，直接使用自定義的元件。