一、介绍

Vue是一套渐进式 JavaScript 框架，核心目标是通过尽可能简单的 API 实现响应式的数据绑定和组合式的视图组件。它的核心特性：响应式系统，组件化开发，轻量且高效，使其成为前端开发的主流选择。下面将详细介绍Vue项目的多种创建方式：

二、Vue项目创建方式

提示：创建时，推荐将目标目录先切换到桌面 or 你存储前端项目的目录，这样无需再移动且方便管理和查找！(在你的目标文件夹目录上直接输入cmd敲回车，即可弹出对应路劲的窗口（或者你cmd里用cd命令切换也可以）

输入cmd覆盖当前路径：

回车键进入当前文件目录的终端界面，开始创建：

方式1：使用 Vue CLI（兼容Vue2和Vue3）

1.安装 Node.js （推荐先下载nvm使用nvm进行node版本管理，然后通过nvm获取node.js）

2.安装 Vue CLI（支持可视化界面）：

npm install -g @vue/cli
# 或使用 yarn
yarn global add @vue/cli

3.验证 Vue CLI版本：

（安装好Vue CLI后即可开始创建vue2或vue3项目）

 a.可视化仪表盘启动

输入下面命令启动 Vue CLI 可视化仪表盘，进行vue项目的创建：

vue ui

然后，按以下步骤操作：

1.在上方导航栏选择 "创建"，选择项目保存路径，点击 "在此创建新项目"

2.输入项目名称，选择需要使用的包管理器，通常使用npm，点击 "下一步"

3.选择 "手动" 配置项目

4.勾选所需特性（至少勾选 Babel），点击 "下一步"，通常选择路由Router，其他看需要选择

5.在 "Vue 版本" 选项中选择版本，选择代码格式化配置

下面这是代码检查，代码格式化，通常自己开发只需要勾选第一个only：

选项	作用	适用场景
ESLint with error prevention only	只做基础错误检查（如语法错误、未定义变量），不强制代码风格	新手、不想被格式规则约束、只想避免低级错误的场景
ESLint + Airbnb config	业内最严格的代码风格规范（Airbnb 团队标准），规则非常细致	大型团队、追求极致代码规范、开源项目
ESLint + Standard config	宽松一些的社区标准，无分号、2 空格缩进等	喜欢简洁风格、不想纠结格式细节的开发者
ESLint + Prettier	ESLint 负责代码错误检查，Prettier 负责自动格式化（如缩进、引号、换行）	最推荐的现代前端组合，兼顾代码质量与自动格式化

6.点击 "创建项目"，等待创建完成

预设看自己的选择，想不想保存

创建中：

创建完成！

 b.命令行启动

1.输入下方指令创建

vue create my-vue2-project

2.上下键控制选择选项

3.回车选择手动配置

上下键移动，空格选择（注意空格是选择哦），回车确定

4.选择要创建的vue版本 2或3

5.选择是否使用 history 模式 作为路由

模式	地址栏表现	优点	缺点
Hash 模式（选 n）	http://xxx.com/#/home	无需服务器配置，直接可用，兼容性好	URL 里有 #，不够美观，对 SEO 不太友好
History 模式（选 Y）	http://xxx.com/home	URL 更干净美观，对 SEO 更友好	生产环境部署时，必须配置服务器（Nginx/Apache 等）做 fallback，否则刷新页面会 404

• 新手 / 本地开发 / 快速演示：选 n（Hash 模式），开箱即用，不用管服务器配置，开发时更省心。
• 正式项目 / 追求 URL 美观 / 需要 SEO：选 Y（History 模式），但要记住：上线时必须让后端 / 运维配置服务器的 fallback 规则，把所有路由请求都指向 index.html。
• 如果你现在只是学习或本地调试：直接输入 n 回车即可。
• 如果你已经规划好生产环境部署，且能配置服务器：输入 Y 回车。

6、选择代码检查格式化配置

选项	作用	适用场景
ESLint with error prevention only	只做基础错误检查（如语法错误、未定义变量），不强制代码风格	新手、不想被格式规则约束、只想避免低级错误的场景
ESLint + Airbnb config	业内最严格的代码风格规范（Airbnb 团队标准），规则非常细致	大型团队、追求极致代码规范、开源项目
ESLint + Standard config	宽松一些的社区标准，无分号、2 空格缩进等	喜欢简洁风格、不想纠结格式细节的开发者
ESLint + Prettier	ESLint 负责代码错误检查，Prettier 负责自动格式化（如缩进、引号、换行）	最推荐的现代前端组合，兼顾代码质量与自动格式化

7.选择代码检查时间和方式

• Lint on save 保存文件时自动执行 ESLint 检查，在编辑器里实时提示代码问题，方便开发时快速发现错误。
• Lint and fix on commit 提交代码到 Git 前，自动执行 ESLint 检查并修复可自动修复的格式问题，保证提交代码的规范性。

8.选择配置文件存放位置

• In dedicated config files（推荐）将 Babel、ESLint 等工具的配置，分别存放在独立的文件中（如 .babelrc、.eslintrc.js）。
• In package.json将所有配置都写在 package.json 文件里，集中管理。

---

推荐选择

• 优先选 In dedicated config files：
  • 配置文件职责单一，便于维护和复用
  • 不同工具的配置互不干扰，可读性更强
  • 符合前端工程化的最佳实践，适合长期维护的项目
• 仅在小型 Demo / 临时项目 可选 In package.json：
  • 项目结构更简洁，少创建几个文件
  • 但配置混杂在一起，后期维护麻烦，不推荐正式项目使用

9.是否保存当前配置为预设

• y：将你刚才选择的所有配置（Vue 版本、路由模式、Linter 规则等）保存为一个自定义预设，下次创建项目时可以直接选择，无需重复配置。
• N（默认，你已输入 n）：不保存当前配置，本次创建完成后，下次创建项目需要重新手动选择所有选项。

10. 项目创建成功

方式2：使用 Vite（Vue3项目）

前提：Node.js ≥ 14.18.0 或 ≥ 16.0.0

1.执行下面的其中一条命令，创建 Vue3 项目：

一般不写--template vue，手动配置即可

npm create vite@latest 项目名称


# npm 6.x
npm create vite@latest 项目名称 --template vue

# npm 7+
npm create vite@latest 项目名称 -- --template vue

# yarn
yarn create vite 项目名称 --template vue

# pnpm
pnpm create vite 项目名称 --template vue

--template vue 是指定创建项目时使用的模板类型，

这里表示使用 Vue 官方提供的基础 Vue 模板。

具体来说：

• template 是 create vite 命令的参数，用于指定项目模板
• vue 是模板名称，代表这是一个基于 Vue 的基础项目模板

使用这个模板创建的项目会包含：

• 最基础的 Vue 项目结构
• 已配置好的 Vue 单文件组件 (SFC) 支持
• 与 Vite 集成的开发环境配置
• 基本的构建和开发命令

除了 vue 模板，Vite 还提供其他相关模板：

• vue-ts：带 TypeScript 支持的 Vue 模板
• vue-jsx：带 JSX 支持的 Vue 模板
• vue-ts-jsx：带 TypeScript 和 JSX 支持的 Vue 模板

选择不同的模板会自动配置相应的开发环境，省去手动配置的步骤。

这里我没有选择模板：

2.然后上下键移动选择Vue

接下来按照提示操作即可，与第一种方式类似

方式3：使用 create-vue（官方推荐）

创建项目：

# npm
npm create vue@latest

# yarn
yarn create vue

# pnpm
pnpm create vue

• create-vue@3.18.0 要求 Node.js 版本至少为 ^20.19.0 或 >=22.12.0

按交互提示配置：
输入项目名称
选择是否添加 TypeScript、JSX 支持
选择是否安装 Vue Router、Pinia 等工具

最终效果

拖进VS Code里:

--> 按Ctrl+` 调出终端控制台，输入npm install 安装所需依赖

然后通过NPM脚本 点击运行 或者 npm run dev

版本查看方式

查看 Node 版本：node -v
查看 npm 版本：npm -v
查看 Vue CLI 版本：vue --version