vue3 自定义插件注册的妙用：一次性注册所有全局组件

在项目的开发过程中，我们经常会注册很多公共的组件，以增强代码的可维护性，减少开发工作量。但是如果我们一个个去注册的话，就会在入口处写很多代码，这时我们就可以考虑使用 自定义插件 的方法一次性把所有的组件全部注册。具体方法如下：

（1）在src/components 下新建一个 index.ts，引入所有全局组件

import SvgIcon from './SvgIcon/index.vue';
import type { App, Component } from 'vue';

//全局对象
const allGloablComponent: any = { SvgIcon, Pagination }

//对外暴露插件对象
export default {
    install(app: App) {
    	//注册项目全部的全局组件
        Object.keys(allGloablComponent).forEach((key: string) => {
        	//注册为全局组件
            app.component(key, components[key]);
        })
    }
}

（2）在入口文件 main.ts 中安装自定义插件

//引入自定义插件对象:注册整个项目全局组件
import gloalComponent from '@/components';
app.use(gloalComponent)

（3）最后就是在你想用的任何地方随意使用组件啦，再也不用一次次的引入啦