| 环境： node.js：14.21 Vue CLI：4.5.9 |
1、执行创建命令
vue create xxx（项目名称）
2、选择一个预设
Vue CLI v4.5.9
┌─────────────────────────────────────────┐
│ │
│ New version available 4.5.9 → 5.0.8 │
│ │
└─────────────────────────────────────────┘? Please pick a preset:mloset ([Vue 3] babel)
> Default ([Vue 2] babel, eslint)Default (Vue 3 Preview) ([Vue 3] babel, eslint)Manually select features
3、选择所需功能
? Check the features needed for your project:
>(*) Choose Vue version(*) Babel( ) TypeScript( ) Progressive Web App (PWA) Support(*) Router(*) Vuex( ) CSS Pre-processors(*) Linter / Formatter( ) Unit Testing( ) E2E Testing
4、选择Vue版本
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x3.x (Preview)
5、选择路由模式（选择Router时）
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
默认history模式（Yes），也可配置hash模式（No）
6、选择一个合适的linter（代码检查工具）和formatter（代码格式化工具）（选择Linter / Formatter时）
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention onlyESLint + Airbnb configESLint + Standard configESLint + Prettier
| 解释每个选项： ESLint with error prevention only: 只使用ESLint的基础规则来防止常见的JavaScript错误。不强制编码风格，关注一些可能导致运行时错误问题。 ESLint + Airbnb config: Airbnb是一个流行的JavaScript编码规范，其配置文件包含了许多严格的规则。选择这个选项，你的代码将遵循 Airbnb的编码风格 。 ESLint + Standard config: Standard是一个更为简单和灵活的JavaScript编码规范。它的目标是减少开发者之间的争论，并鼓励一种简洁、一致的编码风格。 ESLint + Prettier: Prettier是一个非常流行的代码格式化工具，它可以帮助你自动调整代码的格式，使其看起来更加整洁和一致。选择这个选项，你可以结合ESLint进行错误检查，并使用Prettier自动格式化你的代码。 建议先尝试ESLint + Airbnb config，因为它提供了一个广泛接受的编码规范，并有助于确保代码的质量和一致性。 |
7、代码检查的时机（选择Linter / Formatter时）
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save( ) Lint and fix on commit
| 解释每个选项： Lint on save： 当保存文件时，自动进行linting检查。例如是否有未使用的变量、是否有拼写错误等。 Lint and fix on commit： 在提交代码之前，自动进行linting检查并尝试自动修复一些可修复的问题。这意味着，当你准备提交你的代码更改到版本控制系统（如Git）时，它首先会检查你的代码，然后尝试自动修复那些可以自动修复的问题（例如，某些简单的格式问题或代码风格问题）。 希望在保存文件时立即得到反馈，可以选择“Lint on save”。 希望在提交代码之前确保代码质量，并希望工具自动尝试修复一些问题，那么可以选择“Lint and fix on commit”。 可以同时选择两者。 |
8、对于Babel、ESLint等工具的配置（选择Babel、Linter / Formatter时）
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config filesIn package.json
| 解释每个选项： In dedicated config files： · Babel的配置放在.babelrc或babel.config.js文件中 · ESLint的配置放在.eslintrc、.eslintrc.json、.eslintrc.js、.eslintrc.yml或.eslintrc.yaml等文件中。 这种方式的优点是配置清晰、易于管理和阅读，同时这些文件也可以被版本控制系统（如Git）跟踪。 在package.json中： 将Babel和ESLint的配置直接放在项目的package.json文件中。这种做法可以减少项目中的文件数量，但可能会使package.json文件变得非常庞大和难以维护，尤其是当配置变得复杂时。此外，由于package.json通常用于存储项目的元数据和依赖项，将配置信息放在这里可能会导致信息混杂。 对于大多数项目来说，推荐使用专用的配置文件来放置Babel和ESLint的配置。这样做不仅使配置更加清晰和易于管理，而且也更符合项目结构和组织的最佳实践。 |
9、是否保存预设
? Save this as a preset for future projects? (y/N)
| 保存自己是预设就起个名字，后续可以直接指定该名称直接创建Vue项目 |
10、最后预览
Vue CLI v4.5.9
┌─────────────────────────────────────────┐
│ │
│ New version available 4.5.9 → 5.0.8 │
│ │
└─────────────────────────────────────────┘? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)n
)
