Vibe Coding Lab开始探索
LESSON 2.1 / COMPUTER & INTERNET

文件、文件夹与路径

项目首先是一组被组织起来的文件。路径回答“它在哪里”，扩展名帮助判断“它是什么”。

预计阅读15–20 分钟
完成结果报错“找不到文件”时，第一反应是确认当前目录和目标路径。
本课目标
  • 报错“找不到文件”时，第一反应是确认当前目录和目标路径。
  • 文件与软件、文件夹与项目的区别
  • 用编辑器打开一个完整文件夹，并为其中五个文件分别写出相对路径和用途。
开始之前
  • 完成 1.3「准备设备、时间与工作方式」
01

FOUNDATION

必须理解

项目首先是一组被组织起来的文件。路径回答“它在哪里”，扩展名帮助判断“它是什么”。

代码、图片、配置和数据库迁移最终都以文件存在。路径写错时，程序不是“不认识你的意思”，而是精确地去了另一个位置或根本找不到目标。

先建立整体直觉

文件系统像一栋楼：磁盘是楼盘，文件夹是楼层与房间，文件名是门牌。绝对路径写完整地址，相对路径则从你当前所在房间开始描述。

贯穿本课的实际场景

任务应用的首页位于 app/page.tsx，样式位于 app/globals.css；从首页引用样式或图片时，程序必须能沿正确路径找到它。

概念 1

文件与软件、文件夹与项目的区别

先用白话理解

文件里装的是具体内容，文件夹负责把它们分组，扩展名告诉程序这大概是什么格式。Windows 如果隐藏扩展名，你看到的 index.html 可能其实是 index.html.txt，这两个文件对浏览器来说完全不是一回事。

基础概念

文件是带名称的内容单元，文件夹负责组织文件，软件则是由代码、资源和配置共同构成并由系统运行的程序。项目通常是围绕一个目标组织起来的一整棵文件树。

进一步理解

双击一个 HTML 文件只是打开单个内容；用编辑器打开项目文件夹，工具才能理解相对路径、搜索范围、配置和版本历史。

扩展名是文件名的一部分，帮助系统与人判断格式。它不能保证内容正确，但 `page.tsx` 与 `page.txt` 会被开发工具完全不同地处理。

放进实际场景

任务应用不是某个 `page.tsx` 文件本身，还包括样式、组件、配置、依赖清单和图片；这些都以项目根目录为共同起点。

容易混淆的地方

文件夹不是程序，扩展名也不是内容验证。把错误文本改名为 `.png` 不会让它变成图片。

这一小节记住：先分清内容单元、组织容器和可运行软件，再理解项目结构。

概念 2

扩展名、根目录、家目录与当前目录

先用白话理解

绝对路径像写完整收货地址，从磁盘一路写到文件；相对路径则是“从我现在这里怎么走”。所以同一个 ../ 换到另一个目录，指向的位置也会跟着变。

基础概念

根目录是某棵路径结构的起点，家目录是当前用户默认存放个人文件的位置，当前目录是终端此刻执行相对路径的起点。三者可能相同，也可能完全不同。

进一步理解

Windows 路径常含盘符，例如 `C:\Projects\task-app`；类 Unix 系统从 `/` 开始。`.` 表示当前目录，`..` 表示上一级，它们的含义会随当前位置变化。

程序报告“找不到文件”时，应同时核对目标路径、当前目录、大小写、扩展名和文件是否真实存在，而不是立即重装工具。

放进实际场景

终端位于 `C:\Projects` 时，`task-app\package.json` 指向项目清单；进入 `task-app` 后，同一文件的相对路径变成 `package.json`。

容易混淆的地方

项目根目录是人为约定的项目起点，磁盘根目录是操作系统路径起点，家目录属于某个用户，不能把三个“根”混为一谈。

这一小节记住：相对路径永远要连同“从哪里出发”一起理解。

概念 3

绝对路径和相对路径在不同系统中的写法

先用白话理解

文件名越含糊，后面越容易找错。task-list.ts 一眼能猜到用途，new2-final.ts 就只能靠打开看；统一命名也能让 AI 少猜很多。

基础概念

绝对路径从文件系统起点完整描述位置，相对路径从当前文件或当前目录描述位置。程序在哪个上下文解析路径，决定相对路径最终指向哪里。

进一步理解

终端命令通常从当前目录解析相对路径；HTML 资源通常相对当前文档地址；JavaScript 导入通常相对写出 import 的文件。不能只看到同样的 `./` 就认为规则完全相同。

路径中有空格时常需要引号。跨系统项目优先使用工具支持的路径写法，不把自己电脑的绝对路径写进共享源码。

放进实际场景

`./images/logo.png` 写在首页中表示从首页所在位置寻找 images；把首页移到子目录后，这条引用可能需要随之调整。

容易混淆的地方

绝对路径更明确却不一定更可移植；相对路径更便于共享，却必须知道解析起点。两者没有绝对优劣。

这一小节记住：判断路径先问两个问题：起点在哪里，目标是否真的存在。

02

AI COLLABORATION

AI 如何参与

把项目文件树交给 AI，让它逐个解释关键目录的职责，而不是让它盲目搜索整台电脑。

推荐协作顺序

  1. 1

    把当前目录和目标文件树贴给 AI，不要只说“路径错了”。

  2. 2

    让它从引用起点一段一段走到目标，并标出每个 .. 的含义。

  3. 3

    按它给出的路径亲自在资源管理器中走一遍，确认文件名和扩展名完全一致。

可直接使用的 Prompt
我是 Windows 零基础用户。当前目录是 C:\study\task-app，文件结构如下：
app/page.tsx
app/globals.css
public/logo.png
请分别解释：绝对路径、相对路径、当前工作目录。然后给出从 page.tsx 引用 logo.png 的思考过程。不要执行或删除任何文件。
应该得到什么

AI 应先说明起点，再逐段解释路径，不应只给一个猜测结果；同时明确 URL 路径和磁盘路径不是同一概念。

人工检查清单

  • 确认 AI 使用的是题目里的 Windows 路径，没有擅自假设 macOS/Linux，也没有建议批量移动或删除目录。
  • 要求 AI 在每条路径旁写出解析起点和最终目标，不能只说“路径有问题”。
  • 用文件列表和当前目录命令亲自验证目标存在，不接受仅凭代码外观作出的判断。
03

COMMON TRAPS

常见误区

错误不是需要隐藏的失败，而是帮助你看清系统边界的证据。下面三类问题在 AI 辅助学习中最常出现。

误区 1

只看文件名，不看扩展名

你会看到
你以为创建了 index.html，实际文件却叫 index.html.txt。
为什么发生
图形界面可能隐藏扩展名和完整位置，使两个同名文件看起来一样；单文件打开又会丢失项目上下文。
怎样纠正
打开显示文件扩展名，用完整名称判断格式。
误区 2

分不清路径从哪里开始

你会看到
同一条 ../logo.png 在一个文件里有效，换个目录就失效。
为什么发生
记住文件名却不记录它所在目录，相当于只记门牌不记城市；程序只能按完整位置查找。
怎样纠正
先写清引用它的文件在哪里，再从那个位置逐级走向目标。
误区 3

找不到就到处移动文件

你会看到
移动一次似乎好了，随后其它图片和脚本又全部失效。
为什么发生
复制副本绕过了版本管理，名称很快失去含义，人和 AI 都无法确定哪份是可信来源。
怎样纠正
保留目录结构，修正引用关系；每次只改一条路径并马上验证。
04

HANDS-ON

动手任务

用编辑器打开一个完整文件夹，并为其中五个文件分别写出相对路径和用途。

准备条件
  • 完成 1.3「准备设备、时间与工作方式」

跟着做

  1. 01

    建立 task-app 目录及 app、public 两个子目录。

  2. 02

    创建 page.txt、notes.md 和 public/logo.txt 三个练习文件。

  3. 03

    分别记录三个文件的绝对路径。

  4. 04

    从项目根目录写出它们的相对路径，再进入 app 后重新写一次。

  5. 05

    故意把一个文件名写错，观察系统提示并修正。

完成标志

报错“找不到文件”时，第一反应是确认当前目录和目标路径。

加餐挑战

画出本项目文件树，并为每个目录写一句职责说明。

离开本课前，自问四件事

  • 文件、文件夹、软件和项目分别是什么关系？
  • 我能否指出项目根目录、用户家目录和终端当前目录？
  • 同一条相对路径为什么在不同位置可能指向不同文件？
  • 遇到“找不到文件”时，我会按什么顺序核对证据？
完成本课了吗？

确认完成后，会同步更新学习中心的课程学习进度。