[vue] 批量引入组件

背景

页面涉及到10个组件的引入，使用<component>动态获取组件，但是一个一个import太费事且下次增加组件，还要import且注册。

解决

获取./form路径下的所有文件
const requireComponent = require.context(
    './form', // 组件所在目录的相对路径
    true, // 是否查询其子目录
    /\w+\.vue$/ // 匹配基础组件文件名的正则表达式
)
let comObj = {}
requireComponent.keys().forEach(fileName => {
    // 获取文件名
    let names = fileName.split('/').pop().replace(/\.\w+$/, '')
    // 获取组件配置
    const componentConfig = requireComponent(fileName)
    // 若该组件是通过"export default"导出的，优先使用".default"，否则退回到使用模块的根
    comObj[names] = componentConfig.default || componentConfig
})

// 组件注册
components: Object.assign({}, comObj, { a: a })

这种动态引入组件避免了重复import和install的操作