VUE将公用组件写成全局组件并在各组件中引用详解

先简单看一下项目的目录：

vue项目目录.png

然后在src/components目录下新建一个存放全局的文件夹：这里为loading，然后新建一个loading.vue和index.js。（src下应该也是可以的，在main.js下引用时候写对相对路径就可以了，今天由于时间问题就不做验证了，有时间了会写一个来这里给个准确答复）
loading.vue和一般组件里写的是一样的，这里代码如下：

index.js才是关键所在，代码如下：

import loadingComponent from './loading.vue'

const loading={
    install:function(Vue){
        Vue.component('Loading',loadingComponent)
    }  //'Loading'这就是后面可以使用的组件的名字，install是默认的一个方法
};

export default loading;

这里需要说明一下：
当我们使用Vue.use()引人全局组件vue-resource进行数据请求和后端进行数据交互时，以及全局组件vue-router时，自动调用的就是install，而install返回的必须是一个组件。这里有时间了做详细介绍

然后在main.js中引入组件，并用Vue.use()引入这个全局组件：

//引入自定义全局组件
import loading from './components/loading'

Vue.use(loading)

这样，一个全局组件就定义完成了，可以在下面各个组件用放心引用即可，如这里在首页引用：

最后，在简单提一下vue-resource和axios：
两者都用来请求数据，然而前者现在已经不再更新，vue的作者也推荐使用axios。所以我们使用axios用来请求数据就可以了~
最后，关于周末有时间了会详细了解。

• 以上内容大多摘自网上他人总结，这里仅用于自己复习和掌握。