​ 刚开始做前端的人命令行里冒出一堆名词Node、npm、Vite、package.json、node_modules/……最容易懵的不是“不会用”而是它们之间到底谁管谁​ 这篇不讲具体的应用只把四者的关系理清楚。读完你应该能回答这几个问题为什么装 React 要先装 Node为什么是npm install而不是vite installnpm run dev到底是谁在跑一、一切的起点浏览器其实很“挑食”​ 浏览器只认识三样东西HTML、CSS、JavaScript。但今天写网页早就不是直接写这三样了。​ 你会看到大家用TypeScript带类型的 JSJSX / TSXHTML 写在 JS 里SCSS / Less带变量和嵌套的 CSSimport一堆第三方库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。四、 npmNode 自带的包管家​ 装好 Node 之后你会自动得到一个可以在命令行中直接使用的工具npm。​npm Node Package ManagerNode 的包管理器。它主要负责安装以依赖和运行脚本。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 安装 ViteVite 把你的代码翻译给浏览器。五、 全景图​ 把上面四个角色画在一起​ 这张图的关键是自下而上的依赖关系没有 Node 就没有 npm没有 npm 就装不了 Vite没有 Vite 就跑不了你的项目。所以装环境的顺序是反着来的。先安装Node之后npm 自动到位再利用 npm 装 Vite最后可以用Vite 跑你的项目。5.1 命令流程​ 从零到看到第一个页面命令是这样串起来的步骤命令任务说明1. 装 Node去 nodejs.org 下载装上让电脑能跑 JS 程序2. 创建项目npm create vitelatest让 npm 拉一个 Vite 模板问你几个问题项目名、用 React 还是 Vue、TS 还是 JS3. 进项目目录cd 你的项目名后面所有命令都得在项目根目录跑4. 装依赖npm install下载项目依赖照着package.json把项目需要的库全下载下来5. 启动开发服务器npm run devVite 起一个本地服务器浏览器打开http://localhost:5173/看效果​ 一般来说前3步只做一次后2步会反复用。每次git clone别人项目、或者package.json变了都要再npm install每次开始写代码都要npm run dev。5.2 名词说明表名词是什么核心作用Node.jsJS 运行环境让 JS 能在本地跑npmNode 自带的包管理器下载 管理依赖Vite构建工具编译代码 起服务器package.json配置文件项目根目录里那个 JSON 文件记录依赖和脚本node_modules/npm 下载下来的所有第三方代码放所有第三方库。跑完npm install多出来的几百 MB 文件夹package-lock.json锁定每个依赖的精确版本跟package.json一起进 gitReact / VueUI 库决定你怎么写组件创建项目时选一个后续代码都围着它转六、总结​Node.js让 JS 能在你电脑运行 Node 自带的npm负责安装工具用 npm 安装Vite Vite 把你的代码翻译给浏览器。可以用盖房子类比来其中Node 是地基npm 是管家Vite 是施工队你的项目是房子。装环境时从下往上Node → npm自动→ Vite用 npm 装→ 你的项目用 Vite 起。