vue中如何创建一个全局组件

什么是组件？

        组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件就可以了。

        组件可以提升整个项目的开发效率，能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低，难维护，复用性等问题。 

首先

在src新建一个文件夹，我取名叫components，在文件夹中放每个需要的全局组件

        如图所示，在src下的components 文件夹内有个PageTools文件夹就是今天文章的重点，我们把需要全局使用的组件放在components里面

定义组件

        在PageTools里定义一个组件

<template>
    <div>
    全局组件
    </div>
</template>

导出组件

        在components文件夹内新建一个index.js，专门用来引入组件，并导出。

如下代码：

// 引入组件
import PageTools from './PageTools/index.vue'
//导出
export default {
// install 是默认的方法
// 该方法会Vue全局注册这个组件
  install(Vue) {
    Vue.component('PageTools', PageTools)
    //注意---这里可以同时引入注册多个组件
  }
}

在main.js中引入index.js

在 main.js 中用 import 引入，使用 Vue.use() 全局注册就好啦

// components文件夹中的index可以不写，webpack会自动找到并加载 index 
// 如果是其他的名字就需要写上。
// import Components from './components/index'

import Components from './components'

Vue.use(Loading)

最后

最后的最后，在需要使用的组件当中，只用应用刚刚注册好的全局组件即可。