VUE组件的批量全局注册

原创已于 2022-03-15 11:49:13 修改 · 1.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-02-17 15:19:31 首次发布

本文介绍了如何在Vue项目中批量全局注册组件，避免手动引入的繁琐过程。通过使用`require.context`和`Vue.component`，结合Vue的`use`插件接口，可以实现同级目录下所有`.vue`组件的批量注册。此外，还提供了Vite+TS环境下的批量注册实现方法。

VUE组件的批量全局注册

一般我们会用下面的方式在组件中调用其他组件。

import HelloWorld from '@/components/page/HelloWorld.vue'

常用的组件我们可以在main.js中通过全局注册的方式，从而可以全局访问组件。

import componentName1 from '../**/**'

Vue.component('componentName1 ',componentName1)

项目中通常会有许多复用性高的组件，这时我们可能会这样手动引入，这样就很费时。

Vue.component('componentName1 ',componentName1)
Vue.component('componentName2 ',componentName2)
Vue.component('componentName3 ',componentName3)
....

总所周知，程序员都是非常懒的生物【狗头】，所有能不能批量全局注册呢？

上代码：

//mian.js 根目录

import components from '@com/global/globalcomponents.js'

const APP = createApp(App)
    .use(store)
    .use(router)
    .use(components)

//注意：在挂载之前配置根组件实例
APP.mount('#app')

上面是借助 APP.use() 来实现批量处理。use是vue提供的插件接口，use会将当前实例作为参数，交给引入模块对象的install方法去处理。这样我们就可以用自己定义的components去实现批量注册。

//'@com/global/globalcomponents.js' 上面components的路径
//ps：@com 是我们自定义的路径别名

//require.context webpack的api用来创建上下文作用域
//三个参数分别为：目录，是否搜索子文件夹，匹配文件名的正则
const component = require.context('./', false, /\.vue$/);

//将得到的上下文作用域转为数组方便遍历
const requireAll = context => context.keys().map(context); 

//es6 模块抛出写法
export default {

  //app.use()默认调用install处理实例
  install: function(Vue) { 
   
    requireAll(component).forEach((item) => {
      
      //注意：组件抛出方式为 export default 
      let name = item.default.name

      //vue的全局注册API
      Vue.component(`${name}`, item.default);

    });
  }
}

将APP实例作为入参 -> 遍历需要全局注册的组件上下文 -> 调用APP实例的component全局注册方法 -> use 返回处理后的实例。

综上我们就实现了将 '@com/global/globalcomponents.js' 同级目录下组件的批量全局注册。

2022/03/14

补充一个vite+ts的版本

import { App } from 'vue';

type Module = { [key: string]: any }
//参考： https://cn.vitejs.dev/guide/features.html#glob-import
//获取当前目录及子目录下，所有以.vue结尾的文件的路径
const COMS: Record<string, Module> = import.meta.globEager("./*.vue")

export default {
  install(Vue: App) {
    Object.keys(COMS).forEach(key => {
      //匹配.vue结尾的文件名
      const match: RegExpMatchArray | null = key.match(/[\w]+(?=.vue)/)
      if (!match) return
      //组件名
      const name: string = match[0]
      //组件实例
      const component: Module = COMS[key].default
      //全局注册
      Vue.component(name, component)
    })
  }
}