1.3 零基础必备的五个电脑常识

一、本节你会做出什么

你会亲手打开终端和浏览器控制台各一次，并说得出自己的项目文件夹在哪。

这五个常识是全课的地板。它们不难，但你要是没有，后面每一节课都会被同一批小问题绊住——AI 让你“在项目根目录执行”，你却不知道根目录在哪。

只讲你必须知道的，一个字都不多讲。

二、开始前你需要

已完成 1.2 AI 时代的编程到底变了什么
一台 Mac 或 Windows 电脑，能打开浏览器

三、跟着做

常识 1：文件和文件夹——你的项目是一堆文件

一个网站不是一个神秘的整体，它就是一堆文件装在一个文件夹里。

my-website/              ← 这就是「项目文件夹」，也叫「项目根目录」
├── index.html           ← 网页内容
├── style.css            ← 样式
├── script.js            ← 交互逻辑
└── images/
    └── logo.png

三件事你要有感觉：

扩展名代表类型：.html 网页、.css 样式、.js 逻辑、.json 数据、.md 文档。
“项目根目录”就是最外层那个文件夹。AI 说“在项目根目录执行命令”，指的就是这里。
别用中文和空格给项目文件夹起名。我的网站 v2 这种名字迟早出问题，用 my-website 这种：小写字母 + 短横线。

现在动手： 在你习惯的位置（建议 Mac 是“文稿”，Windows 是 D:\）新建一个文件夹，命名为 ai-course。今后本课所有项目都放这里。

常识 2：路径——文件的“门牌号”

路径就是一个文件在电脑里的地址。

绝对路径（从最顶层写起，任何时候都指向同一个地方）：

Mac:      /Users/你的用户名/Documents/ai-course/my-website/index.html
Windows:  D:\ai-course\my-website\index.html

Mac 用 /，Windows 用 \，这是它们最明显的区别。另外 Mac 上 ~ 是你的用户主目录的简写，~/Documents 就是 /Users/你的用户名/Documents。

相对路径（从“我现在在哪”算起）：

写法	含义
`./style.css` 或 `style.css`	当前文件夹里的 style.css
`images/logo.png`	当前文件夹下 images 里的 logo.png
`../index.html`	上一级文件夹里的 index.html

.. 表示“上一级”，这个符号你会天天见到。

现在动手，把它变成你的本事：

Mac：打开访达找到 ai-course 文件夹 → 右键 → 按住 Option 键 → 菜单里会变成「拷贝“ai-course”作为路径名称」→ 点它，路径就在剪贴板里了。
Windows：在文件资源管理器里按住 Shift → 右键文件夹 → 「复制文件地址」。

粘到备忘录里存着。后面每次 AI 问你“你的项目在哪”，你就粘这个。

📷 截图位 1：把你复制出来的路径贴在备忘录里，截个图。

常识 3：终端——和电脑对话的输入框

终端（Terminal）是一个黑框框，你打一行字，电脑执行一行。它看着吓人，其实就是用打字代替鼠标点击。

怎么打开：

Mac：Command + 空格 → 输入 终端 或 Terminal → 回车
Windows：开始菜单搜索 PowerShell → 打开「Windows PowerShell」

打开后你会看到一行字，末尾有个 % 或 >，后面闪着光标。这叫提示符，意思是“我在等你输入”。

现在动手，输入这一行，然后按回车：

pwd

它会打印出你当前所在的文件夹路径（pwd = print working directory，打印工作目录）。

这一节你只需要知道三件事：

终端永远“站在某个文件夹里”，pwd 就是问“我现在站在哪”；
回车才会执行，打完不按回车什么都不会发生；
命令可以复制粘贴，不用手打——AI 给你的命令，复制过来粘贴执行就行。

📷 截图位 2：截下你终端里 pwd 的输出。

完整的五个必会命令在 [2.1 认识终端] 讲。这一节你只要做到“看到黑框框不慌”就够了。

常识 4：浏览器控制台——网页出问题的第一现场

网页在浏览器里跑。页面白了、按钮点了没反应，原因通常写在控制台里，只是默认藏着。

怎么打开（Chrome / Edge 通用）：

Mac：Command + Option + J
Windows：F12，或 Ctrl + Shift + J

会弹出一个面板，切到 Console（控制台） 这个标签页。

现在动手： 打开任意一个网站（比如某个新闻站），按上面的快捷键打开控制台。多数网站上你都能看到几行黄色警告或红色报错。

红色的那些就是报错。 这是本课最重要的一个习惯：

页面一不对劲，第一反应是打开控制台看红字，把红字整段复制给 AI。

不需要你看懂红字的内容。复制、粘贴、让 AI 解释——6.1 和 6.2 会教你怎么喂给 AI 效果最好。

📷 截图位 3：截下你打开的控制台面板。

常识 5：“跑起来”是什么意思

你会无数次听到“把项目跑起来”。它的意思是：让你写的代码变成一个能打开的网页。

有两种“跑起来”，别搞混：

	本地运行	线上部署
地址长什么样	`http://localhost:3000`	`https://你的名字.vercel.app`
谁能看到	只有你自己	全世界任何人
怎么来的	在终端执行一条启动命令	把代码交给部署平台
关掉电脑还在吗	不在了	还在

localhost 意思是“本机”，3000 是端口号（可以理解成门牌号，不同项目占不同的门）。看到 localhost 就要明白：这个链接发给别人是打不开的。

本课所有项目都要求走完第二步——拿到一个真正的公网链接。下一节你就会拿到第一个。

四、完成的标志是

我建好了 ai-course 文件夹，并复制出了它的完整路径
我知道 .. 表示上一级文件夹
我打开过终端，执行了 pwd 并看到了输出
我打开过浏览器控制台，知道红色的是报错
我说得清 localhost:3000 和公网链接的区别
三张截图都存好了

五、卡住了看这里

Q：终端里输入 pwd 提示 command not found / 不是内部或外部命令？ Windows 上你可能打开的是老的 CMD 而不是 PowerShell。关掉，搜索 PowerShell 重新打开。PowerShell 支持 pwd。

Q：我按了快捷键，控制台没出来。 可能焦点不在页面上。先用鼠标点一下网页空白处再按。也可以走菜单：Chrome 右上角 ⋮ → 更多工具 → 开发者工具。

Q：控制台里一大堆红字，是我电脑坏了吗？ 不是。很多正常网站都有报错，广告脚本、统计脚本报错是家常便饭，不影响你用。只在“你自己的页面出问题时”才需要关心红字。

Q：我在终端里不小心输错了命令怎么办？ 没执行的话，按住删除键删掉重打，或者 Ctrl + C 放弃当前这行。已经执行了也别慌——本节涉及的命令（pwd）只是读取信息，不会改动任何东西。

Q：我路径里有中文，会有问题吗？ 可能会。/Users/张三/文稿/我的网站/ 这类路径在某些工具下会出错，且出错信息很难懂。如果你的用户名是中文，把项目文件夹放到 D:\ai-course（Windows）或 ~/ai-course（Mac）这种纯英文路径下，能避开一大批坑。

六、本节提示词

① 让 AI 当你的电脑常识翻译官（存起来，以后天天用）：

我是零基础学 AI 编程的新手，用的是【Mac / Windows】。
我看到一句话看不懂：【粘贴你看不懂的那句，比如"在项目根目录下执行 npm run dev"】

请你：
1. 用大白话解释这句话让我做什么；
2. 给出我在【Mac / Windows】上具体要点哪里、输入什么，一步一步写；
3. 告诉我做对了之后，屏幕上应该出现什么。

② 报错急救（页面出问题时用，本课你会用上几百次）：

我的网页出问题了，现象是：【比如"页面一片空白"】
浏览器控制台里的红色报错原文如下：
【把红字整段粘进来，不要删减】

请你：
1. 用大白话告诉我这是什么意思；
2. 最可能的原因是什么；
3. 我该按什么顺序去检查，从最可能的开始。

上一节 ← 1.2 AI 时代的编程到底变了什么 下一节 → 1.4 实战：30 分钟做出你的第一个网页