2、开发环境搭建：Node.js与npm安装、Vue CLI脚手架搭建、VS Code编辑器配置与常用插件

好，咱们正式开始动手了。这一章我带你搭好开发环境。你别小看这一步，我在项目里见过太多人因为环境没配好，折腾一整天连个Hello World都跑不起来。说白了，工欲善其事，必先利其器。咱们把地基打牢，后面写代码才顺手。

2.1 Node.js 与 npm 安装

Vue项目跑起来，底层依赖Node.js。你可以把Node.js理解成JavaScript的“运行引擎”。而npm呢，就是它的“应用商店”——装包、卸包、管理依赖全靠它。

2.1.1 下载与安装

我个人习惯去官网下载长期支持版（LTS）。别追新，稳定第一。

1. 打开 https://nodejs.org，点击那个绿色的“LTS”按钮。
2. 下载完成后，双击安装包，一路“Next”就行。
3. 安装完打开终端（Windows用cmd或PowerShell，Mac用终端），输入：

node -v
npm -v

如果能看到版本号，比如 v18.16.0 和 9.5.1，那就成了。

2.1.2 npm 镜像配置

你想想看，npm默认的源在国外，下载速度慢得让人抓狂。我建议你换成淘宝镜像：

npm config set registry https://registry.npmmirror.com

验证一下：

npm config get registry

看到淘宝的地址就对了。嗯，这里要注意，有些公司内部有私有镜像，那就按公司要求来。

2.2 Vue CLI 脚手架搭建

脚手架是什么？说白了就是一个项目模板。你不需要从零开始写webpack配置、不用手动创建目录结构。一条命令，一个完整可运行的项目就出来了。

2.2.1 安装 Vue CLI

打开终端，输入：

npm install -g @vue/cli

这个 -g 表示全局安装，装一次，整个电脑都能用。安装完成后，验证一下：

vue --version

看到类似 @vue/cli 5.0.8 的版本号，就说明装好了。

2.2.2 创建第一个项目

找个干净的目录，比如 D:\RMC_Projects，然后运行：

vue create rmc-dashboard

这时候会出现一个交互式菜单，让你选预设。我建议选 Manually select features，然后勾上：

• Babel
• Router
• Vuex
• CSS Pre-processors（选Less或Sass都行）

其他选项按默认来。等它跑完，你会看到这样的提示：

🎉  Successfully created project rmc-dashboard.
👉  Get started with the following commands:

 $ cd rmc-dashboard
 $ npm run serve

按提示操作，浏览器打开 http://localhost:8080，看到Vue的欢迎页面，恭喜你，环境搭好了！

2.3 VS Code 编辑器配置与常用插件

编辑器我推荐VS Code，免费、轻量、插件生态好。咱们做RMC界面开发，有几个插件是必备的。

2.3.1 安装VS Code

去 https://code.visualstudio.com 下载安装包，安装时记得勾上“添加到右键菜单”和“支持中文”。

2.3.2 必备插件清单

安装方法：点击左侧扩展图标（或按 Ctrl+Shift+X），搜索插件名，点安装就行。

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "vetur.format.defaultFormatter.html": "prettier",
  "eslint.validate": ["vue", "javascript"]
}

2.4 知识体系总览

下面这张图，我把本章的核心逻辑画出来了。你一看就明白：Node.js是底层引擎，npm是包管理器，Vue CLI是项目生成器，VS Code是开发工具。四者配合，才能高效开发RMC界面。

2.5 常见问题与避坑

我把自己踩过的坑整理一下，你遇到了直接对照着看：

• npm install 报错： 先检查网络，再检查镜像配置。我曾经因为公司内网没配代理，卡了半小时。
• vue create 卡住不动： 大概率是网络问题。按 Ctrl+C 取消，重新运行，或者换个镜像源。
• VS Code 插件不生效： 检查一下VS Code版本，太旧了可能不支持新插件。我建议每个月更新一次。
• 端口被占用： 如果 npm run serve 提示端口被占，可以改端口：在项目根目录建 .env 文件，写上 PORT=3000。

好了，环境搭好了，下一章咱们就开始写真正的RMC界面代码了。你先把这些工具装好、跑通，后面学起来才顺畅。