【Vue】Vue项目常用的多种创建方式（详细）
一、介绍
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/cli3.验证 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-project2.上下键控制选择选项
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 vuecreate-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