概述
VueCLI 提供了非常完善的工程化解决方案.我们可以基于 VueCLI 的 preset 来定制自己的项目.由于部署系统的不同,团队习惯不同等原因,我们需要在 VUECLI 提供的默认方案上做一些修改,这些修改可以通过 preset 保存下来,方便后续创建相同配置的项目.
使用方法
vue create 可以通过 --preset 来指定preset 的位置,可以是本地路径也可以是远程地址,比如 gitlab 等. 定制好 preset 后就可以通过 vue create --preset myPresetAddress project-xxx 来一键创建项目了.
vue preset 简介
vue preset 主要包含 preset.json(必需) generator.js prompts.js 三个文件.其中 preset.json 是必须的.这里包括 VUECLI 插件列表和对应的配置.
例如
{
"useConfigFiles": true,
"cssPreprocessor": "sass",
"plugins": {
"@vue/cli-plugin-babel": {},
"@vue/cli-plugin-eslint": {
"config": "airbnb",
"lintOn": ["save", "commit"]
},
"@vue/cli-plugin-router": {},
"@vue/cli-plugin-vuex": {}
},
"configs": {
"vue": {...}, // vue.config.js
"postcss": {...}, // .postcssrc.js
"eslintConfig": {...}, // .eslintrc.js
"jest": {...}
}
}
generator.js 用于在新项目里创建文件和修改原因文件,以适配自己的工程化需求.比如生产 jsconfig.json 配置,修改 .editorconfig 等.
prompts.js 用于在命令行给出一些可交互提示,把选项传递给 generator,提高脚手架的适用性.
