玖叶教程网

一般项目中需要使用很多组件，每次添加后然后再注册有点麻烦，使用webpack的require来批量注册全局组件

代码

const requireComponent = require.context('./', true, /\.vue$/)
requireComponent.keys().forEach(
  (filePath) => {
    let componentName = requireComponent(filePath).default.name
    Vue.component(componentName, requireComponent(filePath).default)
  }
)

获取组件路径

// 参数分别是根目录，是否递归寻找，匹配的正则表达式
const requireComponent = require.context('./', true, /\.vue$/)
console.log(requireComponent.keys())

使用数组的forEach遍历并注册，注册名称为组件名称，组件命名最好使用vue规范，也可以自己写转换函数，或使用lodash转换名称

_.kebabCase('Foo Bar');
// => 'foo-bar'
 
_.kebabCase('fooBar');
// => 'foo-bar'
 
_.kebabCase('__FOO_BAR__');
// => 'foo-bar'

requireComponent.keys().forEach(
  (filePath) => {
    let componentName = requireComponent(filePath).default.name
    console.log(filePath, componentName)
    Vue.component(componentName, requireComponent(filePath).default)
  }
)

代码：

import Vue  from  'vue'
// const  requireComponent=require.context('公共组件的目录','是否深层次查找',正则[以.vue文件结尾的都是我们要找的])
const requireComponent = require.context('./', true, /.vue$/)
console.log(requireComponent.keys(), 222);
// requireComponent.keys()//  ['./Breadcrumb/index.vue', './Hamburger/index.vue', './SvgIcon/index.vue', './toolPage/index.vue'] 222
requireComponent.keys().forEach(item => {
  console.log(requireComponent(item), 888);
  var defaultCom = requireComponent(item).default  //  获取的就是组件暴露出来的对象
  Vue.component(defaultCom.name,defaultCom)
})

记得组件一定要写组件名！！！

然后就可以随意使用各种组件了