目录结构
- import.meta.glob 为动态导入
- import.meta.globEager 为直接引入
在components目录下创建一个index.js文件,全局的组件放在global文件夹下,根据个人习惯自行命名和存放位置
/*
**全局注册组件
** 放在components/global文件夹下
*/
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));
}
}
然后我们在main.js import引入
import components from '@/components/index'
app.use(components)
直接标签形式使用即可