我们的业务组件一般都定义成了局部组件，使用的时候需要在components中注册，而我们全局通用组件一般是需要定义为全局组件的，不需要局部注册

注册单个全局组件

main.js文件

import SvgIcon from './SvgIcon/index.vue'
Vue.component('SvgIcon', SvgIcon)

插件方式

上面的方式虽然可以非常方便的完成注册，但是大家想象一个场景，如果我们需要注册的全局组件非常多，我们需要一个一个引入，然后分别调用Vue.component方法，main.js文件会变的很大，不好维护，为了解决这个问题，我们给它优化成插件的形式,在 components 目录下新建 index.js 文件

插件开发 - components/index.js（需要自己创建）文件

插件方式——单个组件全局注册


// 引入项目中全部的全局组件
import SvgIcon from './SvgIcon/index.vue'
 
const componentPlugin = {
    install(Vue){
        Vue.component('SvgIcon',SvgIcon)
    }
}
export default componentPlugin

插件方式——多个组件全局注册

// 引入项目中全部的全局组件
import SvgIcon from './SvgIcon/index.vue'
import Pagination from './Pagination/index.vue'

// 全局组件对象
const allGloablComponent = {SvgIcon, Pagination}
// console.log('allGloablComponent', allGloablComponent);

// 对外暴漏插件对象
export default {
    // 务必叫做install方法,会把vue应用实例注入进来
    install(Vue){
        // console.log(Vue);
        // 注册项目全部的全局组件
        Object.keys(allGloablComponent).forEach(key =>{
            Vue.component(key,allGloablComponent[key])
        })
        
    }
}

插件注册 - main.js 文件

import componentPlugin from '@/components'
Vue.use(componentPlugin)

vue2注册全局组件