vue3统一批量注册全局组件

vue3版本中，为了避免每次注册组件都要进行引入注册的重复操作，从而需要在components文件夹下统一批量注册全局组件。

index.ts统一处理

在components文件夹下新建一个index文件，进行统一处理

具体代码处理

/** ts统一批量注册全局组件 */
import { defineAsyncComponent } from 'vue';
import type { App, Component } from 'vue';

// 使用 import.meta.glob 获取所有 .vue 文件
const components = import.meta.glob('./**/*.vue');

export default function install(app: App) {
  for (const [key, value] of Object.entries(components)) {
    // 提取组件名称, 注意组件文件的命名名称必须和使用组件的名称一致
    const name = key.substring(key.lastIndexOf('/') + 1, key.lastIndexOf('.'));
    // 使用类型断言将 value 转换为 () => Promise<Component>
    app.component(name, defineAsyncComponent(() => value() as Promise<Component>));
  }
}


/** ts单个引入在注册全局组件 */
// 引入组件
// import svgIcon from './svgIcon/index.vue';
// import type { App, Component } from 'vue';

// // 全局对象
// const allGlobalComponents: { [name: string]: Component } = { svgIcon };

// export default {
//   install(app: App) {
//     // 注册项目全部的全局组件爱你
//     Object.keys(allGlobalComponents).forEach(key => {
//       // 注册为全局组件
//       app.component(key, allGlobalComponents[key])
//     })
//   }
// }


/** js统一批量注册全局组件 */
// import { defineAsyncComponent } from 'vue'
// import type { App, Component } from 'vue';

// const components = import.meta.glob('./**/*.vue')
// export default function install (app: App) {
//   for (const [key, value] of Object.entries(components)) {
//     const name = key.substring(key.lastIndexOf('/') + 1, key.lastIndexOf('.'))
//     app.component(name, defineAsyncComponent(value))
//   }
// }

main.ts引入使用

main.ts文件夹进行统一引入并使用

import { createApp } from 'vue'
import App from './App.vue'

// 全局样式
import '@/styles/index.scss'

//svg插件需要配置代码
import 'virtual:svg-icons-register'

// 引入路由和pinia
import router from './router'
import store from './stores'

// 引入element相关
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

// 引入全局组件
import gloalComponents from '@/components/index.ts'

// 导入自定义指令
import sizeDirect from './directives/sizeDirect'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

app.directive('sizeDirect', sizeDirect)
app.use(store)
app.use(router)
app.use(ElementPlus)
app.use(gloalComponents)

app.mount('#app')