Vue实现批量注册组件

目的： 自动的批量注册组件。

在注册组件时，我们常常会遇到这种情况：

import aaa from './aaa'
import bbb from './bbb'
import ccc from './ccc'

export default {
  install (app) {
    app.component(aaa.name, aaa)
    app.component(bbb.name, bbb)
    app.component(ccc.name, ccc)
  }
}

每次注册组件，都需要我们手动引入再注册。那么有没有一种代码可以自动帮我们完成这件事呢？答案是有的！

大致步骤：

• 使用 require 提供的函数 context 加载某一个目录下的所有 .vue 后缀的文件。
• 然后 context 函数会返回一个导入函数 importFn
  • 它又一个属性 keys() 获取所有的文件路径
• 通过文件路径数组，通过遍历数组，再使用 importFn 根据路径导入组件对象
• 遍历的同时进行全局注册即可

代码实现：

src/components/index.js

// 导入library文件夹下的所有组件
// 批量导入需要使用一个函数 require.context(dir,deep,matching)
// 参数：1. 目录  2. 是否加载子目录  3. 加载的正则匹配
const importFn = require.context('./', false, /\.vue$/)
// console.dir(importFn.keys()) 文件名称数组

export default {
  install (app) {

    // app.component(aaa.name, aaa)
    // app.component(bbb.name, bbb)
    // app.component(ccc.name, ccc)

    // 批量注册全局组件
    importFn.keys().forEach(key => {
      // 导入组件
      const component = importFn(key).default
      // 注册组件
      app.component(component.name, component)
    })

  }
}

 最后只需在main.js中注册即可

import { createApp } from 'vue'
import App from './App.vue'

// 导入自己的组件库
import components from '@/components'

createApp(App).use(components).mount('#app')