自动化注册全局组件与 vuex modules

前言

在 vue 开发中,有很多地方需要做注册处理,非常繁琐。我们可以利用 webpack 的 require.context方法来做自动化注册。

自动化注册 vuex modules

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/*----------  自动注册modules  ----------*/
export default function() {
const requireComponent = require.context(
// 其组件目录的相对路径
"./modules",
// 是否查询其子目录
true,
// 匹配js文件
/\.js$/
);

const modules = {};

requireComponent.keys().forEach(fileName => {
// 获取配置
const componentConfig = requireComponent(fileName);

// 获取命名
const componentName = fileName
.split("/")
.pop()
.split(".")
.shift();

modules[componentName] = componentConfig.default || componentConfig;
});

// console.log("modules:", modules);
return modules;
}

这样放在 modules 文件夹下的 js 文件就会被自动注册。

自动化注册全局组件

我们可以在 components 文件夹下新建一个 baseComponents 文件夹,然后把需要注册为全局的组件放在这里,就会被自动注册为全局组件。

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import Vue from "vue";
import upperFirst from "lodash/upperFirst"; //转换字符串string的首字母为大写。
import camelCase from "lodash/camelCase"; //转换字符串string为 驼峰写法。

const requireComponent = require.context(
// 其组件目录的相对路径
"../baseComponents",
// 是否查询其子目录
true,
// 匹配基础组件文件名的正则表达式,只匹配字母开头的组件
/[A-Za-z]\w+\.(vue)$/
);

// console.log(requireComponent.keys());

requireComponent.keys().forEach(fileName => {
// 获取组件配置
const componentConfig = requireComponent(fileName);

// 获取组件的 PascalCase 命名
const componentName = upperFirst(
camelCase(
// 获取和目录深度无关的文件名
"base-" +
fileName
.split("/")
.pop()
.replace(/\.\w+$/, "")
)
);
// console.log("自注册全局组件:", componentName); //查看最终的组件名称

// 全局注册组件
Vue.component(
componentName,
// 如果这个组件选项是通过 `export default` 导出的,
// 那么就会优先使用 `.default`,
// 否则回退到使用模块的根。
componentConfig.default || componentConfig
);
});