码路芽子的博客：https://mlyz-wdy.gitee.io/
1. 定义全局组件
我的全局组件写在 src/components/global 中
2. 导出全部组件
在 global 里面新建一个 index.js 文件，根据 vite 打包特性，代码如下：
import { defineAsyncComponent } from 'vue'
const components = import.meta.glob('./global/*.vue')
export default function install(app) {
for (const [key, value] of Object.entries(components)) {
const name = key.slice(key.lastIndexOf('/') + 1, key.lastIndexOf('.'))
app.component(name, defineAsyncComponent(value))
}
}
注解：
- 利用
vite读取global文件中全部.vue结尾的组件 -
index.js中循环每个组件注册为全局组件 - 导出
install方法
2. main.js 中注册
import { createApp } from 'vue'
import components from '@/components/index.js'
const app = createApp(App)
app.use(components).mount('#app')
以上：避免多次使用组件多次在 vue 文件中 import
