優雅的處理vue註冊全局組件

使用情景：

　　有頻繁使用的組件 須要進行全局註冊

　　能夠將這些組件都放在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文件，  便可全局使用