背景
以往在vue中注册全局组件,都是需要先手动引入需要注册全局组件的文件,然后挨个注册,
// 在main.ts 中
import ACom from '@/components/A.vue';
import BCom from '@/components/B.vue';
Vue.component('a-com', ACom);
Vue.component('b-com', BCom);
缺点就是需要频繁的手动引入手动注册,重复的机械工作。
实现自动引入全局注册
在components的文件下新建global文件夹,这里文件夹表示是全局的组件文件,"/components/global"
在global文件下建一个index.ts文件,是全局组件入口页面
// 在components/global/index 中
/**
* 自动导入components/global下的vue文件,实现自动引入全局注册
*/
const globalCom = {
install: async (Vue: any) => {
const modules = import.meta.glob("./**/index.vue", { eager: true }); // 读取vue文件
for (let each in modules) {
const name = each.substring(2, each.length - 10);
Vue.component(name, (modules[each] as any).default);
}
}
};
export default globalCom;
// 在main.ts 中引入
// 注册全局组件
import globalCom from "@/components/global/index";
这样就实现了在global文件下的vue文件自动引入全局注册了