Day 13 - Git 实战练习

qq_40609424

149人浏览 · 2026-06-06 09:54:07

qq_40609424 · 2026-06-06 09:54:07 发布

Day 13 - Git 实战练习

今天学完你能做什么

用 Git 管理自己的代码
理解工作区、暂存区、仓库的关系
掌握日常开发 90% 用到的 Git 命令
能处理分支合并和冲突

一、Git 是什么？——代码的"时光机"

没有 Git：    代码改坏了？回不去了 😭
有了 Git：    代码改坏了？回到昨天的版本 ✅
              想看一个月前写了什么？切过去看看 ✅
              多人同时改同一个文件？自动合并 ✅

Git = 版本控制系统。 它把你的每次修改都"拍了一张照片"，随时可以翻回去看。

二、Git 的三个区域——行李箱的比喻

┌──────────────┐    git add    ┌──────────────┐    git commit   ┌──────────────┐
│   工作区      │  ──────────→  │   暂存区      │  ────────────→  │   仓库        │
│  (Working)   │               │  (Staging)    │                │  (Repository) │
│              │               │              │                │              │
│  你写代码     │               │  打包行李     │                │  封箱归档     │
│  随便改      │               │  选哪些提交   │                │  永久记录     │
└──────────────┘               └──────────────┘                └──────────────┘

类比：出差收拾行李

工作区 → 你把衣服从衣柜拿出来，摊在床上
暂存区 → 把要带的衣服叠好放进行李箱
仓库 → 拉上拉链，贴上标签"2024年5月出差行李"

三、日常开发 90% 用到的命令

3.1 第一天：开始一个项目

# 初始化 Git 仓库（项目根目录执行，只需一次）
git init

# 配置用户名和邮箱（全局配置，只需一次）
git config --global user.name "你的名字"
git config --global user.email "你的邮箱"

3.2 日常工作流

# 1. 查看当前状态（最常用的命令！）
git status

# 2. 把修改添加到暂存区
git add 文件名          # 添加指定文件
git add .               # 添加所有修改（最常用）

# 3. 提交（拍一张快照）
git commit -m "写清楚你做了什么改动"

# 4. 查看提交历史
git log --oneline       # 简洁版，一行一条
git log                 # 详细版

3.3 一个完整的工作流示例

# 你写了新功能
git status                          # 看看改了哪些文件

git add src/login.ts                # 把 login.ts 加入暂存区
git add src/register.ts             # 把 register.ts 加入暂存区

git commit -m "feat: 添加登录和注册功能"  # 提交

# 又改了一个 bug
git add src/login.ts
git commit -m "fix: 修复登录密码验证错误"

# 加个样式
git add src/style.css
git commit -m "style: 调整登录页样式"

四、提交信息规范——写好 commit message

# ❌ 不好的提交信息
git commit -m "修改"
git commit -m "111"
git commit -m "更新代码"

# ✅ 好的提交信息（约定式提交）
git commit -m "feat: 添加用户搜索功能"
git commit -m "fix: 修复分页总数显示错误"
git commit -m "docs: 更新 API 文档"
git commit -m "refactor: 重构用户模块代码结构"
git commit -m "style: 统一按钮圆角样式"

前缀	含义	例子
feat	新功能	`feat: 添加导出PDF功能`
fix	修 bug	`fix: 修复登录超时问题`
docs	文档	`docs: 更新安装说明`
style	样式	`style: 调整间距`
refactor	重构	`refactor: 提取公共方法`
test	测试	`test: 添加单元测试`
chore	杂务	`chore: 更新依赖版本`

五、分支——平行宇宙

5.1 为什么需要分支？

没有分支：所有人都在主线上改 → 互相踩脚 → 代码一锅粥

有分支：
main ─────●──────●──────────●────→ 稳定版本
            \                  /
feature-a  ──●──●──●────────   → 开发新功能A（不影响别人）
                  \
feature-b       ──●──●──●──   → 开发新功能B（也不影响别人）

5.2 分支常用命令

# 查看分支
git branch                  # 本地分支
git branch -a               # 所有分支（含远程）

# 创建分支
git branch feature-login    # 创建名为 feature-login 的分支

# 切换分支
git checkout feature-login  # 切到 feature-login 分支
git switch feature-login    # 新版 Git 推荐这个

# 创建并切换（一步到位）
git checkout -b feature-payment  # 创建 feature-payment 并切过去
git switch -c feature-payment    # 新版推荐

# 合并分支
git checkout main           # 先切到目标分支
git merge feature-login     # 把 feature-login 合并进来

# 删除分支
git branch -d feature-login # 删除已合并的分支
git branch -D feature-login # 强制删除

六、撤销操作——后悔药

# 改坏了工作区的文件，想回到上次提交的状态
git checkout -- 文件名       # 丢弃工作区修改
git restore 文件名           # 新版推荐

# 已经 git add 了，想取消暂存
git reset HEAD 文件名        # 从暂存区移除，但保留工作区修改
git restore --staged 文件名  # 新版推荐

# 已经 commit 了，想撤销提交（但保留修改）
git reset --soft HEAD~1     # 撤销最近一次 commit，修改回到暂存区

# 已经 commit 了，想完全撤销（连修改都不要了）
git reset --hard HEAD~1     # ⚠️ 危险！修改彻底消失

七、解决冲突——当两个人改了同一个地方

场景：你和同事都改了 login.ts 的同一行

Git 会标记冲突：
<<<<<<< HEAD          （当前分支的版本）
const port = 3000;
=======               （分隔线）
const port = 8080;
>>>>>>> feature-b     （要合并进来的版本）

你需要手动选一个（或改写）：
const port = 8080;    ← 改成你想要的

然后：
git add login.ts
git commit -m "merge: 合并 feature-b，解决端口冲突"

八、远程仓库——GitHub / GitLab

# 关联远程仓库
git remote add origin https://github.com/用户名/项目.git

# 推送到远程
git push origin main            # 推送 main 分支
git push origin feature-login   # 推送 feature-login 分支

# 从远程拉取
git pull origin main            # 拉取并合并 main 分支

# 克隆远程仓库
git clone https://github.com/用户名/项目.git

九、实战场景速查

# 场景1：忘记切分支就直接改了
git stash               # 暂存当前修改
git checkout -b new-branch
git stash pop           # 恢复修改

# 场景2：想看看某个文件的历史
git log -- 文件名
git log -p -- 文件名    # 看每一次的具体改动

# 场景3：提交信息写错了
git commit --amend -m "新的提交信息"

# 场景4：漏了文件没提交
git add 漏掉的文件
git commit --amend --no-edit  # 追加到上一次提交

# 场景5：回退到某个历史版本看看
git checkout 提交哈希值  # 临时切过去（头指针分离状态）
git checkout main       # 回到最新

十、.gitignore —— 哪些文件不管

在项目根目录创建 .gitignore 文件：

# 依赖
node_modules/

# 编译输出
dist/
build/

# 环境变量（含密码！）
.env
.env.local

# 系统文件
.DS_Store
Thumbs.db

# IDE 配置
.vscode/
.idea/

# 日志
*.log

今日小结

┌────────────────────────────────────────────┐
│                                            │
│  工作区 → git add → 暂存区 → git commit → 仓库 │
│                                            │
│  常用命令：                                  │
│  git status     看状态（最常用！）            │
│  git add .      全部暂存                     │
│  git commit -m  提交                        │
│  git log        看历史                      │
│  git branch     分支管理                     │
│  git checkout   切换分支                     │
│  git merge      合并                        │
│  git pull/push  拉取/推送                    │
│                                            │
│  口诀：add 暂存 commit 存，branch 分支       │
│         merge 合，push 推上去               │
│                                            │
└────────────────────────────────────────────┘