批量注册组件

批量注册组件

::: tip 目的 自动批量注册组件 :::

大致步骤

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

export default {
  install(app) {
    // 全局注册组件
    // 1. 加载components下所有的vue文件
    const ctx = require.context('./', false, /\.vue$/)
    ctx.keys().forEach(item => {
      // item: 组件的地址  ctx(item) 导入这个组件
      const component = ctx(item).default
      app.component(component.name, component)
    })
  }
}

注意：组件创建的时候需要添加name属性

总结，知识点：

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