在项目的开发过程中,我们经常会注册很多公共的组件,以增强代码的可维护性,减少开发工作量。但是如果我们一个个去注册的话,就会在入口处写很多代码,这时我们就可以考虑使用 自定义插件 的方法一次性把所有的组件全部注册。具体方法如下:
(1)在src/components 下新建一个 index.ts,引入所有全局组件
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 中安装自定义插件
ts
//引入自定义插件对象:注册整个项目全局组件
import gloalComponent from '@/components';
app.use(gloalComponent)
(3)最后就是在你想用的任何地方随意使用组件啦,再也不用一次次的引入啦