VUE2创建项目

一、环境准备

1.安装 Node.js：Vue 项目依赖 Node.js 的运行环境及包管理工具 npm，需先安装 Node.js。前往https://nodejs.org/en/ 下载对应系统版本安装包，安装完成后，打开命令行窗口（Windows 下按 Win + R，输入 cmd 回车；Mac 下打开 “终端”），输入node -v回车，能显示版本号则安装成功，npm 会随 Node.js 一同安装，可输入npm -v检查 npm 版本。
2.安装淘宝镜像（可选）：国内使用 npm 官方源下载速度可能较慢，可安装淘宝镜像提高速度。在命令行输入npm install -g cnpm --registry=https://registry.npm.taobao.org 安装淘宝镜像，之后可用cnpm代替npm ，输入cnpm -v可检查是否安装成功。

二、安装 Vue CLI

在命令行输入npm install -g @vue/cli （推荐使用cnpm install -g @vue/cli 以加快速度）全局安装 Vue CLI，安装完成后输入vue -V（V 大写），能显示版本号即安装成功。

命令行创建（vue create 方式）
进入创建目录：通过命令行进入想要创建项目的文件夹

vue create 项目名

Vue CLI 创建 Vue 项目时选择预设（preset）的界面 。

1.Default ([Vue 3] babel, eslint)：默认预设，基于 Vue 3，集成了 Babel（用于将 ES6+ 代码转换为浏览器可识别的 ES5 代码）和 ESLint（代码风格检查工具） 。 2.Default ([Vue 2] babel, eslint)：基于 Vue 2，同样集成 Babel 和 ESLint 。 3.Manually select features`：手动选择特性。
这里选最后一个

Vue CLI 创建项目时手动选择功能特性的界面

1.Babel：用于将 ECMAScript 2015+（ES6 及更高版本）的代码转换为向后兼容的 JavaScript 代码，使新语法能在旧版浏览器中正常运行，是现代前端开发必备工具。

2.Progressive Web App (PWA) Support：渐进式网页应用支持，可使网页应用具备类似原生应用的特性，如离线访问、添加到主屏幕、推送通知等，提升用户体验和应用的可访问性。

3.Router：Vue Router 是 Vue.js 官方的路由管理器，用于实现单页应用（SPA）中不同页面视图的切换和管理，通过定义路由规则来映射 URL 与组件的关系。

4.CSS Pre - processors：CSS 预处理器，如 Less、Sass 等，允许使用变量、混合、函数等编程式语法来编写 CSS，提高样式代码的可维护性和复用性。

5.Vuex：Vue.js 应用程序的状态管理模式 + 库，用于集中管理 Vue 应用的共享状态，在多个组件间高效共享和管理数据，方便状态的更新和调试。
Linter / Formatter：代码检查和格式化工具，如 ESLint 结合 Prettier 等，可规范代码风格，发现代码中的潜在问题，保证团队代码风格统一，提升代码质量。

6.Unit Testing：单元测试，用于对项目中的单个函数、组件等最小可测试单元进行测试，确保其功能正确性，常见测试框架有 Jest、Mocha 等结合 Vue Test Utils。

7.E2E Testing：端到端测试，模拟用户实际使用场景，从应用的入口开始测试，遍历多个页面和功能流程，确保应用在真实环境下能正常工作，常用工具如 Cypress、Nightwatch 等。

空格选择，

Vue CLI 创建项目过程中，选择 Vue.js 版本的界面。

3.x：代表 Vue 3 版本。Vue 3 相比 Vue 2 在性能上有较大提升，比如优化了虚拟 DOM 的算法，提高了渲染速度；采用了 Composition API，让代码逻辑的复用和组织更加灵活；并且在响应式原理等方面也有改进，适合开发新的、对性能和代码组织灵活性有较高要求的项目。

2.x：代表 Vue 2 版本。Vue 2 是较为成熟稳定的版本，生态丰富，有大量的第三方插件和教程可供参考，在一些对兼容性要求较高，或者已经基于 Vue 2 有一定代码积累的项目中仍然广泛使用。

根据需求选择

Vue Router 中，有两种常见的路由模式：hash 模式和 history 模式。

1.hash 模式：URL 中会带有 “#” 符号，如http://example.com/#/home ，“#” 后面的部分是路由的路径，它的改变不会引起页面的重新加载，浏览器会根据 hash 值的变化触发hashchange事件，Vue Router 利用这个特性实现路由跳转。

2.history模式：URL 看起来更简洁美观，如http://example.com/home ，它利用 HTML5 的history.pushState()和history.replaceState()方法来改变 URL，不会重新加载页面。但这种模式在生产环境下，服务器需要正确配置，当用户直接访问如http://example.com/home这样的页面时，服务器要能返回正确的 index.html 文件（即设置好 index fallback ），否则会出现 404 错误。

根据需求选择

Vue CLI 创建项目时，让你选择 CSS 预处理器的界面。

Sass/SCSS (with dart-sass) ：Sass 是一种 CSS 预处理器，SCSS 是 Sass 的一种语法，更接近原生 CSS 。dart-sass是 Sass 的一种实现方式，功能强大，支持变量、嵌套、混合（mixin）、函数等特性 ，能提高样式代码的可维护性和复用性，是目前前端开发中广泛使用的预处理器之一。

Less：也是一款流行的 CSS 预处理器，和 Sass 类似，提供变量、混合、嵌套规则等功能，语法简洁，在大型项目中使用可以有效组织和管理 CSS 代码，并且与许多前端框架和构建工具都有良好的集成。

Stylus：同样是 CSS 预处理器，它具有简洁的语法，支持函数、变量、混合等特性，同时还提供了强大的缩进语法，代码风格较为灵活，但在社区活跃度和使用广泛程度上相比 Sass 和 Less 略低。

Vue CLI创建项目时，选择代码检查和格式化配置（Linter / formatter config）的界面。

• ESLint with error prevention only：仅使用ESLint进行错误预防检查。ESLint是一个广泛使用的JavaScript代码检查工具，此配置只关注代码中会导致错误的问题，对代码风格的限制相对宽松，适合希望快速开发，不太强调严格代码风格统一，仅保证代码基本正确性的场景。
• ESLint + Airbnb config：ESLint结合Airbnb的代码风格配置。Airbnb有一套成熟且严格的JavaScript代码风格规范，涵盖了代码格式、命名规则、语法使用等多方面。采用此配置，能使项目代码符合Airbnb的高质量风格标准，便于团队协作和代码维护，但规则相对严格，可能在开发过程中出现较多提示。
• ESLint + Standard config：ESLint搭配Standard代码风格配置。Standard是一种简洁、易读的代码风格，它有一套预设的规则，不允许分号（除非是在防止自动插入分号错误的场景），强制使用特定的缩进、空格等格式，能快速统一团队代码风格，减少开发者在代码格式上的纠结。
• ESLint + Prettier：将ESLint与Prettier结合。Prettier是一款代码格式化工具，专注于代码格式的自动格式化，能按照固定规则自动调整代码的缩进、换行、空格等。与ESLint结合后，既能利用ESLint进行代码逻辑和潜在问题检查，又能通过Prettier保证代码格式的一致性和美观性，是很多项目常用的组合。

可依据团队习惯、项目对代码规范的要求，使用方向键选择对应选项，按回车键继续项目创建流程。

Vue CLI 创建项目时，选择额外代码检查特性的界面

Lint on save：开启此选项后，在保存文件时，ESLint 等代码检查工具会自动运行，检查代码是否符合设定的规则。能及时发现代码中的问题，便于开发者随时修正，保证代码质量处于可控状态 ，有助于养成良好的编码习惯。
Lint and fix on commit (requires Git) ：该选项要求项目使用 Git 版本控制。开启后，在执行git commit操作时，代码检查工具不仅会检查代码，还会尝试自动修复一些可修复的格式和语法问题。这能确保提交到代码仓库的代码都符合规范，减少后续代码审查时因格式问题产生的分歧 ，但可能会因为自动修复导致一些意外的代码变更，需要开发者留意。

根据项目需求和开发习惯，按提示使用空格键勾选选项，按a键全选，按i键反选，按回车键继续项目创建流程。

Vue CLI创建项目时，询问配置文件放置方式的界面

• In dedicated config files：将Babel、ESLint等配置放在独立的配置文件中，例如.babelrc、.eslintrc 等。这种方式使配置文件更加清晰直观，便于单独查看和修改各项配置，对于大型项目或配置较为复杂的情况，更利于管理和维护，也方便团队成员了解和调整具体配置。
• In package.json：把相关配置整合到package.json文件中，package.json是项目的包描述文件，管理项目的依赖、脚本等信息。将配置放在这里，项目文件结构相对简洁，所有项目相关信息集中在一个文件中，但随着配置增多，package.json文件可能会变得冗长复杂，不利于查找和修改特定配置。

可根据项目规模、个人偏好和团队协作需求，使用方向键选择，按回车键继续项目创建流程。

Vue CLI 创建项目时，询问是否将当前配置保存为预设以便未来项目使用的界面。
根据自身需求，输入 “Y”（或 “y”）保存，或直接按回车键（默认 “N” ）不保存，继续完成项目创建流程

等待加载

这样就表示创建成功

在按照蓝色文字输入一遍

这样的界面就代表启动成功

希望对你有帮助！