使用vue-cli3 预设 定制前端开发模板

背景介绍

vue-cli3 在 vue-cli3 的基础上真正的做到了简洁,开箱即用,简单到几乎看不到配置。

通用性的提升,往往伴随着个性化的减弱。

面对不同形态的业务需求,我们应该如何量身定做模板呢?

本文重点:远程 preset

理论

你可以通过发布 git repo 将一个 preset 分享给其他开发者。这个 repo 应该包含以下文件:

  • preset.json: 包含 preset 数据的主要文件(必需)。
  • generator.js: 一个可以注入或是修改项目中文件的 Generator。
  • prompts.js: 一个可以通过命令行对话为 generator 收集选项的 prompts 文件。
1
2
// 从 GitHub repo 使用 preset
vue create --preset username/repo my-project

GitLab 和 BitBucket 也是支持的。如果要从私有 repo 获取,请确保使用 –clone 选项:

1
2
vue create --preset gitlab:username/repo --clone my-project
vue create --preset bitbucket:username/repo --clone my-project

第一步

创建git repo (repo为仓库repository的缩写)也就是创建一个仓库例如vue-cli-plugin-sdh
username 为 github 用户名,作者用户名为 s249359986
最终 git repo 就是 s249359986/vue-cli-plugin-sdh

preset.json 文件(必须)

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
{
"useConfigFiles": true,
"plugins": {
"@vue/cli-plugin-babel": {
"version": "^3.0.0"
},
"@vue/cli-plugin-eslint": {
"version": "^3.0.0",
"config": "recommended",
"lintOn": [
"save",
"commit"
]
}
},
"configs": {
"vue": {
},
"postcss": {},
"eslintConfig": {}
},
"router": true,
"vuex": false,
"routerHistoryMode": false
}

其中当 “useConfigFiles”: true 时, configs 内的配置信息会直接覆盖初始化后项目中的 vue.config.js

prompts.js 文件

一个可以通过命令行对话为 generator 收集选项的 prompts 文件
prompts.js 参考如下:

1
2
3
4
5
6
7
8
9
10
参数详解 https://github.com/SBoudrias/Inquirer.js#question

module.exports = [
{
name: "vuex",
type: "confirm",
message: `是否需要使用 vuex`,
default: false
}
]

generator.js 文件

该文件用来修改项目中的文件

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
42
43
44
45
46

module.exports = (api, options, rootOptions) => {

/**
* --modern 使用现代模式构建应用,为现代浏览器交付原生支持的 ES2015 代码,并生成一个兼容老浏览器的包用来自动回退
* --mode test, sandbox,online 对应.env.test 不同环境模式
*
*
*/

const pkg = {
scripts: {
'build:test': 'cross-env APP_NS=test vue-cli-service build --dest dist/test --mode test --modern',
'build:sandbox': 'cross-env APP_NS=sandbox vue-cli-service build --dest dist/sandbox --mode sandbox --modern',
'build:online': 'cross-env APP_NS=online vue-cli-service build --dest dist/online --mode online --modern',
},
devDependencies: {
"node-sass": "^4.13.1",
"sass-loader": "^8.0.2",
"mockjs": "^1.0.1-beta3",
"postcss-px2rem": "^0.3.0",
'@types/express': '^4.16.0',
'@types/webpack-chain': '^4.8.1',
'cross-env': '^5.2.0',
'mockjs': '^1.0.1-beta3',
'express': '^4.16.4',
'mocker-api': '^1.6.6'
},
dependencies: {
"axios": "^0.18.0",
"lodash": "^4.17.10",
"keymirror": "^0.1.1"
},
babel: {},
};
// 安装一些基础公共库

api.extendPackage(pkg)
// 公共基础目录和文件 配置整个模板
//
api.render('./template');
// 配置文件 单独配置指定文件
api.render({
'./.eslintrc.js' : './template/_eslintrc.js',
});
}

主要api:

  • api.extendPackage : 负责给初始化项目中的 package.json 添加额外依赖并安装;

  • api.render : 负责将模板项目中提前定义好的目录和文件拷贝到初始化的项目中;

    1. 直接传地址字符串,render 函数会将你所传目录内的所有文件覆盖初始化项目中根 目录下的文件;
    2. 直接传入一个 object,其中 key 对应初始化项目中的目标位置,value 对应模板项目中的文件位置;
    3. 当你需要复制一个以 . 开头的文件时,模板项目中需要用 _ 替代 .;
  • api.postProcessFiles : 负责具体处理模板项目中的文件

vue-cli 3 在拷贝文件时使用的是 EJS 模板去实现的,所以开发者是可以在任意文件中使用 EJS 语法去做更细粒度的控制。比如我的 main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import Vue from 'vue'
import App from './App.vue'
<%_ if (options.vuex) { _%>
import store from './store'
<%_ } _%>
<%_ if (options.elementUI) { _%>
import ElementUI from 'element-ui';
Vue.use(ElementUI);
<%_ } _%>

// simulation data
import './mock/index';

Vue.config.productionTip = false

new Vue({
router,
<%_ if (options.vuex) { _%>
store,
<%_ } _%>
render: h => h(App)
}).$mount('#app')

// 更多语法参考 YAML https://yaml.org/

项目github地址

第二步

代码发布到仓库

第三步

模板使用

1
vue create --preset s249359986/vue-cli-plugin-sdh my-project
打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!

请我喝杯咖啡吧~

支付宝
微信