Vue是一个组件化开发的框架，一般我们在项目中使用组件的步骤是这样的。
1.创建一个组件：
比方说我们现在新建一个demo.vue文件，随便写一行代码。
<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
data() {
return {
msg:'只是新创建的一个组件'
}
}
}
</script>
2.使用组件
在我们需要使用组件的地方，引入之前写好的组件，并通过components绑定，就可以直接使用了。
<template>
<div id="app">
<demo></demo>
</div>
</template>
<script>
import demo from './components/demo/demo.vue'
export default {
components: {
demo //等价与demo:demo,es6语法
}
}
</script>
从上述的例子可以看出，我们使用组件，需要经过引入，绑定两个步骤。那么，如果我们需要使用一些全局组件或者第三方的组件库怎么办呢？
比如我们要用一些第三方的组件库（以element-ui为例），当然最简单的办法就是直接引用，在idnex.html上或者是我们需要的页面，直接通过link引入。
截于elemrnt-ui官网
官网还提供了另一种引入方式（在引用之前需要使用npm安装一下）。
截于elemrnt-ui官网
而且还可以按需引入。（按需引入需要安装 babel-plugin-component）
现在我们知道了使用组件，有两种方式。一种是引入文件，通过components绑定来使用。另一是引入文件，通过Vue.use()来使用。
那么自己写的组件，如何通过vue.use()来使用呢？
1.先创建一个组件
<template>
<div>
{{msg}}
</div>
</template>
<script>
export default {
data() {
return {
msg:'loading......'
}
}
}
</script>
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)
})
现在就可以在任何地方，直接使用自定义的组件。
