第一章:Node.js — 让 JS 跳出浏览器
进阶篇的第一站。我们不急着敲命令,先解决一个你可能一直没想通的问题:
为什么装 Vue 项目、跑前端项目,都要先装一个叫 Node.js 的东西?
1.1 一个疑问:JS 不是只能在浏览器里跑吗?
回忆一下入门篇:你写的所有 JavaScript,都是放在 <script> 标签里,然后用浏览器打开 HTML 才能跑起来的。
<script>
console.log("这句话在浏览器里执行")
</script>
也就是说,在你的印象里,JS 的运行离不开浏览器。
但奇怪的事情来了。当你要创建一个 Vue 项目时,敲的是这些命令:
npm create vue@latest
npm install
npm run dev
这些命令是在**终端(命令行黑框框)**里敲的,浏览器压根没打开。那这些 JS 相关的工具,到底是”谁”在执行?
答案就是这一章的主角 —— Node.js。
1.2 Node.js 到底是什么
先给一个一句话定义:
Node.js 就是一个”能在电脑上直接运行 JavaScript”的程序。
它让 JS 摆脱了浏览器,能像 Python、Java 那样,直接在你的操作系统里跑。
稍微讲点原理(了解即可)
浏览器之所以能运行 JS,是因为它内部装了一个”JS 引擎”(Chrome 用的叫 V8),负责把你写的 JS 代码翻译成机器能懂的指令。
有人就想:能不能把这个 V8 引擎单独抠出来,装到电脑上? 这样不用开浏览器也能跑 JS 了。
于是就有了 Node.js —— 它把 Chrome 的 V8 引擎搬了出来,再配上一套能操作文件、网络的功能,做成了一个独立的运行环境。
一个好记的类比
| 运行环境 | 干的活 | |
|---|---|---|
| 浏览器里的 JS | 浏览器 | 给用户看:让网页动起来、响应点击 |
| Node.js 里的 JS | 操作系统 | 给开发者干活:跑工具、起服务、读写文件 |
一句话记住:浏览器的 JS 是给用户看的,Node 的 JS 是给开发者干活的。 语言是同一门语言,只是”跑的地方”不一样。
1.3 前端为什么离不开 Node
你可能会想:我是学前端的,最终作品是网页,跑在浏览器里,那我为什么非得装 Node?
因为现代前端的整套开发工具,全都是用 Node 跑起来的。举几个你马上就会遇到的例子:
- 装第三方库:
npm install(npm 是 Node 自带的,第三章讲) - 启动开发服务器:
npm run dev会在本地起一个网址(比如http://localhost:5173)让你边写边看 - 打包上线:
npm run build把你的项目压缩优化成能部署的文件 - 跑构建工具:Vite、Webpack 这些”翻译官”(第五章讲)本身就是 Node 程序
打个比方:Node 就是现代前端的”发动机”。你最终的产品(网页)虽然跑在浏览器里,但制造这个产品的整条流水线,都靠 Node 驱动。
所以哪怕你完全不写后端,只做前端,也必须装 Node.js。它是进入现代前端世界的门票。
1.4 安装与验证
Node.js 有两种装法:
- 直接去官网下载安装包(
nodejs.org)—— 简单,但只能装一个版本 - 用 nvm 安装 —— 能装多个版本随时切换,更推荐
我们采用第 2 种,具体操作放在第二章详细讲。这里你只需要知道:装好之后,可以用下面两条命令检查是否成功。
打开终端,输入:
node -v
如果显示类似 v20.11.0 的版本号,说明 Node 装好了。
再输入:
npm -v
显示类似 10.2.4 的版本号,说明 npm(Node 自带的包管理器)也就绪了。
小知识:装了 Node 会自动附赠 npm,不用单独安装。
1.5 小结
- Node.js = 能在电脑上直接跑 JavaScript 的程序,让 JS 跳出了浏览器
- 原理上,它是把 Chrome 的 V8 引擎单独拿出来,做成了独立运行环境
- 记住类比:浏览器的 JS 给用户看,Node 的 JS 给开发者干活
- 现代前端的所有工具(npm、Vite、打包……)都靠 Node 驱动,所以前端必须装 Node
- 验证安装:
node -v和npm -v
下一章,我们用 nvm 来正式、优雅地把 Node 装上。