Tip: 如果选用第一项，例如 eslint 的配置就会单独存放在一个文件（.eslintrc.js）中；如果选第二项，该配置就会存放在 package.josn 中，而 package.json 是不能写注释，而且太多配置都写入 package.json 也不好维护
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files ? Save this as a preset for future projects? (y/N)是否保存成一个预设给以后项目使用。这里选 y，然后输入存储当前配置项的名称，例如 presetNameA
? Save this as a preset for future projects? Yes ? Save preset as:随后就会创建完毕，并提示通过 npm run serve 启动服务：
... � Generating README.md... � Successfully created project vue-hello-world. � Get started with the following commands: $ cd vue-hello-world $ npm run serve > npm run serve ... Time: 3055ms App running at: - Local: :8080/ - Network: :8080/通过浏览器访问 :8080/ 即可访问项目。
Tip：下次创建项目的时候就会看到刚保存的预设（presetNameA）：
> vue create demo Vue CLI v4.5.13 ? Please pick a preset: (Use arrow keys) > presetNameA ([Vue 2] less, babel, typescript, pwa, router, vuex, eslint, unit-mocha, e2e-cypress) Default ([Vue 2] babel, eslint) Default (Vue 3) ([Vue 3] babel, eslint) Manually select features 插件Vue CLI 使用了一套基于插件的架构。如果你查阅一个新创建项目的 package.json，就会发现依赖都是以 @vue/cli-plugin- 开头的：
// vue-hello-world/package.json { "name": "vue-hello-world", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "test:unit": "vue-cli-service test:unit", "test:e2e": "vue-cli-service test:e2e", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.6.5", "register-service-worker": "^1.7.1", "vue": "^2.6.11", "vue-class-component": "^7.2.3", "vue-property-decorator": "^9.1.2", "vue-router": "^3.2.0", "vuex": "^3.4.0" }, "devDependencies": { "@types/chai": "^4.2.11", "@types/mocha": "^5.2.4", "@typescript-eslint/eslint-plugin": "^4.18.0", "@typescript-eslint/parser": "^4.18.0", "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-e2e-cypress": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-pwa": "~4.5.0", "@vue/cli-plugin-router": "~4.5.0", "@vue/cli-plugin-typescript": "~4.5.0", "@vue/cli-plugin-unit-mocha": "~4.5.0", "@vue/cli-plugin-vuex": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/eslint-config-standard": "^5.1.2", "@vue/eslint-config-typescript": "^7.0.0", "@vue/test-utils": "^1.0.3", "chai": "^4.1.2", "eslint": "^6.7.2", "eslint-plugin-import": "^2.20.2", "eslint-plugin-node": "^11.1.0", "eslint-plugin-promise": "^4.2.1", "eslint-plugin-standard": "^4.0.0", "eslint-plugin-vue": "^6.2.2", "less": "^3.0.4", "less-loader": "^5.0.0", "typescript": "~4.1.5", "vue-template-compiler": "^2.6.11" } }插件可以修改 webpack 的内部配置，也可以向 vue-cli-service 注入命令。在项目创建的过程中，绝大部分列出的特性都是通过插件来实现的。
基于插件的架构使得 Vue CLI 灵活且可扩展。
下面我们将通过一个示例来讲解插件，首先新建项目 demo2（选择 Default）：
// 选则`Default ([Vue 2] babel, eslint)`默认创建 > vue create demo2Tip: 前面创建的项目（vue-hello-world）是基于 typescript，演示起来不是很方便
vue add每个 CLI 插件都会包含一个 (用来创建文件的) 生成器和一个 (用来调整 webpack 核心配置和注入命令的) 运行时插件。当你使用 vue create 来创建一个新项目的时候，有些插件会根据你选择的特性被预安装好。如果你想在一个已经被创建好的项目中安装一个插件，可以使用 vue add 命令，例如 vue add axios
Tip：vue add 的设计意图是为了安装和调用 Vue CLI 插件。这不意味着替换掉普通的 npm 包。对于这些普通的 npm 包，你仍然需要选用包管理器。
下面我们通过安装 axios 来详细了解一下vue add 插件 和 npm install 包之间的区别：
> npm i axios安装完成，项目中只有 package.json 会增加相应的依赖：
"dependencies": { + "axios": "^0.21.1", "core-js": "^3.6.5", "vue": "^2.6.11" },将 axios 这个包删除，再次用 vue add 安装 axios 插件：
// 删除 > npm r axios > vue add axios WARN There are uncommitted changes in the current repository, it\'s recommended to commit or stash them first. ? Still proceed?Tip: 由于会更改文件，所以会让你先提交代码
> vue add axios � Installing vue-cli-plugin-axios... ... Run `npm audit` for details. ✔ Successfully installed plugin: vue-cli-plugin-axios告诉我们正在安装的包是：vue-cli-plugin-axios
安装完成，通过 git status 就能知道此命令修改的文件和内容：
demo2> git status On branch master Changes not staged for commit: (use "git add <file>..." to update what will be committed) (use "git restore <file>..." to discard changes in working directory) modified: package-lock.json modified: package.json modified: src/main.js Untracked files: (use "git add <file>..." to include in what will be committed) src/plugins/ // package.json "devDependencies": { "axios": "^0.18.0", "vue-cli-plugin-axios": "~0.0.4", }, // main.js import \'./plugins/axios\' // src/plugins/axios.js "use strict"; import Vue from \'vue\'; import axios from "axios"; // Full config: https://github.com/axios/axios#request-config // axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || \'\'; // axios.defaults.headers.common[\'Authorization\'] = AUTH_TOKEN; // axios.defaults.headers.post[\'Content-Type\'] = \'application/x-www-form-urlencoded\'; let config = { // baseURL: process.env.baseURL || process.env.apiUrl || "" // timeout: 60 * 1000, // Timeout // withCredentials: true, // Check cross-site Access-Control }; const _axios = axios.create(config); _axios.interceptors.request.use( function(config) { // Do something before request is sent return config; }, function(error) { // Do something with request error return Promise.reject(error); } ); // Add a response interceptor _axios.interceptors.response.use( function(response) { // Do something with response data return response; }, function(error) { // Do something with response error return Promise.reject(error); } ); Plugin.install = function(Vue, options) { Vue.axios = _axios; window.axios = _axios; Object.defineProperties(Vue.prototype, { axios: { get() { return _axios; } }, $axios: { get() { return _axios; } }, }); }; Vue.use(Plugin) export default Plugin;接着启动服务，eslint 报错，于是修改 eslint 配置绕过代码校验，再次重启服务。
// package.json "extends": [ "plugin:vue/essential", - "eslint:recommended" ],在任意组件中即可使用 axios，例如在 App.vue 中使用：
<script> export default {} console.log(window.axios); </script>浏览器控制台会输出：
ƒ wrap() { var args = new Array(arguments.length); for (var i = 0; i < args.length; i++) { args[i] = arguments[i]; } return fn.apply(thisArg, args); }至此，axios 已经成功引入我们的项目，而且范文也已经就绪。