webpack方法实现批量注册组件

141 阅读1分钟

方法: require.context('文件路径',深层查找[Boolean是否开启],匹配的文件后缀)

代码案例

export default {
  install(Vue) {
    /* 1.创建一个变量接收 用于查找该文件目录下的所有vue文件 */
    var requireComponent = require.context('./', true, /\.vue$/)
    // console.log(requireComponent.keys(), '数组777');
    
    /* 2.查找完成之后 根据对象注册事件 组件内必须要有name 否则无法注册
          keys() 为获取读取到的所有文件列表
    */
    requireComponent.keys().forEach((item) => {
      // console.log(requireComponent(item), 6);
      var moduleDefault = requireComponent(item).default
      console.log(moduleDefault, 88)
      Vue.component(moduleDefault.name, moduleDefault)
    })
  }
}

在哪个组件用就在哪个组件直接调用即可

<test></test>