VUE2创建项目

原创 2025-04-24 19:42:31 6.4k 阅读 AI写同款

收录于

vue

csdn_HPL

码龄6年墨衍会员 · AI 创作全网分发

171粉丝50篇原创

关注

0到1搭建前端Vue2项目 1.1 打开 cmd 命令提示符进入到存放项目的目录，在命令提示符上使用 “ vue create 项目名” 命令创建项目。1.2 之后可以选择 vue 版本，虽然现在 vue2 已经停更，但是还是值得学习的。1.3 等待初始化 vue 脚手架后，会出现蓝色的两条命令，依次执行它们即可启动 vue。vue脚手架启动成功后会出现蓝色的两个网址，无论是哪个网址都可以打开页面。1.4 浏览器输入网址后界面如下。阅读详情

AI摘要

本文介绍了使用 Vue CLI 创建 Vue 项目的详细步骤。首先要进行环境准备，安装 Node.js 和可选的淘宝镜像；接着全局安装 Vue CLI。创建项目时，需选择预设、功能特性、Vue 版本、路由模式、CSS 预处理器等，还涉及代码检查和格式化配置等，最终完成项目创建与启动。

一、环境准备

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” ）不保存，继续完成项目创建流程

等待加载

这样就表示创建成功
在这里插入图片描述
在按照蓝色文字输入一遍

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

希望对你有帮助！