目录
2、在auto文件夹下创建index.ts和其他需要注册的组件
提供一个思路,可根据自己的实际情况进行调整
1、首先在components文件夹下创建auto文件夹
- auto用于放置需要自动注册的组件
2、在auto文件夹下创建index.ts和其他需要注册的组件
- index.ts用于组件注册相关的索引逻辑
- 其他文件夹则为组件
3、index.ts写入组件注册索引逻辑![](https://i-blog.csdnimg.cn/blog_migrate/2f6e87bebf1488b13b3d120cbda3391a.png)
import {App, defineAsyncComponent } from 'vue'
// 默认一个文件夹文件自动注册全局组件
export default {
install(app: App) {
// import.meta.glob是vite的api
// import.meta.globEager新的vite版本已弃用
const components = import.meta.glob('./*/index.vue')
// 遍历组件模块实现自动注册
for (const [key, value] of Object.entries(components)) {
// 拼接组件注册的 name
const componentName = 'auto-' + key.replace('./', '').split('/')[0]
console.log(componentName);
// 通过 defineAsyncComponent 异步导入指定路径下的组件
app.component(componentName, defineAsyncComponent(value))
}
}
}
4、main.ts引入auto文件夹的index.ts文件
- 可根据自己的实际情况进行路由引入
5、demo文件夹index.vue配置我们的组件
- 组件识别取得是文件夹的名字,这里需要唯一
6、验证
组件名:componentName = 'auto-' + key.replace('./', '').split('/')[0]
'auto-':表示是自动识别,后面跟的是组件的文件夹名