2、开发环境搭建：Node.js安装、npm/yarn配置、Vue CLI安装、创建第一个Vue项目
好，咱们正式开始动手了。这一章我带你搭好开发环境。说白了，就是给你的电脑装上「做饭的锅碗瓢盆」。很多新手在这一步就被劝退了，其实没那么可怕。我当年第一次装 Node.js 的时候也折腾了半天，后来发现就是点几下鼠标的事。
2.1 Node.js 安装：一切的基础
Vue 项目依赖 Node.js。你可以把它理解成一个「JavaScript 的运行环境」。没有它，我们的代码就跑不起来。
下载地址： 去官网 nodejs.org 下载。我个人建议你选 LTS 版本（长期支持版）。别追新，稳定最重要。我在项目中吃过追新的亏，某个新特性第二天就废弃了，搞得我重构了一下午。
安装步骤：
- 双击安装包，一路 Next 到底。
- 安装完成后，打开终端（Windows 用 cmd 或 PowerShell，Mac 用终端）。
- 输入
node -v，如果看到版本号，比如v18.16.0，就说明装好了。 - 再输入
npm -v，检查 npm 是否也一并装好了。
小提示： 如果你用的是 Mac，建议用 nvm（Node Version Manager）来管理 Node.js 版本。这样你可以随时切换版本，非常方便。我平时开发就靠它，一个命令搞定版本切换。
2.2 npm / yarn 配置：别让下载卡住你
npm 是 Node.js 自带的包管理器。我们用 Vue 时，会下载很多依赖包。但 npm 默认的源在国外，下载速度很慢。你想想看，一个项目几百个包，等它下载完，黄花菜都凉了。
配置淘宝镜像：
npm config set registry https://registry.npmmirror.com设置完后，你可以验证一下：
npm config get registry如果返回的是上面的淘宝镜像地址，就说明配置成功了。
注意： 有些公司内部有私有 npm 源，如果你在公司开发，记得问一下运维同事，用公司内部的源会更安全、更快。
yarn 呢？ 我个人更喜欢用 yarn。它比 npm 快，而且安装依赖时更稳定。安装 yarn 很简单：
npm install -g yarn然后同样配置镜像：
yarn config set registry https://registry.npmmirror.com嗯，这里要注意：yarn 和 npm 可以共存，你选一个用就行。我建议新手先用 npm，等熟悉了再尝试 yarn。
2.3 Vue CLI 安装：脚手架来了
Vue CLI 是一个脚手架工具。说白了，它帮你自动生成项目结构，不用你手动创建文件夹、配置文件。你只需要一个命令，项目就搭好了。
安装命令：
npm install -g @vue/cli或者用 yarn：
yarn global add @vue/cli安装完成后，检查一下：
vue --version如果看到版本号，比如 @vue/cli 5.0.8，就说明安装成功了。
避坑指南： 我曾经在 Mac 上安装 Vue CLI 时遇到权限问题。如果你也遇到 EACCES 错误，别慌。加上 sudo 再试一次：
sudo npm install -g @vue/cli输入密码后就能装上了。Windows 用户一般不会遇到这个问题。
2.4 创建第一个 Vue 项目：Hello World
环境搭好了，咱们来创建第一个项目。这个过程很激动人心，我第一次看到项目跑起来时，感觉像打开了新世界的大门。
创建项目：
vue create my-first-vue-app然后你会看到一些选项：
| 选项 | 说明 | 建议 |
|---|---|---|
| Default ([Vue 3] babel, eslint) | 默认配置，Vue 3 + Babel + ESLint | 新手选这个就行 |
| Manually select features | 手动选择功能 | 有经验后再尝试 |
我建议新手直接选 Default ([Vue 3] babel, eslint)。按回车，等它下载依赖。这个过程可能需要一两分钟，去倒杯水吧。
启动项目：
cd my-first-vue-app
npm run serve看到终端里出现 Local: http://localhost:8080 时，恭喜你！在浏览器里打开这个地址，你会看到 Vue 的欢迎页面。
小技巧： 如果 8080 端口被占用了，Vue CLI 会自动帮你换一个端口，比如 8081。别担心，这是正常现象。
2.5 项目结构初探：里面都有啥？
项目创建好了，咱们看看里面都有什么。用 VS Code 打开项目文件夹，你会看到这样的结构：
my-first-vue-app/
├── node_modules/ # 依赖包（别手动改这里）
├── public/ # 静态资源
│ └── index.html # 入口 HTML 文件
├── src/ # 源代码（我们主要在这里工作）
│ ├── assets/ # 图片、字体等资源
│ ├── components/ # 组件文件夹
│ ├── App.vue # 根组件
│ └── main.js # 入口 JS 文件
├── package.json # 项目配置文件
└── README.md # 项目说明文档你不需要记住所有文件。现阶段你只需要知道：src 文件夹是我们写代码的地方。其他文件 Vue CLI 已经帮你配置好了。
重点： package.json 文件记录了项目的依赖和脚本。比如 npm run serve 这个命令，就是在 package.json 的 scripts 字段里定义的。以后你添加新依赖，也会自动更新到这个文件里。
2.6 常见问题与解决
搭建环境时，你可能会遇到一些问题。我把常见的列出来：
- 安装卡住不动： 检查网络，或者换成淘宝镜像再试。
- vue 命令找不到： 可能是全局安装路径没加到环境变量里。重新安装一次，或者用 npx 运行：
npx vue create my-app。 - 端口被占用： 关掉占用端口的程序，或者让 Vue CLI 自动换端口。
注意： 如果你用的是 Windows，建议用 PowerShell 或 Git Bash，别用自带的 cmd。cmd 有时候会出一些奇怪的问题。我刚开始用 Windows 开发时，被 cmd 坑过好几次。
好了，环境搭好了，项目也跑起来了。下一章咱们开始写真正的 Vue 代码。你准备好了吗？