vue批量引入组件

方式一，在页面引入的方式

function camelCase(s) {

    return s.replace(/-\w/g,function(x){

        return x.slice(1).toUpperCase()

    })

}

const allComponents = require.context(

    '../components',

    true,

    /\.vue$/

)

let resComponents = {}

allComponents.keys().forEach(comName=>{

    let name = camelCase(comName)

    const comp = allComponents(comName)

    resComponents[name.replace(/^\.\/(.*)\.\w+$/,"$1")] = comp.default

})

export default resComponents

 

方式二：全局方式

const requireComponent = require.context(

        // 其组件目录的相对路径

        './components',

        // 是否查询其子目录

        true,

        // 匹配基础组件文件名的正则表达式

        /\.vue$/

    )

    // console.log('实时',requireComponent);

    requireComponent.keys().forEach(fileName => {

        // console.log('fie',fileName);

        // 获取组件配置

        const componentConfig = requireComponent(fileName)

        // 全局注册组件

        Vue.component(

            componentConfig.default.name,   // 此处的name,是组件属性定义的name

            // 如果这个组件选项是通过 `export default` 导出的，

            // 那么就会优先使用 `.default`，

            // 否则回退到使用模块的根。

            componentConfig.default

        )

    })