Files
2026-09-18 12:16:12 +08:00

1276 lines
14 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 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 -
```
看看发生什么。
如果你的终端支持这个命令,它通常可以:
> 返回刚才所在的目录。
---