# Day_2：命令行基础——不用鼠标操作文件

> 今天暂时不写界面，先掌握任何项目都离不开的基础：
> **命令行（Command Line）**。

预计用时：30～45 分钟

---

## 今日目标

完成今天以后，你应该知道：

- 什么是终端
- 什么是当前目录
- 什么是文件和文件夹
- 什么是路径
- 什么是绝对路径和相对路径
- 如何用命令进入、退出和创建目录
- Windows 与 macOS 的命令行有什么区别
- 为什么很多开发命令必须在“正确的目录”中执行

今天需要理解的是：

> **“我现在在哪里？我要去哪里？我要操作哪个文件？”**

这种命令行思维。

---

# 1. 打开终端

根据自己的操作系统选择对应方式。

## Windows

可以直接在 VS Code 中点击：

```text
终端 → 新建终端
```

通常会打开：

```text
PowerShell
```

你可能看到：

```text
PS C:\Users\Arthur\...\your_project>
```

也可以使用 Windows 自带的：
```text
cmd 或 Powershell
```

通过：

```text
Win + R
```

打开“运行”，然后搜索：

```text
cmd 或 Powershell
```

---

## macOS

同样可以直接使用 VS Code：

```text
终端 → 新建终端
```

通常会打开：

```text
zsh
```

你可能看到：

```text
arthur@MacBook ~ %
```

也可以使用 macOS 自带的：

```text
终端 Terminal
```

可以通过：

```text
Command + Space
```

打开 Spotlight，然后搜索：

```text
Terminal
```

---

# 终端命令

基于不同系统，Windows 和 macOS 的终端命令略有差异。

今天会使用的命令大部分在两个系统中都可以使用。

| 功能 | Windows PowerShell | macOS Terminal |
| --- | --- | --- |
| 查看当前目录 | `pwd` | `pwd` |
| 查看文件 | `ls` | `ls` |
| 进入目录 | `cd` | `cd` |
| 返回上一级 | `cd ..` | `cd ..` |
| 创建目录 | `mkdir` | `mkdir` |
| 查看文本文件 | `cat` | `cat` |
| 清屏 | `cls` / `clear` | `clear` |
| 创建空文件 | `New-Item` | `touch` |

后面的教程如果没有特别说明：

```bash
pwd
ls
cd
mkdir
cat
```

这些命令 Windows 和 macOS 都可以直接使用。

---

# 3. 我现在在哪里？

在终端输入：

```bash
pwd
```

然后按 Enter。

`pwd` 可以理解成：

```text
Print Working Directory
```

也就是：

> 显示当前工作目录。

---

## Windows 可能看到

```text
C:\Users\Arthur
```

---

## macOS 可能看到

```text
/Users/arthur
```

这行文字表达的概念是：

> **你当前所在的位置。**

这叫：

```text
当前工作目录
Current Working Directory
```

以后很多常见报错，例如：

```text
找不到文件
找不到项目
不是 Git 仓库
找不到 package.json
找不到配置文件
```

原因都有可能非常简单：

> **你站错文件夹了。**

所以以后遇到奇怪问题，可以养成第一个习惯：

```bash
pwd
```

先确认：

> 我现在到底在哪里？

---

# 4. 看看当前目录有什么

输入：

```bash
ls
```

---

## Windows

可能看到：

```text
Desktop
Documents
Downloads
Pictures
...
```

---

## macOS

也可能看到：

```text
Desktop
Documents
Downloads
Movies
Pictures
...
```

`ls` 的作用就是：

> 查看当前目录中有哪些文件和文件夹。

---

# 5. 文件系统可以想象成一棵树

假设你的电脑里有：

```text
Documents/
├── homework/
├── APP/
│   ├── CampusHelper/
│   └── notes/
└── test.txt
```

如果你现在位于：

```text
Documents
```

那么：

```text
APP
```

就是你当前目录下面的一个文件夹。

而：

```text
CampusHelper
```

位于：

```text
APP
```

里面。

---

# 6. 进入一个目录

使用：

```bash
cd 目录名
```

例如：

```bash
cd Documents
```

然后：

```bash
pwd
```

你会发现当前位置改变了。

---

## 如果目录名中有空格怎么办？

假设有：

```text
My Projects
```

可以写：

```bash
cd "My Projects"
```

Windows 和 macOS 都建议养成这个习惯：

> 路径中有空格时使用引号。

不过日常开发目录最好尽量使用：

```text
CampusHelper
app-rookie
my_project
```

这种没有空格的名字。

---

# 7. 返回上一级目录

输入：

```bash
cd ..
```

这里：

```text
..
```

代表：

> 上一级目录。

例如：

```text
Documents/APP/CampusHelper
```

执行：

```bash
cd ..
```

之后：

```text
Documents/APP
```

再执行一次：

```bash
cd ..
```

就变成：

```text
Documents
```

---

# 8. `.` 又是什么？

在命令行中：

```text
.
```

代表：

> 当前目录。

而：

```text
..
```

代表：

> 上一级目录。

---

# 9. 创建文件夹

找一个你准备存放练习的位置。

推荐：

## Windows

例如：

```text
Documents
```

或者：

```text
D:\Projects
```

## macOS

例如：

```text
Documents
```

或者在自己的用户目录下建立：

```text
Projects
```

---

输入：

```bash
mkdir APP-Rookie
```

然后：

```bash
ls
```

应该可以看到：

```text
APP-Rookie
```

进入它：

```bash
cd APP-Rookie
```

确认：

```bash
pwd
```

---

# 10. 创建多个目录

继续输入：

```bash
mkdir Day_2
mkdir projects
mkdir notes
```

然后：

```bash
ls
```

应该看到：

```text
Day_2
projects
notes
```

到这里： **完全不用鼠标** 的情况下，你已经创建了三个文件夹。

---

# 11. 创建一个文件

这里 Windows 和 macOS 会有一点区别。

---

## Windows PowerShell

可以使用：

```powershell
New-Item README.md
```

也可以直接：

```powershell
echo "Hello APP" > README.md
```

---

## macOS

可以使用：

```bash
touch README.md
```

然后写入内容：

```bash
echo "Hello APP" > README.md
```

---

两个系统都可以执行：

```bash
ls
```

应该看到：

```text
README.md
```

---

# 12. 查看文件内容

Windows PowerShell 和 macOS 都可以：

```bash
cat README.md
```

应该看到：

```text
Hello APP
```

---

# 13. 什么是路径？

这是今天最重要的知识之一。

假设：

```text
APP-Rookie/
├── Day_2/
├── projects/
├── notes/
└── README.md
```

如果你现在位于：

```text
APP-Rookie
```

然后执行：

```bash
cd Day_2
```

这里的：

```text
Day_2
```

就是：

> **相对路径**

意思是：

> 从“我现在的位置”出发，怎么找到它。

---

# 14. 什么是绝对路径？

绝对路径相当于：

> 从最开始的位置写出的完整地址。

---

## Windows 示例

```text
C:\Users\Arthur\Documents\APP-Rookie\Day_2
```

或者：

```text
D:\Projects\APP-Rookie\Day_2
```

Windows 通常以：

```text
C:\
D:\
```

这样的盘符开始。

---

## macOS 示例

```text
/Users/arthur/Documents/APP-Rookie/Day_2
```

macOS 的路径通常从：

```text
/
```

开始。

---

可以简单理解：

```text
绝对路径
=
完整地址
```

```text
相对路径
=
从当前位置怎么走
```

---

# 15. Windows 和 macOS 路径最大的区别

注意观察：

## Windows

```text
C:\Users\Arthur\Documents
```

通常使用：

```text
\
```

---

## macOS

```text
/Users/arthur/Documents
```

使用：

```text
/
```

以后复制别人教程里的命令时要注意这一点。

不过很多现代开发工具本身会帮助处理路径差异，所以目前不需要过度担心。

---

# 16. `~` 是什么？

macOS 用户经常会看到：

```text
~
```

例如终端：

```text
arthur@MacBook ~ %
```

这里：

```text
~
```

代表：

> 当前用户的 Home 目录。

例如：

```text
/Users/arthur
```

所以：

```bash
cd ~
```

可以回到自己的用户目录。

---

## Windows PowerShell 也支持

```powershell
cd ~
```

通常会进入：

```text
C:\Users\你的用户名
```

所以这是两个系统都很方便的命令。

---

# 17. 清屏

终端里东西太多时，可以清空屏幕。

## Windows

```powershell
cls
```

或者：

```powershell
clear
```

## macOS

```bash
clear
```

注意：

> 清屏并不会删除任何文件。

它只是把终端显示内容清掉。

---

# 今日任务：不用鼠标搭建一个项目

现在开始今天的正式任务。

要求：

> **尽量不要使用鼠标创建文件和文件夹。**

请创建：

```text
my-app/
├── src/
│   ├── pages/
│   └── utils/
├── docs/
├── assets/
└── README.md
```

并让：

```text
README.md
```

中包含：

```text
My First APP Project
```

---

# 任务第一步

先创建项目：

```bash
mkdir my-app
```

进入：

```bash
cd my-app
```

---

# 任务第二步

想一想：

怎样创建：

```text
src
docs
assets
```

？

如果已经知道，就不要继续看提示。

---

# 提示 1

可以：

```bash
mkdir src
mkdir docs
mkdir assets
```

---

# 任务第三步

现在需要：

```text
src/
├── pages/
└── utils/
```

想一想：

> 应该先进入哪个目录？

---

# 提示 2

```bash
cd src
```

然后：

```bash
mkdir pages
mkdir utils
```

完成之后：

```bash
cd ..
```

返回：

```text
my-app
```

---

# 任务第四步：创建 README

## Windows PowerShell

可以：

```powershell
echo "My First APP Project" > README.md
```

## macOS

同样可以：

```bash
echo "My First APP Project" > README.md
```

所以这里两个系统完全一样。

---

# 查看结果

执行：

```bash
ls
```

然后：

```bash
cat README.md
```

应该看到：

```text
My First APP Project
```

---

# 完整参考解答

Windows PowerShell 和 macOS 都可以直接使用下面这组命令：

```bash
mkdir my-app
cd my-app

mkdir src
mkdir docs
mkdir assets

cd src

mkdir pages
mkdir utils

cd ..

echo "My First APP Project" > README.md
```

查看：

```bash
ls
```

然后：

```bash
cat README.md
```

进入：

```bash
cd src
```

查看：

```bash
ls
```

应该看到：

```text
pages
utils
```

---

# 今日验收标准

完成以下内容即可通过 Day_2：

- [ ] 知道什么是终端
- [ ] 会使用 `pwd`
- [ ] 会使用 `ls`
- [ ] 会使用 `cd`
- [ ] 会使用 `cd ..`
- [ ] 会使用 `mkdir`
- [ ] 会使用 `cat`
- [ ] 知道 `.` 和 `..` 大概是什么意思
- [ ] 能区分绝对路径和相对路径
- [ ] 知道 Windows 和 macOS 的路径写法不同
- [ ] 成功创建要求中的 `my-app` 项目结构

请提交：

1. `my-app` 在 VS Code 中的目录截图
2. 终端中执行 `pwd` 和 `ls` 后的截图

---

# 常见问题

## 1. `cd` 后提示找不到目录

例如：

```text
cannot find path
```

或者：

```text
no such file or directory
```

首先执行：

```bash
pwd
```

然后：

```bash
ls
```

检查：

> 你当前目录下真的有那个文件夹吗？

---

## 2. Windows 能使用 `ls` 吗？

如果你使用：

```text
PowerShell
```

可以。

PowerShell 支持：

```powershell
ls
```

虽然 Windows 传统命令是：

```cmd
dir
```

但为了让 Windows 和 macOS 的操作尽可能一致，本课程优先使用：

```bash
ls
```

---

## 3. macOS 为什么没有 C 盘和 D 盘？

这是操作系统文件系统设计不同造成的。

Windows 常见：

```text
C:\
D:\
```

而 macOS 通常从：

```text
/
```

开始组织整个文件系统。

目前你不需要研究更深入的区别。

只要知道：

> 两边路径长得不同，但“目录”和“文件”的概念是一样的。

---

## 4. 为什么教程里有时候是 `/`，有时候是 `\`？

Windows 路径通常：

```text
C:\Users\Arthur
```

macOS 路径：

```text
/Users/arthur
```

所以看到路径时：

> 先判断教程使用的是哪个操作系统。

---

## 5. 我用的是 Windows CMD，不是 PowerShell

建议这套课程优先使用：

```text
PowerShell
```

因为其中很多命令，例如：

```text
pwd
ls
cat
```

和 macOS/Linux 更接近。

VS Code 在 Windows 下通常也可以方便地选择 PowerShell。

---

# Bonus：文件寻宝挑战

创建下面的结构：

```text
CampusHelper/
├── pages/
│   ├── index/
│   └── detail/
├── images/
└── README.md
```

要求：

> 尽量不使用鼠标。

完成后，从：

```text
CampusHelper
```

开始：

进入：

```text
pages/index
```

再返回：

```text
CampusHelper
```

整个过程中只能使用：

```bash
cd
```

---

# Bonus 2：试试这些命令

在自己的测试目录中尝试：

```bash
cd ~
```

然后：

```bash
pwd
```

观察你去了哪里。

再试：

```bash
cd -
```

看看发生什么。

如果你的终端支持这个命令，它通常可以：

> 返回刚才所在的目录。

---