第2课:终端不是黑客窗口
把终端理解成运行项目、显示 localhost 地址和复制报错的窗口。
本课目标
第 1 课让你知道:小工具不是一个孤立网页,而是一个项目文件夹。
第 2 课继续向前一步:你要知道项目怎样被运行起来。
本课不教命令行大全,也不要求你背很多命令。
它只解决一个问题:
当我要运行项目或遇到报错时,
我知道终端在哪里、终端在告诉我什么、应该复制什么给 AI。
本课结束时,你要完成:
- 一张终端运行记录卡。
- 一张终端报错复制卡。
开始之前
很多新手第一次看到终端,会觉得它像电影里的黑客窗口。
黑底白字。
英文很多。
还会突然冒出红色报错。
你可能会想:
这个我不会。
这个是不是程序员才懂?
我是不是弄坏项目了?
先放松。
第二册里,你不需要变成命令行高手。
你只需要先知道:
终端是项目运行和报错经常出现的地方。
它更像项目的“广播窗口”:项目启动了会告诉你,项目出错了也会告诉你。
一个小故事
小林打开了第一册做的小红书标题助手项目。
他问 Codex:
这个项目怎么运行?
Codex 回答:
在终端运行 npm run dev。
然后打开 http://localhost:3000。
小林看到这句话,卡住了。
npm run dev 是什么?
终端在哪里?
localhost 又是什么?
我是不是要买服务器?
他随便点开浏览器,发现页面打不开。
于是他说:
项目坏了。
其实项目不一定坏了。
可能只是项目还没启动。
也可能是命令输错了。
也可能是终端里已经告诉他地址,但他没看。
今天这节课,就是帮你看懂这条路:
终端输入命令 -> 项目启动 -> 出现 localhost 地址 -> 浏览器打开页面
今天要认识的 7 个东西
| 词 | 大白话理解 |
|---|---|
| 终端 | 输入命令、运行项目、查看信息和报错的窗口 |
| 命令 | 你告诉电脑要做什么的一句话 |
| 当前目录 | 终端现在站在哪个文件夹里 |
| 启动项目 | 让项目运行起来 |
| 停止项目 | 让正在运行的本地项目停下来 |
| localhost | 我自己这台电脑上的本地地址 |
| 端口 | localhost 地址后面的门牌号 |
你不需要理解深层网络原理。
你只要知道:浏览器地址里的端口,要和终端告诉你的地址一致。
一个比喻:终端像厨房广播
你可以把项目想成一家小店。
| 小店 | 项目 |
|---|---|
| 厨房广播 | 终端 |
| 开火指令 | 启动命令 |
| 厨房正在营业 | 项目正在运行 |
| 门牌号 | localhost 地址和端口 |
| 客人进店 | 浏览器打开页面 |
| 厨房报缺材料 | 终端报错 |
如果厨房还没开火,客人走进店里当然吃不到东西。
如果项目还没启动,浏览器也打不开页面。
课堂活动:打开终端并记录运行过程
请打开你第一册的小工具项目。
先不要改代码。
本课只练习运行和观察。
第一步:打开终端
如果你不知道在哪里,可以问 Codex:
请你先不要改代码。
请告诉我在这个编辑器里如何打开终端,以及我现在应该确认自己在哪个项目文件夹里。
第二步:确认项目文件夹
| 项目 | 我的填写 |
|---|---|
| 我打开的项目名称 | |
| 我现在的项目文件夹位置 | |
我是否看到了 package.json | 是 / 否 / 不确定 |
如果没有看到 package.json,不要急。
可能项目结构不同,也可能你打开的位置不对。先让 AI 帮你确认。
第三步:运行项目
如果 Codex 或项目说明告诉你启动命令,请把命令写下来。
| 项目 | 我的记录 |
|---|---|
| 我准备运行的命令 | |
| 终端出现的主要信息 | |
| 有没有出现 localhost 或本地地址 | |
| 浏览器应该打开的地址 |
打开浏览器检查页面
把终端里出现的本地地址复制到浏览器。
常见地址可能是:
http://localhost:3000
http://localhost:5173
http://localhost:8080
打开后检查:
| 检查项 | 结果 |
|---|---|
| 页面是否打开 | |
| 页面是不是我的小工具 | |
| 输入框是否还在 | |
| 按钮是否还在 | |
| 结果区是否还在 |
如果页面打不开,不要慌。
先回到终端看有没有错误信息。
终端运行记录卡
| 项目 | 我的记录 |
|---|---|
| 我在哪个项目文件夹里 | |
| 我打开终端的位置 | |
| 我输入的命令 | |
| 终端显示的主要信息 | |
| 浏览器打开的地址 | |
| 项目是否成功打开 | |
| 如果没有成功,发生了什么 |
运行检查
| 检查项 | 是 | 否 | 备注 |
|---|---|---|---|
| 我在正确的项目文件夹里 | |||
| 我输入了启动命令 | |||
| 终端没有立即退出 | |||
| 终端出现 localhost 或本地地址 | |||
| 浏览器能打开页面 | |||
| 页面不是空白 |
学会复制完整报错
报错不是失败。
报错是项目给你的信息。
最差的描述是:
不行了。
更好的描述是:
我在项目文件夹里运行 npm run dev。
我期待打开 localhost 页面。
实际终端出现下面的错误。
这是完整报错。
请先定位,不要直接重写项目。
报错描述公式:
我做了什么 -> 我期待什么 -> 实际发生什么 -> 完整错误信息 -> 请 AI 先定位
终端报错复制卡
| 项目 | 我的记录 |
|---|---|
| 我刚才做了什么 | |
| 我期待发生什么 | |
| 实际发生了什么 | |
| 终端完整报错 | |
| 浏览器有没有报错 | |
| 我最近让 AI 改了什么 | |
| 请 AI 先判断这更像哪类问题 | 路径 / 依赖 / 命令 / 环境变量 / 端口 / 代码错误 / 不确定 |
给 AI 的一句话
我运行项目时遇到问题。
我刚才做了什么:
我期待发生什么:
实际发生了什么:
终端完整信息如下:
浏览器情况如下:
请你先判断问题可能发生在哪里:
路径 / 依赖 / 命令 / 环境变量 / 端口 / 代码错误 / 不确定
请不要马上重写代码。
请先解释最可能的原因,再给我最小排查步骤。
本课最低标准
你能说出:
终端不是黑客窗口。
终端是运行项目和查看报错的地方。
浏览器负责看页面。
项目要先启动,浏览器才能打开本地页面。
并且你能记录一次启动命令、localhost 地址和完整报错。