刚开始做前端的人，命令行里冒出一堆名词：Node、npm、Vite、package.json、node_modules/......最容易懵的不是"不会用"，而是：它们之间到底谁管谁？
这篇不讲具体的应用，只把四者的关系理清楚。读完你应该能回答这几个问题：
- 为什么装 React 要先装 Node？
- 为什么是
npm install，而不是vite install？ npm run dev到底是谁在跑？
一、一切的起点：浏览器其实很"挑食"
浏览器只认识三样东西：HTML、CSS、JavaScript。但今天写网页早就不是直接写这三样了。
你会看到大家用：
- TypeScript（带类型的 JS）
- JSX / TSX（HTML 写在 JS 里）
- SCSS / Less（带变量和嵌套的 CSS）
- import 一堆第三方库（React、antd、lodash......）
浏览器完全看不懂 这些。比如你直接打开一个 .tsx 文件，浏览器只会报错。所以中间需要一个"翻译官"，把这些现代写法编译成浏览器能跑的 HTML/CSS/JS 。这个翻译官就是打包工具。
二、Vite：打包工具代表
历史上的打包工具有 webpack、Parcel、Rollup、esbuild、Vite......名字可以先不记，重点是它们干的是同一件事：把我们写的现代代码（TS/JSX/SCSS/import）→ 编译/合并/压缩 → 变成浏览器能跑的东西。
这张图是整个系列的问题起点：浏览器原生只认 HTML/CSS/JS（右栏），但你写的早就不是这些了（左栏），所以中间永远需要一台"翻译官"。本系列接下来要讨论的所有命令、配置、报错，本质都是在围着这台翻译官转。
Vite 是目前最流行的一个，特点是启动快、热更新快、配置简单。本系列默认用 Vite，但概念在别的工具里也通用。
除此之外，Vite 还顺便提供了一个开发服务器 ，也就是我们常见的：http://localhost:5173/。当我们运行npm run dev，实际发生的是：Vite启动服务器，开发服务器一边监视你的源码，一边把编译好的代码喂给浏览器，你改一行保存，浏览器立刻看到效果，这其实就是"热更新"的本质。
三、Vite 自己跑在哪里？答：Node.js 上
Vite 是一个 JavaScript 程序。可问题来了：JavaScript 不是只能在浏览器里跑的吗？
Node.js 就是为了让 JS 跳出浏览器，能在我们的电脑上当普通命令行程序跑。可以把 Node 想成"JavaScript 的运行环境"，类似 Python 运行 .py 文件。Node就是让JavaScript 可以在命令行运行，而不是只能在浏览器里。
所以整个链路如下：
你的代码 → Vite （打包工具，是个 JS 程序）→ 跑在 Node.js 上 → 输出成浏览器能看懂的 HTML/CSS/JS
由此可见，如果电脑上没装 Node，前端工具一个都跑不起来。因此。前端开发第一步永远是"先装 Node.js"。
四、 npm：Node 自带的"包管家"
装好 Node 之后，你会自动得到一个可以在命令行中直接使用的工具：npm。
npm = Node Package Manager，Node 的包管理器。它主要负责安装以依赖和运行脚本。
4.1 安装依赖
把第三方库下载到你的项目里：
bash
npm install react
npm install vite 为什么命令是 npm install vite 而不是 vite install？因为 Vite 本身也是用 npm 安装的。也就是说，npm 是"安装一切的起点"。
同类工具还有 pnpm、yarn、bun，命令几乎一样，本系列统一用 npm。
4.2 运行脚本
启动项目 / 打包项目：
bash
npm run dev
npm run build Node.js 让 JS 能在你电脑运行，Node自带的npm负责安装工具，用 npm 安装 Vite，Vite 把你的代码翻译给浏览器。
五、 全景图
把上面四个角色画在一起：
这张图的关键是自下而上的依赖关系：没有 Node 就没有 npm，没有 npm 就装不了 Vite，没有 Vite 就跑不了你的项目。所以装环境的顺序是反着来的。先安装Node，之后npm 自动到位，再利用 npm 装 Vite，最后可以用Vite 跑你的项目。
5.1 命令流程
从零到看到第一个页面，命令是这样串起来的：
| 步骤 | 命令 | 任务说明 |
|---|---|---|
| 1. 装 Node | 去 nodejs.org 下载装上 | 让电脑能跑 JS 程序 |
| 2. 创建项目 | npm create vite@latest |
让 npm 拉一个 Vite 模板，问你几个问题（项目名、用 React 还是 Vue、TS 还是 JS） |
| 3. 进项目目录 | cd 你的项目名 |
后面所有命令都得在项目根目录跑 |
| 4. 装依赖 | npm install |
下载项目依赖，照着 package.json 把项目需要的库全下载下来 |
| 5. 启动开发服务器 | npm run dev |
Vite 起一个本地服务器，浏览器打开 http://localhost:5173/ 看效果 |
一般来说，前3步只做一次，后2步会反复用。每次 git clone 别人项目、或者 package.json 变了，都要再 npm install；每次开始写代码都要 npm run dev。
5.2 名词说明表
| 名词 | 是什么 | 核心作用 |
|---|---|---|
| Node.js | JS 运行环境 | 让 JS 能在本地跑 |
| npm | Node 自带的包管理器 | 下载 & 管理依赖 |
| Vite | 构建工具 | 编译代码 + 起服务器 |
package.json |
配置文件，项目根目录里那个 JSON 文件 | 记录依赖和脚本 |
node_modules/ |
npm 下载下来的所有第三方代码 | 放所有第三方库。跑完 npm install 多出来的几百 MB 文件夹 |
package-lock.json |
锁定每个依赖的精确版本 | 跟 package.json 一起进 git |
| React / Vue | UI 库，决定你怎么写组件 | 创建项目时选一个，后续代码都围着它转 |
六、总结
Node.js 让 JS 能在你电脑运行 ，Node 自带的 npm 负责安装工具，用 npm 安装 Vite ， Vite 把你的代码翻译给浏览器。可以用盖房子类比来，其中Node 是地基，npm 是管家，Vite 是施工队，你的项目是房子。
装环境时，从下往上：Node → npm（自动）→ Vite（用 npm 装）→ 你的项目（用 Vite 起）。