使用webpack提供的一个自动导入的API自动的批量注册组件

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

大致步骤：

• 使用 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()) 文件名称数组
export default {
install (app) {

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

}

总结，知识点：

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

好处：后续再添加的全局组件，就不再需要手动导入了。