基于 VueCLI 搭建自己的 vue 项目脚手架

概述

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,提高脚手架的适用性.