Vue-cli 快速搭建项目并保存为 preset

使用 Vue CLI v4.5 快速搭建一个 Vue3 项目

安装 Vue CLI

npm install -g @vue/cli

然后进入这个项目中执行

vue upgrade --next

npm root -g 查看全局安装的 npm 包路径

搭建项目

vue create your-project

然后选择 Manually select features 开始选择，之后可以把选择的配置生成一个 preset，会通过 .vuerc 文件存下来（默认保存到 Users/[username]/.vuerc），用于以后生成同样配置的项目（也可直接修改此文件），例如刚才的 preset 取名 vue3-demo

// .vuerc
{
  "useTaobaoRegistry": true,
  "packageManager": "npm",
  "presets": {
    "vue3-demo": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-typescript": {
          "classComponent": false,
          "useTsWithBabel": true
        },
        "@vue/cli-plugin-router": {
          "historyMode": true
        },
        "@vue/cli-plugin-vuex": {},
        "@vue/cli-plugin-eslint": {
          "config": "prettier",
          "lintOn": [
            "save"
          ]
        },
        "@vue/cli-plugin-unit-jest": {},
        "@vue/cli-plugin-e2e-cypress": {}
      },
      "vueVersion": "3",
      "cssPreprocessor": "dart-sass"
    }
  }
}

项目搭建完成，这里选择了 vue3 + router + vuex + ts + sass + eslint + prettier + jest + cypress。

下次再 vue create project-name 就可以直接选择保存的 preset 来生成同样配置的项目了。