Frontend Academy · 课时

git init、add、commit 与 status

初始化仓库，使用 git add 暂存更改，创建提交，并阅读 git status 和 git log 以了解历史记录。

git init、add、commit 与 status 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

为什么需要版本控制

Git 会持续记录代码的每一次变化。您可以查看发生了什么变化、何时变化以及为什么变化。错误可以恢复。多人可以共同处理同一个代码库。每个专业团队都会使用 Git。

git init——开始创建仓库

在任意文件夹中运行 git init，即可初始化 Git 仓库。Git 会创建一个隐藏的 .git 目录，用于存储整个项目历史。

mkdir my-project && cd my-project
git init
# Initialized empty Git repository in ./my-project/.git/

三个区域

Git 有三个区域：工作目录（您编辑的文件）、暂存区（标记为下一次提交使用的文件）和仓库（已提交的历史记录）。暂存区可以让您精确构建提交。

git status——有哪些变化？

git status 会显示哪些文件未被跟踪、已修改或已暂存。在工作流程中请经常使用它，以了解当前状态。

git status
# Output:
# On branch main
# Changes not staged for commit:
#   modified: index.html
# Untracked files:
#   styles.css

git add——暂存变化

git add filename 会暂存指定文件。git add . 会暂存当前目录中的所有变化。git add -p 会以交互方式暂存变化（逐个变更块进行）。

git add index.html           # stage one file
git add src/                 # stage a directory
git add .                    # stage everything
git add -p                   # interactive staging

git commit——保存快照

git commit -m 'message' 会为已暂存的变化创建永久快照。提交消息应描述修改的原因，而不是描述修改了什么。每次提交都有唯一的 SHA 哈希值。

git commit -m 'feat: add user authentication form'
git commit -m 'fix: correct email validation regex'
git commit -m 'refactor: extract validation into helper function'

约定式提交

许多团队使用约定式提交格式：type(scope): description。常见类型包括：功能、修复、重构、测试、文档、杂项和性能。这可以实现自动生成变更日志和语义化版本控制。

feat(auth): add Google OAuth login
fix(cart): prevent duplicate item addition
docs(api): add rate limit documentation
chore(deps): upgrade React to 18.3

git log——查看历史记录

git log 会显示提交历史。git log --oneline 会以每次提交一行的紧凑格式显示。git log --graph 会绘制分支结构。

git log --oneline --graph
# * a1b2c3d feat: add dark mode toggle
# * d4e5f6g fix: resolve mobile nav overflow
# * 7h8i9j0 refactor: extract theme hook

git diff——查看变化

git diff 会显示未暂存的变化。git diff --staged 会显示已暂存的变化。git diff HEAD 会显示自上次提交以来的所有变化。

.gitignore 文件

请在 .gitignore 中列出要从版本控制中排除的文件和目录。请始终忽略 node_modules、.env、dist 和 build 目录。GitHub 为每种语言和框架提供了 gitignore 模板。

# .gitignore
node_modules/
dist/
.env
.env.local
*.log
.DS_Store
coverage/

git restore——撤销未暂存的变化

git restore filename 会丢弃工作目录中某个文件的变化，将其恢复为上次提交的版本。这是破坏性操作，变化会丢失。

git restore index.html        # discard unstaged changes
git restore --staged file.js  # unstage without losing changes

快速检查

git add . 会做什么？

回顾：Git 核心命令

git init 启动仓库。git status 显示当前状态。git add 暂存文件。git commit 使用消息保存快照。git log 显示历史记录。git diff 显示变化。.gitignore 排除文件。请始终编写有意义的提交消息，说明原因而不是说明内容。

常见问题解答

「git init、add、commit 与 status」课时是免费的吗？

是的 — 「git init、add、commit 与 status」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「git init、add、commit 与 status」这节课中我会学到什么？

初始化仓库，使用 git add 暂存更改，创建提交，并阅读 git status 和 git log 以了解历史记录。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「git init、add、commit 与 status」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy