arthur
14 KiB
Day_2：命令行基础——不用鼠标操作文件
今天暂时不写界面，先掌握任何项目都离不开的基础： 命令行（Command Line）。
预计用时：30～45 分钟
今日目标
完成今天以后，你应该知道：
- 什么是终端
- 什么是当前目录
- 什么是文件和文件夹
- 什么是路径
- 什么是绝对路径和相对路径
- 如何用命令进入、退出和创建目录
- Windows 与 macOS 的命令行有什么区别
- 为什么很多开发命令必须在“正确的目录”中执行
今天需要理解的是：
“我现在在哪里？我要去哪里？我要操作哪个文件？”
这种命令行思维。
1. 打开终端
根据自己的操作系统选择对应方式。
Windows
可以直接在 VS Code 中点击：
终端 → 新建终端
通常会打开：
PowerShell
你可能看到：
PS C:\Users\Arthur\...\your_project>
也可以使用 Windows 自带的：
cmd 或 Powershell
通过：
Win + R
打开“运行”，然后搜索：
cmd 或 Powershell
macOS
同样可以直接使用 VS Code：
终端 → 新建终端
通常会打开：
zsh
你可能看到：
arthur@MacBook ~ %
也可以使用 macOS 自带的：
终端 Terminal
可以通过：
Command + Space
打开 Spotlight，然后搜索：
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 |
后面的教程如果没有特别说明：
pwd
ls
cd
mkdir
cat
这些命令 Windows 和 macOS 都可以直接使用。
3. 我现在在哪里？
在终端输入：
pwd
然后按 Enter。
pwd 可以理解成：
Print Working Directory
也就是：
显示当前工作目录。
Windows 可能看到
C:\Users\Arthur
macOS 可能看到
/Users/arthur
这行文字表达的概念是：
你当前所在的位置。
这叫：
当前工作目录
Current Working Directory
以后很多常见报错，例如：
找不到文件
找不到项目
不是 Git 仓库
找不到 package.json
找不到配置文件
原因都有可能非常简单：
你站错文件夹了。
所以以后遇到奇怪问题，可以养成第一个习惯：
pwd
先确认：
我现在到底在哪里？
4. 看看当前目录有什么
输入：
ls
Windows
可能看到：
Desktop
Documents
Downloads
Pictures
...
macOS
也可能看到：
Desktop
Documents
Downloads
Movies
Pictures
...
ls 的作用就是：
查看当前目录中有哪些文件和文件夹。
5. 文件系统可以想象成一棵树
假设你的电脑里有：
Documents/
├── homework/
├── APP/
│ ├── CampusHelper/
│ └── notes/
└── test.txt
如果你现在位于：
Documents
那么：
APP
就是你当前目录下面的一个文件夹。
而：
CampusHelper
位于：
APP
里面。
6. 进入一个目录
使用：
cd 目录名
例如：
cd Documents
然后：
pwd
你会发现当前位置改变了。
如果目录名中有空格怎么办？
假设有：
My Projects
可以写：
cd "My Projects"
Windows 和 macOS 都建议养成这个习惯：
路径中有空格时使用引号。
不过日常开发目录最好尽量使用：
CampusHelper
app-rookie
my_project
这种没有空格的名字。
7. 返回上一级目录
输入：
cd ..
这里：
..
代表：
上一级目录。
例如：
Documents/APP/CampusHelper
执行：
cd ..
之后：
Documents/APP
再执行一次：
cd ..
就变成：
Documents
8. . 又是什么？
在命令行中：
.
代表：
当前目录。
而：
..
代表：
上一级目录。
9. 创建文件夹
找一个你准备存放练习的位置。
推荐：
Windows
例如：
Documents
或者：
D:\Projects
macOS
例如：
Documents
或者在自己的用户目录下建立：
Projects
输入：
mkdir APP-Rookie
然后：
ls
应该可以看到：
APP-Rookie
进入它：
cd APP-Rookie
确认：
pwd
10. 创建多个目录
继续输入：
mkdir Day_2
mkdir projects
mkdir notes
然后：
ls
应该看到：
Day_2
projects
notes
到这里： 完全不用鼠标 的情况下，你已经创建了三个文件夹。
11. 创建一个文件
这里 Windows 和 macOS 会有一点区别。
Windows PowerShell
可以使用：
New-Item README.md
也可以直接：
echo "Hello APP" > README.md
macOS
可以使用：
touch README.md
然后写入内容：
echo "Hello APP" > README.md
两个系统都可以执行：
ls
应该看到：
README.md
12. 查看文件内容
Windows PowerShell 和 macOS 都可以：
cat README.md
应该看到：
Hello APP
13. 什么是路径？
这是今天最重要的知识之一。
假设：
APP-Rookie/
├── Day_2/
├── projects/
├── notes/
└── README.md
如果你现在位于：
APP-Rookie
然后执行：
cd Day_2
这里的：
Day_2
就是：
相对路径
意思是：
从“我现在的位置”出发，怎么找到它。
14. 什么是绝对路径？
绝对路径相当于：
从最开始的位置写出的完整地址。
Windows 示例
C:\Users\Arthur\Documents\APP-Rookie\Day_2
或者：
D:\Projects\APP-Rookie\Day_2
Windows 通常以：
C:\
D:\
这样的盘符开始。
macOS 示例
/Users/arthur/Documents/APP-Rookie/Day_2
macOS 的路径通常从：
/
开始。
可以简单理解：
绝对路径
=
完整地址
相对路径
=
从当前位置怎么走
15. Windows 和 macOS 路径最大的区别
注意观察：
Windows
C:\Users\Arthur\Documents
通常使用：
\
macOS
/Users/arthur/Documents
使用：
/
以后复制别人教程里的命令时要注意这一点。
不过很多现代开发工具本身会帮助处理路径差异，所以目前不需要过度担心。
16. ~ 是什么？
macOS 用户经常会看到：
~
例如终端：
arthur@MacBook ~ %
这里：
~
代表：
当前用户的 Home 目录。
例如：
/Users/arthur
所以：
cd ~
可以回到自己的用户目录。
Windows PowerShell 也支持
cd ~
通常会进入：
C:\Users\你的用户名
所以这是两个系统都很方便的命令。
17. 清屏
终端里东西太多时，可以清空屏幕。
Windows
cls
或者：
clear
macOS
clear
注意：
清屏并不会删除任何文件。
它只是把终端显示内容清掉。
今日任务：不用鼠标搭建一个项目
现在开始今天的正式任务。
要求：
尽量不要使用鼠标创建文件和文件夹。
请创建：
my-app/
├── src/
│ ├── pages/
│ └── utils/
├── docs/
├── assets/
└── README.md
并让：
README.md
中包含：
My First APP Project
任务第一步
先创建项目：
mkdir my-app
进入：
cd my-app
任务第二步
想一想：
怎样创建：
src
docs
assets
？
如果已经知道，就不要继续看提示。
提示 1
可以：
mkdir src
mkdir docs
mkdir assets
任务第三步
现在需要：
src/
├── pages/
└── utils/
想一想：
应该先进入哪个目录？
提示 2
cd src
然后：
mkdir pages
mkdir utils
完成之后：
cd ..
返回：
my-app
任务第四步：创建 README
Windows PowerShell
可以：
echo "My First APP Project" > README.md
macOS
同样可以：
echo "My First APP Project" > README.md
所以这里两个系统完全一样。
查看结果
执行：
ls
然后：
cat README.md
应该看到：
My First APP Project
完整参考解答
Windows PowerShell 和 macOS 都可以直接使用下面这组命令：
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
查看：
ls
然后：
cat README.md
进入：
cd src
查看：
ls
应该看到：
pages
utils
今日验收标准
完成以下内容即可通过 Day_2：
- 知道什么是终端
- 会使用
pwd - 会使用
ls - 会使用
cd - 会使用
cd .. - 会使用
mkdir - 会使用
cat - 知道
.和..大概是什么意思 - 能区分绝对路径和相对路径
- 知道 Windows 和 macOS 的路径写法不同
- 成功创建要求中的
my-app项目结构
请提交：
my-app在 VS Code 中的目录截图- 终端中执行
pwd和ls后的截图
常见问题
1. cd 后提示找不到目录
例如：
cannot find path
或者：
no such file or directory
首先执行：
pwd
然后：
ls
检查：
你当前目录下真的有那个文件夹吗？
2. Windows 能使用 ls 吗？
如果你使用：
PowerShell
可以。
PowerShell 支持：
ls
虽然 Windows 传统命令是：
dir
但为了让 Windows 和 macOS 的操作尽可能一致，本课程优先使用：
ls
3. macOS 为什么没有 C 盘和 D 盘？
这是操作系统文件系统设计不同造成的。
Windows 常见：
C:\
D:\
而 macOS 通常从：
/
开始组织整个文件系统。
目前你不需要研究更深入的区别。
只要知道：
两边路径长得不同，但“目录”和“文件”的概念是一样的。
4. 为什么教程里有时候是 /，有时候是 \？
Windows 路径通常：
C:\Users\Arthur
macOS 路径：
/Users/arthur
所以看到路径时：
先判断教程使用的是哪个操作系统。
5. 我用的是 Windows CMD，不是 PowerShell
建议这套课程优先使用：
PowerShell
因为其中很多命令，例如：
pwd
ls
cat
和 macOS/Linux 更接近。
VS Code 在 Windows 下通常也可以方便地选择 PowerShell。
Bonus：文件寻宝挑战
创建下面的结构：
CampusHelper/
├── pages/
│ ├── index/
│ └── detail/
├── images/
└── README.md
要求：
尽量不使用鼠标。
完成后，从：
CampusHelper
开始：
进入：
pages/index
再返回：
CampusHelper
整个过程中只能使用：
cd
Bonus 2：试试这些命令
在自己的测试目录中尝试：
cd ~
然后：
pwd
观察你去了哪里。
再试：
cd -
看看发生什么。
如果你的终端支持这个命令，它通常可以：
返回刚才所在的目录。