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、自动化注册路由

待续…………