vue全局引入多个组件

1.在utils文件夹下面创建一个cpm.js(路径名字自定义)

// 1 - cpm.js
import Vue from 'vue' // 引入vue

// 处理首字母大写 dx => Dx
function changeStr(str){
    return str.charAt(0).toUpperCase() + str.slice(1)
}
/*
    require.context(arg1,arg2,arg3)
        arg1 - 读取文件的路径
        arg2 - 是否遍历文件的子目录
        arg3 - 匹配文件的正则
        关于这个Api的用法，可以去查阅一下，用途也比较广泛
*/
const requireComponent = require.context('../components', false, /\.vue$/)
console.log('requireComponent.keys():',requireComponent.keys())  //打印结果如下图
requireComponent.keys().forEach(fileName => {
    const config = requireComponent(fileName)
    console.log('config:',config)  
    const componentName = changeStr(
        fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')   // ./test.vue => test
    )
    
    Vue.component(componentName, config.default || config) // 动态注册该目录下的所有.vue文件
})

2.在main.js中引入

3.页面使用，直接写组件名字即可