前言
本文手把手带你完成 Vue 3 开发环境的搭建，使用官方推荐的 Vite 构建工具，全程只需几条命令即可看到项目跑起来。
一、安装 Node.js
Vue 3 的开发依赖 Node.js 环境（提供包管理器 npm 和运行时的 JavaScript 引擎）。
1. 检查是否已安装
打开终端（命令提示符 / PowerShell / Terminal），输入：
node -v
npm -v
如果能看到版本号（例如 v18.17.0 / 9.6.7），且 Node 版本 ≥ 16，可以直接跳到第二步。
2. 安装或升级 Node.js
推荐方式：
-
官方安装包：访问 nodejs.org 下载 LTS（长期支持版） ，按提示安装即可。安装程序会自动配好环境变量。
-
使用版本管理工具（可选） ：
-
Windows：
nvm-windows -
Mac/Linux：
nvm
这样可以灵活切换 Node 版本，命令示例：
nvm install 18 nvm use 18 -
安装完成后重新打开终端，再次运行 node -v 确认。
二、配置 npm 镜像（中国大陆用户建议）
为了加速依赖包的下载，可将 npm 的注册表镜像设为国内源：
npm config set registry https://registry.npmmirror.com
检查是否生效：
npm config get registry
看到 https://registry.npmmirror.com 即成功。
三、创建 Vue 3 项目（使用 create-vue 脚手架）
Vue 官方提供了基于 Vite 的项目脚手架 create-vue，它会自动生成最佳实践的项目结构。
在终端中进入你要存放项目的目录，然后运行：
npm create vue@latest
这条命令会临时下载
create-vue并引导你完成项目配置，不需要提前全局安装任何东西。
交互式选项说明
执行后会出现一系列 Yes/No 选择，按需求回答（初次学习可直接全部默认或参考下表）：
| 选项 | 含义 | 建议 |
|---|---|---|
| Project name | 项目名称 | 输入小写英文名，如 my-vue-app |
| TypeScript | 是否使用 TypeScript | 入门可选 No，实际项目推荐 Yes |
| JSX Support | 是否支持 JSX | 默认 No |
| Vue Router | 单页应用路由 | 多页面时按需选 Yes |
| Pinia | 状态管理库 | 按需选择 |
| Vitest | 单元测试工具 | 按需选择 |
| End-to-End Testing | E2E 测试 | 按需选择 |
| ESLint / Prettier | 代码规范与格式化 | 建议 Yes，保证代码风格 |
选择完毕后，脚手架会自动创建项目文件夹。
进入项目并安装依赖
cd 你的项目名
npm install
npm install 会根据 package.json 安装所有必需的依赖包。
四、运行项目
安装成功后，启动开发服务器：
npm run dev
终端会打印本地访问地址，通常是：
VITE v4.x.x ready in xxx ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
在浏览器中打开 http://localhost:5173，你会看到 Vue 的欢迎页面（带旋转的 Vite + Vue 标志）。
🎉 恭喜，项目运行成功！
五、项目目录结构速览
my-vue-app/
├── index.html # 入口 HTML 文件
├── package.json # 项目依赖与脚本配置
├── vite.config.js # Vite 构建配置文件
├── public/ # 不会被打包的静态资源
└── src/
├── main.js # 应用入口，挂载 Vue 实例
├── App.vue # 根组件
├── components/ # 可复用组件
└── assets/ # 需要构建处理的资源（CSS、图片等）
如果你想修改页面内容，打开 src/App.vue，编辑 <template> 中的 Hello World 文本，保存后浏览器会自动热更新。
六、常见问题及解决
Q1：npm create vue@latest 报错或卡顿
- 检查 Node 版本是否 ≥ 16（
node -v）。 - 检查网络与镜像设置（使用国内镜像）。
- 尝试清除 npm 缓存：
npm cache clean --force。
Q2：端口 5173 被占用
修改端口或指定新端口：
npm run dev -- --port 3000
或者关闭占用端口的程序。
Q3：浏览器打开后页面空白
- 按 F12 打开控制台，查看报错信息。
- 确认
npm install完全成功，没有模块缺失。 - 检查
vite.config.js配置是否正确（一般默认无需改动）。
Q4：想打包部署到服务器
运行 npm run build，会在项目根目录生成 dist 文件夹，里面就是可直接部署的静态文件。
七、扩展：快速体验（不想手动安装）
你也可以在线直接体验 Vue 3 + Vite，无需本地安装：
- 打开 StackBlitz 一键启动一个 Vue + Vite 模板。
现在你已经掌握了 Vue 3 从环境安装到项目运行的全流程。编辑 src 目录下的组件，开始你的 Vue 3 之旅吧！
