vue项目中通过require.context()方法批量注册组件

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

大致步骤：

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

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

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

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

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

// 批量导入需要使用一个函数 require.context(dir,deep,matching)

    // 参数：1. 目录  2. 是否加载子目录  3. 加载的正则匹配

    const importFn = require.context('./', false, /.vue$/)
    
   // console.dir(importFn.keys()) 文件名称数组
      

 // 批量注册全局组件
    importFn.keys().forEach(key => {
    // 导入组件
    const component = importFn(key).default (使用export default默认导出)
      // 注册组件  (参数1: 组件内部name, 参数2: 组件对象)
     Vue.component(component.name, component)
    })