vue3 - 批量注册组件

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

大致步骤：

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

手动注册组件

批量注册组件

// 导入library文件夹下的所有组件
// 批量导入需要使用一个函数 require.context(dir,deep,matching)
// 参数：1. 目录  2. 是否加载子目录  3. 加载的正则匹配
const importFn = require.context('./', false, /\.vue$/)
// 匹配到的文件名数组
// console.log('查看匹配到的文件名数组', importFn.keys()) 
export default {
  install (app) {
  	// 批量注册全局组件
    // 遍历文件名数组
    importFn.keys().forEach(item => {
      // 导入函数根据文件名，导入文件内容
      const component = importFn(item).default
      // console.log(component)
      // 根据导入的组件文件，实现自动全局注册
      app.component(component.name, component)
    })
  }
}
           

总结：

require.context() 是webpack提供的一个自动导入的API
参数1：加载的文件目录
参数2：是否加载子目录
参数3：正则，匹配文件
返回值：导入函数 fn
keys() 获取读取到的所有文件列表