Vue CLI脚手架自定义创建项目详细过程

)

1、下载vue CLI脚手架

如果已经下载和配置好了node.js,那么就可以使用Vue CLI脚手架来创建vue项目。

1、以管理员身份运行终端

搜索cmd

以管理员身份运行

直接使用以下命令进行安装

npm install -g @vue/cli

2、创建项目

1、新建一个文件夹，来存放vue项目

然后进入我们新建的文件夹路径，例如：E:\演示

3、直接使用以下命令，进行项目创建

vue create 项目名称

回车，进行选择

回车进行下一轮选择，这里可以根据自己的需要进行选择，
使用空格键进行选中和取消选中

再回车，根据自己的需要选择创建vue2还是vue3

以下的选择也可以根据自己的需要进行选择
1、Use history mode for router?

2、Pick a CSS pre-processor

3、 Pick a linter / formatter config:

这些是针对JavaScript代码风格和质量的不同配置方式:

ESLint with error prevention only（仅错误预防）：在此配置中，ESLint被配置为只检查并预防JavaScript代码中的错误。它可以帮助你捕捉到一些常见的错误，例如变量未声明、使用了未定义的变量等。此配置通常不会强制执行具体的代码风格规范。

ESLint + Airbnb config：Airbnb是一个知名的房屋分享平台，其JavaScript代码风格指南十分流行。ESLint与Airbnb配置相结合，可以强制执行Airbnb规定的代码风格和最佳实践。这种配置非常严格，并会检查和修复一系列代码样式问题、错误以及潜在的问题。

ESLint + Standard config：Standard是另一个广泛使用的JavaScript代码风格指南和规范。ESLint与Standard配置相结合，会对代码进行检查并强制执行Standard规范的代码风格。这种配置相对于Airbnb来说较宽松，但仍然包含了许多常见的最佳实践和约定。

ESLint + Prettier：Prettier是一个自动化代码格式化工具，它可以统一项目中的代码样式，使代码看起来更整洁。ESLint结合Prettier可以在代码编写过程中自动格式化代码，并确保代码符合一致的样式规范。

4、 Pick additional lint features:

"Lint on save"和"Lint and fix on commit"是在代码开发过程中运行ESLint进行静态代码分析的两种不同方式。

1. Lint on save（保存时检测）：在这种配置下，每当你保存代码文件时，ESLint会自动运行并对代码进行检查。如果存在任何语法错误、代码风格问题或潜在的问题，ESLint会在保存后给出相应的警告或错误提示。这种方式可以帮助你及时发现和修复代码中的问题，并保持代码的质量和一致性。

2. Lint and fix on commit（提交前检测并修复）：在这种配置下，ESLint会在你提交代码之前自动运行，并尝试自动修复一些常见的代码风格问题。如果代码中存在无法自动修复的问题，ESLint会给出相应的警告或错误提示。这种方式可以确保你提交的代码符合预定义的代码风格规范，并减少代码仓库中的不一致性。

这两种方式各有优势。"Lint on save"适用于快速发现和解决代码中的问题，提高开发效率。"Lint and fix on commit"则更加彻底，并可以强制执行代码的一致性，确保代码符合团队或项目的标准。具体选择哪种方式取决于你的项目需求、团队约定以及个人偏好。有些团队甚至可以同时使用这两种方式，以确保代码质量和项目的可维护性。
5、Where do you prefer placing config for Babel, ESLint, etc.?

"dedicated config files"和"package.json"是两种不同的配置方式，用于存储和管理ESLint的配置信息。

1. Dedicated config files（专用配置文件）：这种方式是将ESLint的配置信息单独存放在一个或多个专用的配置文件中。常见的专用配置文件包括.eslintrc.js、.eslintrc.json、.eslintrc.yaml等。你可以根据项目的需要创建并编辑这些文件，然后在其中指定ESLint的规则、插件和其他配置选项。这种方式适用于项目需要有独立的、自定义的ESLint配置，并且希望将配置与其他项目文件分离的情况。

2. package.json：package.json是一个用于描述和管理Node.js项目的配置文件。除了存放项目的依赖信息之外，它还可以包含其他配置字段。在package.json文件中，你可以添加名为eslintConfig的字段，并在其中定义ESLint的配置信息。这种方式适用于简单的项目或者对ESLint配置需求较少的情况，可以将ESLint配置与项目的其他配置信息集中在一起，方便管理。

使用哪种方式取决于项目的复杂性和组织风格的偏好。如果你的项目比较大或仅需要特定的ESLint配置，使用专用配置文件可能更灵活和可维护。而对于小型项目或者准备在package.json中集中管理所有配置信息的情况，将ESLint配置放在package.json中会更便捷。

6、Save this as a preset for future projects?

创建成功

3、运行

先使用以下命令进入创建好的项目

cd 项目名称

再使用运行命令

npm run serve