vue3 vite自动化注册全局组件

问题描述

当我们开发一个很大的项目的时候，往往需要封装很多全局组件来复用，这时如果我们一个个的在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>