刚开始做前端的人，命令行里冒出一堆名词：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 安装依赖
把第三方库下载到你的项目里：
npminstallreactnpminstallvite 为什么命令是npm install vite而不是vite install？因为Vite 本身也是用 npm 安装的。也就是说，npm 是“安装一切的起点”。
同类工具还有pnpm、yarn、bun，命令几乎一样，本系列统一用 npm。
4.2 运行脚本
启动项目 / 打包项目：
npmrun devnpmrun 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 起）。
