什么是文件路径与目录

为什么要学文件路径？

当你告诉AI"帮我修改那个文件"时，AI会问你：哪个文件？

文件路径就是文件在计算机中的"地址"。就像寄快递需要写清楚省、市、区、街道一样，计算机也需要完整的路径才能找到文件。

文件系统的树形结构

计算机的文件系统就像一棵倒过来的树：

绝对路径 vs 相对路径

这是理解文件路径最重要的概念。

绝对路径

从根目录开始的完整路径，就像完整的邮寄地址。

/Users/xuanyuan/Projects/my-website/src/index.tsx

💡 绝对路径永远以 /（Mac/Linux）或 C:\\（Windows）开头。

相对路径

从当前位置出发的路径，就像告诉同事"就在我旁边那个办公室"。

假设你当前在 /Users/xuanyuan/Projects/my-website/ 目录下：

# 相对路径
src/index.tsx           # 当前目录下的 src 文件夹里的 index.tsx
./src/index.tsx         # 同上（./ 表示当前目录）
../ai-chatbot/          # 上一层的 ai-chatbot 文件夹
../../Documents/        # 上两层的 Documents 文件夹

特殊路径符号

路径分隔符

不同操作系统使用不同的路径分隔符：

⚠️ 在编程中（特别是JavaScript/Python），通常统一使用 / 作为路径分隔符。

常见的项目目录结构

一个典型的前端项目结构如下：

my-website/
├── src/                 # 源代码
│   ├── components/      # 组件
│   ├── pages/           # 页面
│   ├── styles/          # 样式
│   └── utils/           # 工具函数
├── public/              # 静态资源
│   ├── images/          # 图片
│   └── favicon.ico      # 网站图标
├── package.json         # 项目配置
├── tsconfig.json        # TypeScript 配置
├── .env                 # 环境变量（不要提交！）
├── .gitignore           # Git 忽略规则
└── README.md            # 项目说明

在终端中操作路径

# 查看当前目录
$ pwd
/Users/xuanyuan/Projects/my-website

# 列出当前目录内容
$ ls
README.md  package.json  src/  public/

# 进入子目录
$ cd src/components

# 返回项目根目录
$ cd ../..

# 使用绝对路径直接跳转
$ cd /Users/xuanyuan/Projects/my-website

小结

• 绝对路径从根目录开始，是文件的完整地址
• 相对路径从当前位置出发，更常用也更灵活
• . 是当前目录，.. 是上一层目录，~ 是主目录
• 理解路径是操作文件、运行项目的基础