Vue自動化註冊（懶人專屬）

1、認識require.contex()

require.contex()是什麼，用一句很簡單的話說就是檢索文件夾放回知足條件的文件。

require.contex()有三個參數:

require.context(directory, useSubdirectories = false, regExp = /^\.\//)

1. directory是你要檢索文件的相對路徑，相對require.contex()所在文件的路徑，例:./base；

   這裏作個相對路徑知識補充

   / 表明當前路徑
   
   ./ 表明當前的根目錄路徑
   
   ../ 表明當前上一級目錄路徑
   複製代碼

2. useSubdirectories是否要檢索該目錄下的子級目錄，默認是false不檢索，true爲檢索；

3. regExp是用正則表達式匹配你要檢索的文件名例：/index.vue$/。

require.contex()返回一個require 函數：

function webpackContext(req) {return __webpack_require__(webpackContextResolve(req));

該函數有三個屬性：resolve、keys、id：

1. resolve 是一個函數並返回已解析請求的模塊ID；
2. id是上下文模塊的模塊ID；
3. keys是一個函數,返回你檢索到全部文件的文件名數組集合，例：["./adas_config/index.vue", "./adas_system_info/index.vue"],這個屬性就是實現Vue項目工程自動化的關鍵。

此外該函數能夠接收keys()中一個項做爲參數，返回是該文件中export出來的值。

下面舉個實際例子：

文件夾結構

先在main.js加入 import 'views/register.js' 而後在register.js寫，能夠看到 require.contex()返回函數中的kyes打印出來的內容。

const require_component = require.context('./', true, /.vue$/);
console.log(require_component.keys())//["./test1.vue", "./test2.vue", "./test3.vue"]
複製代碼

2、自動化註冊全局組件

直接上實際項目中的案例

一個右鍵菜單，目前有42個菜單項，每一個菜單項點擊後會彈出一個對話框，每一個對話框都是一個組件，要求作到建立一個組件文件夾，這個組件自動註冊。 文件夾結構

子文件夾結構

在right_menu.js文件中寫入

import Vue from 'vue';
//將首字母變成大寫
import upperFirst from 'lodash/upperFirst';
//將字符串轉成駝峯寫法
import camelCase from 'lodash/camelCase';
const require_component = require.context('./',true,/index.vue$/);
require_component.keys().forEach(file_name => {
    console.log(file_name)//./wireless_update/index.vue
    //獲取組件配置就是組件中export default後面的對象
    const component_config = require_component(file_name);
    // 獲取組件的 首字母大寫且駝峯方式的命名
    const component_name = upperFirst(camelCase(file_name.replace(/^\.\//, '').replace(/\/index\.vue$/, '')));
    // 全局註冊組件
    // 若是這個組件選項是經過 `export default` 導出的，
    // 那麼就會優先使用 `.default`，
    // 不然回退到使用模塊的根。
    Vue.component(component_name, component_config.default || component_config);
});
複製代碼

最後在main.js中加入import 'views/right_menu/right_menu。

3、自動化註冊Vuex的Module

直接上實際項目中的案例

文件夾結構

module的文件夾中的文件會隨着項目進行不斷增長

改造前要一個個註冊，代碼以下：

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
import permissions from './module/permissions';
import common from './module/common';
import websocket from './module/websocket';
import video_historical from './module/video_historical'
import map from './module/map'
import player from './module/player'
import realtime_monitoring from './module/realtime_monitoring'
import platform_parameter_config from './module/platform_parameter_config';
import alarm from './module/alarm';
import options from './module/options';
const debug = process.env.NODE_ENV !== 'production';
const store = new Vuex.Store({
   strict: debug,
   modules: {
      permissions,
      common,
      websocket,
      video_historical,
      map,
      player,
      realtime_monitoring,
      platform_parameter_config,
      alarm,
      options
   }
});
複製代碼

改造後在module的文件夾添加文件會自動註冊

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
import camelCase from 'lodash/camelCase';
const require_modules = require.context('./module', false, /\.js$/);
const modules = {};
require_modules.keys().forEach(item => {
    const fileName = item.slice(2, -3);
    const module_name = camelCase(fileName);
    const module_config = require_modules(item).default;
    //經過require_modules(item)導出文件內容。在文件中時經過 export.default 導出的，因此後邊加.default
    modules[module_name] = {
    	...module_config,
    };
});
const debug = process.env.NODE_ENV !== 'production';
const store = new Vuex.Store({
    strict: debug,
    modules: {
    	...modules,
    }
});
複製代碼

4、自動化註冊路由

待續…………