vue 懒人_Vue自动化注册（懒人专属）

一、认识require.contex()

require.contex()是什么，用一句很简单的话说就是检索文件夹放回满足条件的文件。

require.contex()有三个参数:

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

directory是你要检索文件的相对路径，相对require.contex()所在文件的路径，例:./base；

这里做个相对路径知识补充

/ 代表当前路径

./ 代表当前的根目录路径

../ 代表当前上一级目录路径

复制代码

useSubdirectories是否要检索该目录下的子级目录，默认是false不检索，true为检索；

regExp是用正则表达式匹配你要检索的文件名例：/index.vue$/。

require.contex()返回一个require 函数：

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

该函数有三个属性：resolve、keys、id：

resolve 是一个函数并返回已解析请求的模块ID；

id是上下文模块的模块ID；

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"]

复制代码

二、自动化注册全局组件

直接上实际项目中的案例

一个右键菜单，目前有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。

三、自动化注册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,

}

});

复制代码

四、自动化注册路由

待续…………