优雅的处理vue注册全局组件

Posted 2021-03-26 mr-rshare

使用情景：

　　有频繁使用的组件 需要进行全局注册

　　可以将这些组件都放在components下同一个文件夹下，在此文件夹中建立 一个js文件 代码如下：

　　

import Vue from ‘vue‘;

// 修改文件名首字母大写
function changeComponentName (str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
}

// 获取当前文件夹下的的组件
// require.context 三个参数  第一个表示读取文件的路径  第二个表示是否遍历文件的子目录   第三个表示匹配的文件的正则
const requireComponent = require.context(‘.‘, false, /.vue$/);

requireComponent.keys().forEach(fileName => {
    const config = requireComponent(fileName);
    const componetName = changeComponentName(
        // 去掉开头 ./  以及后面.vue
        fileName.replace(/^.//, ‘‘).replace(/.w+$/, ‘‘)
    );
    Vue.component(componetName, config.default || config);
})

最后一步 ： 在main.js中引入 当前的js文件，  即可全局使用