vue3+vite+ts中批量全局注册组件

前言

Vue3中批量全局祖册组件
学习的时候顺便记录一下，用于个人学习使用vite+vue3+ts，如果想直接看批量注册全局组件的，看文章目录，直接点目录跳转即可

在vue中，我们在main.ts引入的全局注册的组件是可以不需要import导入而直接使用的。使用的时候是自己全局注册组件时的名称，而不是组件名。

你是否还在一个个按需引用，如果使用vue3这些烦恼可以抛掷脑后。

一串代码解决所有。

import.meta.glob("./path/**/*.vue") 如这里：查找当前目录下的path目录下和（path目录下的子目录中的）以（点）.vue结尾的文件

import.meta.glob("./path/*.vue") 如这里：查找当前目录下的path目录下的以（点）.vue结尾的文件，不包括子目录中的文件

const componentss = import.meta.glob("./**/*.vue");

话不多说，直接上代码，如下：

第一步先在自己组件包里新建ts文件。

第二步，把对应代码复制进ts文件里

代码在这

import type { App } from 'vue'
import { defineAsyncComponent } from "vue";
import type { AsyncComponentLoader } from "vue"; // vue3+ts+vite 加上type,不然会报错。
const componentss = import.meta.glob("./**/*.vue");//全局这个无论多少层级
console.log(componentss)
console.log(Object.entries(componentss))

/**
 * 全局组件引用管理
 */
export default {
  install(app: App) {
    for (const [key, value] of Object.entries(componentss)) {
      // 字符串截取，具体看下面console.log()中的name就知道了
      const name = key.slice(key.lastIndexOf("/") + 1, key.lastIndexOf("."));
      console.log(name,value)
      console.log(`注意这里的name名称=》》            ${name}       ===>这个名称，
      自己作为了全局祖册组件的名称了,也就是如左侧目录的：aaa.vue去掉.vue就剩下aaa了
      ，然后那这个名称作为组件引用的名称，具体看截图就知道了。这时就是相当于跟左侧
      项目目录的.vue结尾的文件去掉.vue得到的名称`)
      app.component(name, defineAsyncComponent(value as AsyncComponentLoader));
    }      
  }
}

最后一步 找到main.ts 进行全局注册

代码如下： 结束

import 'amfe-flexible';
import { createPinia } from 'pinia';
import { createApp } from 'vue';

import router from './router/index';

import App from './App.vue';

import 'vant/lib/index.css';

// 引入ts文件对应的全局注册的组件的配置
import components from './views/homePage/templateCollection/myComponents';

// 对ts文件中的全局组件进行配置

const app = createApp(App)
app.use(components)
app.use(createPinia())
app.use(router)

app.mount('#app')

码字不易，给个心心~。哈哈哈哈~

有问题欢迎留言，随时解答。