Vue 3 安装与环境搭建：从 Node.js 开始
Vue 3 安装与环境搭建：从 Node.js 开始
学 Vue 第一步不是打开官网，是先把环境搞定。很多新手卡在这一步，我当年也是。所以这篇我写得细一点，把我踩过的坑都告诉你。
Node.js 是什么，为什么需要它
简单说，Node.js 是让 JavaScript 能在浏览器外面运行的工具。
Vue 3 的开发服务器、构建工具都是基于 Node.js 的，所以你必须装。没有 Node.js，Vite 跑不起来，Vue 项目没法开发。
装 Node.js 只装一个东西就行，不需要装什么"服务器版"或者"完整版"。
安装 Node.js
Windows 用户
去 Node.js 官网，下载 LTS 版本（长期支持版，更稳定）。
注意别下错了：页面上两个大按钮，"Node.js 20.x LTS" 和 "Node.js 22.x Current"。新手选 LTS。
下载完是一个 .msi 文件，双击安装，一路点"Next"就行。
安装完，打开命令行（Win + R，输入 cmd，回车），输入：
node -v
npm -v
看到类似这样的输出就说明装好了：
v20.11.0
10.2.4
版本号可能不一样，没关系，能显示就行。
Mac 用户
推荐用 Homebrew 安装：
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
brew install node
或者直接去官网下 .pkg 安装包也行。
npm 是什么
npm 是 Node.js 自带的包管理器。你可以理解成"应用商店"，Vue 和各种工具都是通过 npm 安装的。
装好 Node.js 之后，npm 就已经可以用了。
你可以顺手改一下 npm 的源，国内用淘宝镜像会快很多：
npm config set registry https://registry.npmmirror.com
安装 pnpm（可选但推荐）
pnpm 是另一个包管理器，比 npm 更快、更省空间。我现在项目里都用它。
npm install -g pnpm
装完验证一下：
pnpm -v
后续所有 npm install 都可以换成 pnpm install。
创建你的第一个 Vue 项目
这是关键一步。
在命令行里，进入你想放项目的目录（比如我的是 D:\projects）：
cd D:\projects
然后用 Vite 创建项目：
pnpm create vite vue3-getting-started --template vue-ts
解释一下这行命令：
pnpm create vite：用 Vite 这个工具创建项目vue3-getting-started：项目名，你可以改成自己喜欢的--template vue-ts：使用 Vue 3 + TypeScript 模板
回车之后会问你要不要安装依赖，输入 y 等待安装完成。
如果你用的是 npm 而不是 pnpm，把 pnpm 换成 npm 就行。
项目目录结构
创建完成后，进入项目目录：
cd vue3-getting-started
看一下目录结构：
vue3-getting-started/
├── public/ # 静态资源，直接复制到输出目录
├── src/ # 源代码，你的代码主要写这里
│ ├── assets/ # 样式、图片等资源
│ ├── components/ # 组件目录
│ ├── App.vue # 根组件
│ └── main.ts # 入口文件
├── index.html # HTML 入口
├── package.json # 项目配置和依赖
├── tsconfig.json # TypeScript 配置
└── vite.config.ts # Vite 配置
刚创建完，src/components/ 里应该有一个 HelloWorld.vue，这是 Vite 给你创建的示例组件。
让项目跑起来
在项目目录下，运行：
pnpm dev
几秒钟后，你应该看到类似这样的输出：
VITE v5.x.x ready in 1234 ms
➜ Local: http://localhost:5173/
➜ Network: http://192.168.x.x:5173/
打开浏览器，访问 http://localhost:5173/，你应该能看到一个 Vue 的欢迎页。
恭喜你，Vue 项目跑起来了。
按 Ctrl + C 可以停止开发服务器。
IDE 配置：让代码提示更智能
我用的是 VS Code，推荐你也用它。
装好 VS Code 之后，再装这几个扩展：
| 扩展名 | 作用 |
|---|---|
| Vue - Official | Vue 官方扩展，提供语法高亮和类型支持 |
| TypeScript Vue Plugin | 让 TypeScript 认识 .vue 文件 |
| ESLint | 代码检查，发现潜在问题 |
| Prettier | 代码格式化，统一代码风格 |
在 VS Code 扩展市场里搜索安装就行。
装完之后，打开项目目录，VS Code 会提示你安装项目依赖，点一下"Install"。
常见问题
问题一：pnpm create 报权限错误
Windows 用户用管理员权限打开命令行，或者把命令行换到非系统盘目录（比如 D:\projects）再试。
问题二：pnpm dev 之后浏览器打不开
检查命令行有没有报错信息。常见的是端口被占用，试试：
pnpm dev --port 3000
问题三：创建项目时卡住了
检查网络，能访问 npm 就行。如果网速慢，用淘宝镜像：
pnpm config set registry https://registry.npmmirror.com
然后重新创建项目。
下一步
环境搞定了，接下来我们看一下项目里每个文件是干什么的，下一篇《Vue 3 项目结构详解：每个文件是干什么的》。
如果你迫不及待想看点东西，可以打开 src/App.vue，改几个字，保存，浏览器会自动刷新。
这就是热更新——Vue 开发最爽的地方之一。
有问题欢迎留言。