使用Vue CLI创建vue项目具体步骤及选项解释

|-------------------------------------|
| 环境： node.js：14.21 Vue CLI：4.5.9 |

1、执行创建命令

bash 复制代码

vue create xxx（项目名称）

2、选择一个预设

yaml 复制代码

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、选择所需功能

yaml 复制代码

? 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版本

bash 复制代码

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
  3.x (Preview)

5、选择路由模式（选择Router时）

yaml 复制代码

? 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时）

yaml 复制代码

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + 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时）

yaml 复制代码

? 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时）

yaml 复制代码

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In 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、是否保存预设

yaml 复制代码

? Save this as a preset for future projects? (y/N)

|-----------------------------------|
| 保存自己是预设就起个名字，后续可以直接指定该名称直接创建Vue项目 |

10、最后预览

yaml 复制代码

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