vue batch registration components

In general, many components need to be used in a project. It is a bit troublesome to register after each addition. Use webpack's require to register global components in batches

 

get component path

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

 

Use the forEach of the array to traverse and register, the registration name is the component name, the component name is best to use the vue specification, you can also write your own conversion function, or use lodash to convert the name

_.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)
  }
)

 

Then you can use various components at will