运行 npm run dev 时发生了什么
用氛围编程（vibe coding）做网页时，几乎每个人都会卡在同一处：代码写好了，却不知道去哪里看。答案不是先发布到互联网，而是先在自己的电脑里跑起来，而这从一行命令开始：npm run dev。在项目文件夹里打开终端敲下它，开发服务器就启动了。
开发服务器是把你的代码变成网页并实时显示的程序。运行命令几秒后，终端会打印一行地址——'Local: http://localhost:3000'。把它粘贴到浏览器地址栏，你刚做好的画面立刻出现。改代码并保存后，页面不用刷新就会即时更新，因为开发服务器会监测文件改动并重新绘制。这正是它适合边做边看的原因。
localhost:3000 指向哪里
localhost 不是别人的服务器，而是你敲命令的这台电脑本身的名字。用数字表示是 127.0.0.1，在任何一台机器上它都表示“这台电脑自己”。所以在 localhost 打开的页面并没有上传到互联网，它只在你的机器里运行，默认情况下同一网络里的别人也看不到。
后面的 3000 是端口号。把电脑想成一栋有很多房间（门）的大楼，这个应用正在用 3000 号房间。同一台电脑同时跑多个应用，只要用不同的房间号就不会互相干扰。默认号码因工具而异——Next.js、React 用 3000，有的工具用 5173 或 8000。不用背，跟着终端打印的地址走即可。
npm 是什么，package.json 有什么用
npm 是运行这条命令的工具。名字是 Node Package Manager 的缩写，它扮演管理者的角色，负责下载 JavaScript 项目所需的零件（包）并执行既定命令。安装让 JavaScript 能在电脑上运行的运行环境 Node.js 时，npm 会一并装好，通常不用另外安装。
项目文件夹里有一个叫 package.json 的文件。它列出这个项目使用的零件清单，以及 'dev'、'build'、'start' 等运行名（scripts）。每个名字都绑定着真正要执行的命令——比如 'dev' 绑定 'next dev'，那么敲 npm run dev 时，npm 就替你找到并运行那个 'next dev'。
有了这个结构，即便不同工具的真实命令各不相同，人只需记住 npm run dev 一个。不过刚拿到的项目还多一步——先敲 npm install。这条命令会把 package.json 里列出的零件从互联网下载到 node_modules 文件夹里。没有零件服务器就起不来，所以新项目 install 在先。
从头到尾——三条命令的顺序
总结起来顺序始终是三步：① npm install 补齐零件，② npm run dev 在自己的电脑上启动开发服务器，③ 在浏览器地址栏输入 localhost:3000 查看。
下面是敲 npm run dev 时终端实际打印的画面，以及显示该命令在哪里定义的 package.json 的 scripts 部分。看完想停止服务器，在终端按 Ctrl+C。发布到公开互联网，是这一切在你机器上顺利运行之后的事。
➜ my-app npm run dev
> my-app@0.1.0 dev
> next dev
▲ Next.js 16.2.10 (Turbopack)
- Local: http://localhost:3000
- Network: http://192.168.0.10:3000
✓ Ready in 293ms{
"name": "my-app",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
}
}新手常卡住的地方
如果出现 'port already in use'（端口已被占用），说明 3000 号房间已被别的程序占用。这常发生在没有用 Ctrl+C 关掉之前启动的服务器时。通常工具会自动换成 3001 之类的号码，跟着终端新打印的地址走即可。
如果敲命令返回 'command not found'，说明还没装 Node.js——从 nodejs.org 安装，npm 会一并装好。'找不到该脚本' 的错误意味着 package.json 的 scripts 里没有那个名字，请核对真实名称（也许是 start 而非 dev）。而如果页面根本不出现，先检查是不是漏了 npm install。