vue3+vite自动注册全局组件

最近开发vue3项目，突发奇想写个自动注册全局组件的功能。因为之前看到过这样的博客，于是自己也想试试

我的项目目录结构 全局组件放在 src/components/vueGlobalComponents 注册组件放在src/globalComponents.ts

globalComponent下的组件RT-img组件

globalComponents.ts代码

import { defineAsyncComponent } from 'vue';
 const componentsName = import.meta.globEager('./components/vueGlobalComponts/*/index.vue');
 const components = import.meta.glob('./components/vueGlobalComponts/*/index.vue'); 
  export default function install(app: any) {
   for (const [key, value] of Object.entries(components)) {
    // 注册组件名字   没有抛出Name， 引用文件组件文件夹名字
     const name = componentsName[key].default.name || key.slice(31, key.lastIndexOf('/'));
     app.component(name, defineAsyncComponent(value));
   }
 }

我的组件都是文件下RT-img/index.vue这样的文件格式

main.ts

import components from "./globalComponents";

const app = createApp(App)
app.use(createPinia()).use(router).use(ElementPlus, {
    locale: zhCn,
}).use(components).mount('#app')

这样就完成全局注册了，代码里就可以直接引用 <RtImg :imgSrc='item.icon_img'/>

之后的全局组件就可以直接放到src/components/vueGlobalComponents文件下面了 不用再一个一个到main.ts里面去注册。

webpack搭建的vue3项目自动注册组件可以去看看这个博客 www.jianshu.com/p/1e332ad4c…