AI 小工具创造入门
第二册

第2课:终端不是黑客窗口

把终端理解成运行项目、显示 localhost 地址和复制报错的窗口。

终端和 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 地址和完整报错。

On this page