问题描述
当我们开发一个很大的项目的时候,往往需要封装很多全局组件来复用,这时如果我们一个个的在main.js通过去完成全局注册就非常麻烦,所以我们得自动注册全局组件直接使用。
vite导入方式
vite中不能像webpack可以使用require.context方法进行导入处理
import.meta.glob //为过动态导入
import.meta.globEager //为直接引入
目录结构
我们在components目录下创建一个index.js文件,根据个人习惯自行命名和存放位置
// index.js文件
import { defineAsyncComponent } from "vue";
/**
* @description 在src/components目录下创建文件,即 src/components/xxx.vue
* @description 在src/components目录下创建目录及文件,即 src/components/xxx文件夹/xxx.vue
*/
const components = import.meta.glob("./**/**.vue");
// console.log(components,'components++++++++++++++++++');
export default function install(app) {
for (const [key, value] of Object.entries(components)) {
// console.log(key,'key++++++++++++++++++++++++++++++++');
const name = key.slice(key.lastIndexOf('/') + 1, key.lastIndexOf('.'));
// console.log(name,'name+++++++++++++++++++++++++++++');
app.component(name, defineAsyncComponent(value));
}
}
然后在main.js import引入
import { createApp } from "vue";
import App from "./App.vue";
import router from "@/router/index";
import components from "@/components/index";
const app = createApp(App);
app.use(router).use(components).mount("#app");
使用全局组件
<template>
<div class="content">
<NavMenu />
//或者
<nav-menu />
</div>
</template>