vue3批量注册全局组件

步骤

• 使用 require 提供的函数 context 加载某一个目录下的所有 .vue 后缀的文件。

• 然后 context 函数会返回一个导入函数 importFn

  • 它又一个属性 keys() 获取所有的文件路径

• 通过文件路径数组，通过遍历数组，再使用 importFn 根据路径导入组件对象

• 遍历的同时进行全局注册即可

文件结构

代码

src/components/library/index.js

// context() 参数：1.目录 2.是否加载子目录 3.文件匹配 正则
const importFn = require.context('./', false, /.vue$/)
console.log(importFn.keys())
export default {
  install (app) {
    // 根据keys批量注册
    importFn.keys().forEach(key => {
      // 导入组件 
      // default 默认导出的内容 组件中export default {}
      const component = importFn(key).default
      console.log(component)
      // 注册组件
      app.component(component.name, component)
    })
  }
}

console.log(importFn.keys()) 打印结果 获取到所有路径

console.log(component) 打印结果 获取默认导出内容

总结知识点：

• require.context() 是webpack提供的一个自动导入的API

  • 参数1：加载的文件目录

  • 参数2：是否加载子目录

  • 参数3：正则，匹配文件

  • 返回值：导入函数 fn

    • keys() 获取读取到的所有文件列表