如何在 Vue 项目中以插件的形式批量注册组件

步骤

1. 将需要注册的 vue文件 统一放置在一个 文件夹 下（文中以 components文件夹为例）, 并在此文件中创建一个 index.js 文件用以实现 批量注册组件 功能;

   // 文件夹示例:
   components
     |
     |---------- index.js
     |---------- a.vue
     |---------- b.vue
     |---------- c.vue
   

2. 批量导入需要使用一个函数 require.context

   const importFn = require.context('./', false, /\.vue$/)
   

   此函数有三个参数分别为:

   • 需要注册文件的目录路径（以 index.js 文件所在的路径为跟路径）；
   • 是否加载当前目录的子目录；
   • 加载符合条件（正则匹配）的文件；

3. 通过 importFn.keys() 可以拿到当前文件夹下所有符合要求的文件的路径并以数组的形式返回

   console.log(importFn.keys()) // ['./a.vue', './b.vue', './c.vue']
   

4. 遍历 importFn.keys() 返回的数组进行注册

   export default {
    // 如果想在 main.js 文件中使用 use 挂载, 则需要 install 函数
    install(app) {
     // 遍历符合要求的文件路径
     importFn.keys().forEach(item => {
      // importFn('文件路径').default 可以找到对应的 vue 组件的实例对象
      const component = importFn(item).default
      // 使用 vue 实例对象的 name 属性以及此对象本身进行全局注册
      app.component(component.name, component)
     })
   

5. 在 main.js 中挂载即可

   // 引入 自定义组件库
   import customComponents from '@/components/library/index.js'
   
   createApp(App)
     .use(store)
     .use(router)
     .use(customComponents) // 挂载 自定义组件库
     .mount('#app')
   

作用

如需要注册自定义组件, 只需将需要注册的 vue 文件放在 components 文件夹中即可, 不需要再进行手动注册;

完整代码

const importFn = require.context('./', false, /\.vue$/)

export default {
 install(app) {
    importFn.keys().forEach(item => {
      const component = importFn(item).default
      app.component(component.name, component)
    })
 }
}

---