當(dāng)vue接觸的多了之后，你可能也會到自己封裝組件的程度，試想每個頁面的功能級模塊全部拆分成組件，然后后續(xù)請求后臺數(shù)據(jù)傳入進(jìn)去或者自己模擬數(shù)據(jù)，是多么方便的一件事情。

每當(dāng)我們需要修改的時候，只需維護(hù)那一個功能性組件即可，不需要這個功能了，只需要從頁面中刪除這個組件的引用即可。

那么廢話不多說了，我們來看看如何全局注冊并一鍵引入（類似于element ui的全部引入）。

如何封裝組件就不多贅述了。

參考vue官網(wǎng)的做法：vue官網(wǎng)全局注冊

1、正則判斷路徑以及文件名，獲取全部組件并全局注冊（可以直接在main.js里寫，但是為了規(guī)范以及后期可維護(hù)性，我們新建個單獨(dú)的的js文件寫入）

（1）main.js引入所有自定義封裝的組件

import Vue from 'vue';import echarts from 'echarts';import App from './App.vue';import router from './router';import store from './store';import './plugins/element';// 引入時間戳序列化import './plugins/dateFormat';// 引入公共樣式import Public from './assets/css/public.css';// 引入所有自定義封裝的組件import './components/CommonCommponts/GlobalComponents';import startup from './startup'; // 使用公共樣式Vue.use(Public); Vue.config.productionTip = false;Vue.prototype.$echarts = echarts; function vue() { new Vue({ router, store, render: h => h(App) }).$mount('#app');}startup(vue, router);

（2）全局組件的GlobalComponents.js

這里需要安裝2個插件upperFirst和camelCase

下面是組件相對于這個文件的路徑，因?yàn)槲业姆庋b組件和這個js文件在同一級，所以直接 . 就可以了。

然后是是否查詢子目錄，即這個路徑下你又新建了文件夾，把各個組件區(qū)分開，那么就會嵌套很多層，查詢子目錄可以方便的使我們找到它們。

然后是正則表達(dá)式，因?yàn)槲业乃薪M件名都是Rdapp開頭的，這里看大家的文件命名，不需要的話刪除前面的Rdapp即可。

然后下面的部分就可以不用動了。

import Vue from 'vue';import upperFirst from 'lodash/upperFirst';import camelCase from 'lodash/camelCase'; const requireComponent = require.context( // 其組件目錄的相對路徑 '.', // 是否查詢其子目錄 true, // 匹配基礎(chǔ)組件文件名的正則表達(dá)式 /Rdapp[A-Z]/w+/.(vue|js)$/,); requireComponent.keys().forEach((fileName) => { // 獲取組件配置 const componentConfig = requireComponent(fileName);  // 獲取組件的 PascalCase 命名 const componentName = upperFirst( camelCase(  // 獲取和目錄深度無關(guān)的文件名  fileName  .split('/')  .pop()  .replace(//./w+$/, ''), ), );  // 全局注冊組件 Vue.component( componentName, // 如果這個組件選項是通過 `export default` 導(dǎo)出的， // 那么就會優(yōu)先使用 `.default`， // 否則回退到使用模塊的根。 componentConfig.default || componentConfig, );});