Vue 批量注册组件

背景

每个组件里都要import子组件，看起来一堆，然后，为了偷懒，就简单优化了一下。

目的： 将组件按照规范写到指定文件里，自动注册组件，这样可以在不同的组件里使用

code

const requireComponent = require.context(
    '../../components/xxxx-components',
    true, //是否查询其子目录
    /(\w+)(-(\w+))+\.(vue)$/ //匹配基础组件文件名的正则表达式
);
const requireComponentCommon = require.context(
    '../../components/commons',
    true, //是否查询其子目录
    /(\w+)(-(\w+))+\.(vue)$/ //匹配基础组件文件名的正则表达式
);
const pathArr = [requireComponent, requireComponentCommon];
const requireContext = (arr) => {
    arr.forEach((item) => {
        item.keys().forEach(fileName => {
            // console.log('fileName', fileName.split('/')[2].replace(/\.\w+$/,""));
            // 获取文件名
            const names = fileName.split('/')[2].replace(/\.\w+$/, "");
            // 获取组件配置
            const componentConfig = item(fileName);
            // 若该组件是通过"export default"导出的，优先使用".default"
            // 否则退回到使用模块的根
            Vue.component(names, componentConfig.default || componentConfig);
        });
    });
};
requireContext(pathArr);