vue 批量 注册组件

原文链接: vue 批量 注册组件

上一篇: 初次使用api cloud

下一篇: vue 动态路由切换刷新

一般项目中需要使用很多组件，每次添加后然后再注册有点麻烦，使用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)
  }
)

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