Vue.use 全局注册组件

全局注册组件，可以让所有的页面都能够使用这个组件
但是如果有很多的组件都需要全局注册，那么在 mian.js 中就要书写很多注册组件的内容

// 全局导入 PageTools
import PageTools from '@/components/PageTools'
// 注册 PageTools
Vue.component('PageTools',PageTools)

那么，在 Vue 项目中，我们可以自定义组件，以插件化的注册方式做全局注册。任何一个 .vue 文件都可以使用这个组件
比如像 element-ui 一样使用 Vue.use( ) 方法来使用

具体实现方法：

1. 提供统一注册组件插件的入口文件：src/components/index.js
2. 在components 同一目录下建立 index.js 文件，在这个文件中使用 install 方法来全局注册组件

// 全局导入 PageTools UploadImg ...
import PageTools from '@/components/PageTools'
import UploadImg from '@/components/UploadImg'
// 对象定义法
const componentPlugin = {
	install(Vue){
		//* 第一个参数以 name 作为组件名称，第二个参数为组件本身
		Vue.component(PageTools.name,PageTools)
		Vue.component(UploadImg.name, UploadImg)
		// ...
	}
}
// 导出组件
export default componentPlugin

3. 在入口处进行注册 src/main.js Vue.use 注册使用自己的插件模块

// 导入 componentPlugin
import componentPlugin from "@/components";
// 注册 componentPlugin
Vue.use(componentPlugin);

那么，为什么要进行插件优化？

因为有可能还有很多的全局组件都需要同等的操作，这个 main.js 就会变得很大，不够精简

实现的效果？

Vue.use(componentPlugin) => 把 components 中的所有组件都统一完成了全局注册

插件的运行流程？

1. Vue.use(插件)
2. 插件中，install 方法会自动执行并且拿到一个实参 Vue
3. 执行 install 方法中的具体逻辑
4. Vue.component (组件)
5. 组件被全局注册