一般项目中需要使用很多组件,每次添加后然后再注册有点麻烦,使用webpack的require来批量注册全局组件
获取组件路径
// 参数分别是根目录,是否递归寻找,匹配的正则表达式
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)
}
)
然后就可以随意使用各种组件了