Vue是一个组件化开发的框架，一般我们在项目中使用组件的步骤是这样的。

1.创建一个组件：

比方说我们现在新建一个demo.vue文件，随便写一行代码。

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.先创建一个组件

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)

})

现在就可以在任何地方，直接使用自定义的组件。