Day_2:命令行基础——不用鼠标操作文件
今天暂时不写界面,先掌握 React Native 项目同样离不开的命令行基础。
我们来学习一个程序员每天都会接触的工具:命令行(Command Line)。
预计用时:30~45 分钟
今日目标
完成今天以后,你应该知道:
- 什么是终端
- 什么是当前目录
- 什么是文件和文件夹
- 什么是路径
- 什么是绝对路径和相对路径
- 如何用命令进入、退出和创建目录
- Windows 与 macOS 的命令行有什么区别
- 为什么很多开发命令必须在“正确的目录”中执行
今天不要求背命令。
真正需要建立的是:
“我现在在哪里?我要去哪里?我要操作哪个文件?”
这种命令行思维。
1. 打开终端
根据自己的操作系统选择对应方式。
Windows
可以直接在 VS Code 中点击:
终端
→
新建终端
通常会打开:
PowerShell
你可能看到:
PS C:\Users\Arthur>
macOS
同样可以直接使用 VS Code:
Terminal
→
New Terminal
通常会打开:
zsh
你可能看到:
arthur@MacBook ~ %
也可以使用 macOS 自带的:
终端 Terminal
可以通过:
Command + Space
打开 Spotlight,然后搜索:
Terminal
2. Windows 和 macOS 的命令一样吗?
有些一样,有些不一样。
今天会使用的命令大部分在两个系统中都可以使用。
| 功能 | Windows PowerShell | macOS Terminal |
|---|---|---|
| 查看当前目录 | pwd |
pwd |
| 查看文件 | ls |
ls |
| 进入目录 | cd |
cd |
| 返回上一级 | cd .. |
cd .. |
| 创建目录 | mkdir |
mkdir |
| 查看文本文件 | cat |
cat |
| 清屏 | cls / clear |
clear |
| 创建空文件 | New-Item |
touch |
所以你会发现:
Windows PowerShell 和 macOS Terminal 的基本使用方式其实非常接近。
后面的教程如果没有特别说明:
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 -
看看发生什么。
如果你的终端支持这个命令,它通常可以:
返回刚才所在的目录。
今天最重要的一句话
以后当你看到:
找不到文件
找不到项目
找不到配置
not a git repository
不要第一时间慌。
先执行:
pwd
然后:
ls
问自己:
我现在在哪里?我要操作的东西真的在这里吗?
这会解决很多未来的开发问题。