vue 组件批量注册方法

// 批量注册组件流程
/**
 * 使用 `require` 提供的函数  `context` 加载某一个目录下的所有 `.vue` 后缀的文件
 * 然后 `context` 函数会返回一个导入函数 `importFn`
 * 它有一个属性 `keys()` 获取所有文件路径
 * 通过文件路径数组，通过遍历数组，再使用 `importFn` 根据路径导入组件对象
 * 遍历的同时进行全局注册即可
 * 
 * context(目录路径、是否加载子目录、加载文件的匹配正则) 
 */
 const importFn = require.context('./',false,/\.vue$/)
 console.log(importFn.keys());
export default {
  install(app) {
    // 根据 keys 批量注册
    importFn.keys().forEach(path=>{
      // 导入组件 default 是每一个组件
      const component = importFn(path).default
      // 进行注册
      app.component(component.name,component)
    })
  }
};

 require.context() 是 webpack 提供的一个自动导入的 API，这个方法有三个参数。

参数1：加载的文件目录

参数2：是否加载子目录

参数3：正则，匹配文件

返回值：导入函数 fn

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