前端开发之Git 代码仓库管理详细教程

以下是一篇 Git 仓库管理详细教程,内容覆盖安装配置、分支管理、远程协作、历史回溯等全部环节。新手入门学习,老手温故知新,赶紧码住!


一、Git 是什么?

Git 是一个分布式版本控制系统 ,可以记录文件的每次修改,方便多人协作、回溯历史、分支开发与合并。

对开发者来说,"管理 Git 仓库"就是学习如何创建仓库、提交更改、创建分支、与远程仓库交互、解决冲突等核心操作。


二、安装与首次配置

安装 Git

  • Windows :下载 Git for Windows 安装包,按向导安装即可(建议勾选"Git Bash"和"将 Git 添加到 PATH")。
  • macOS :终端执行 xcode-select --install,或通过 Homebrew 安装:brew install git
  • Linux :使用包管理器,如 Ubuntu 执行 sudo apt install git

安装完后验证:

bash 复制代码
git --version

基本配置(必须)

bash 复制代码
git config --global user.name "你的名字"
git config --global user.email "your_email@example.com"

这些信息会嵌入到你的每一次提交中。

其他常用配置:

bash 复制代码
# 换行符自动转换(Windows 推荐 true,mac/Linux 推荐 input)
git config --global core.autocrlf input   # macOS/Linux
# 设置默认分支名为 main
git config --global init.defaultBranch main
# 启用颜色
git config --global color.ui auto

查看全部配置:git config --list


三、创建仓库

1. 从零初始化新仓库

bash 复制代码
mkdir my-project
cd my-project
git init

这会在当前目录生成 .git 隐藏文件夹,用于保存版本数据库。

2. 克隆现有仓库

bash 复制代码
git clone <仓库地址> [本地目录名]
# 示例
git clone https://github.com/user/repo.git
git clone git@github.com:user/repo.git my-folder

克隆后会自动将远程仓库命名为 origin,并拉取所有数据。


四、工作区、暂存区、版本库

理解 Git 的三个区域是正确使用命令的前提:

  • 工作区(Working Directory):你本地能看到的文件。
  • 暂存区(Staging Area / Index):临时保存将要提交的修改。
  • 版本库(Repository).git 目录,存有所有提交历史。

文件状态变化:未跟踪(Untracked) → 已暂存(Staged) → 已提交(Committed) → 已修改(Modified) → 已暂存 循环。


五、基本快照操作

查看当前状态

bash 复制代码
git status

会显示未跟踪的文件、已修改但未暂存的文件、已暂存待提交的文件等。

添加文件到暂存区

bash 复制代码
git add <文件名>      # 添加指定文件
git add .              # 添加当前目录所有改动(包括新文件、修改,不包括删除)
git add -A             # 添加所有改动(新增、修改、删除)
git add -u             # 只添加修改和删除,不添加新文件

提交变更

bash 复制代码
git commit -m "提交信息"

提交信息应简明扼要说明修改内容。

如果要跳过 git add 直接提交已跟踪文件的修改,可用:

bash 复制代码
git commit -a -m "直接提交所有已跟踪文件的修改"

此命令不会添加未跟踪的新文件。

查看修改差异

bash 复制代码
git diff           # 工作区与暂存区的差异
git diff --staged  # 暂存区与最近一次提交的差异(旧版本语法 git diff --cached)
git diff HEAD      # 工作区+暂存区与最新提交的差异
git diff <commit1> <commit2>  # 两次提交之间的差异

删除与移动文件

bash 复制代码
git rm <文件>              # 删除工作区文件并暂存删除操作
git rm --cached <文件>     # 仅从暂存区删除保留工作区文件(停止跟踪)
git mv <旧名> <新名>       # 重命名并自动暂存

六、.gitignore 忽略文件

在仓库根目录创建 .gitignore 文件,列出需要忽略的文件/目录模式,例如:

bash 复制代码
# 忽略 node_modules 目录
node_modules/
# 忽略所有 .log 文件
*.log
# 忽略特定文件
secret.key
# 但不忽略重要的日志文件
!important.log

常用模板参考 GitHub gitignore 仓库


七、查看提交历史

bash 复制代码
git log                    # 显示所有提交(按时间倒序)
git log --oneline          # 单行简洁显示
git log --graph --oneline  # 图形化分支结构
git log --stat             # 显示每次提交修改的文件统计
git log -p                 # 显示具体差异
git log -3                 # 只显示最近3次提交
git log --author="小明"    # 按作者过滤

查看某次提交的详细信息:

bash 复制代码
git show <commit-id>       # 显示该次提交的完整信息和差异
git show HEAD              # 查看最新提交

八、撤销与回退

修改最后一次提交

bash 复制代码
git commit --amend -m "新的提交信息"

如果只是漏加文件,先 git add 再执行该命令,可将其并入上一次提交。
注意 :若该提交已推送,避免使用 amend 改写公共历史。

取消暂存(从暂存区移回工作区)

bash 复制代码
git restore --staged <文件>      # 新版命令(推荐)
git reset HEAD <文件>            # 旧版等效命令

丢弃工作区的修改

bash 复制代码
git restore <文件>               # 新命令
git checkout -- <文件>           # 旧命令

这会用暂存区(或最新提交)的版本覆盖工作区文件,修改无法恢复。

版本回退(reset)

git reset 可以移动 HEAD 指针,有三种模式:

bash 复制代码
git reset --soft HEAD~1   # 撤销提交,保留暂存区和工作区的修改
git reset --mixed HEAD~1  # 默认:撤销提交和暂存区,保留工作区修改
git reset --hard HEAD~1   # 彻底回退:修改提交、暂存区、工作区全部丢弃
  • HEAD~1 表示回退到上一个提交,也可用具体 commit-id。
  • --hard 非常危险,工作区的未提交修改会永久丢失

安全撤销(revert)

bash 复制代码
git revert <commit-id>

会生成一个新提交,用于反向抵消指定提交的改动。历史记录中会保留撤销记录,适合已推送的公共提交。


九、远程仓库操作

关联远程仓库

bash 复制代码
git remote add origin <远程地址>
# 示例
git remote add origin git@github.com:user/repo.git

查看远程仓库信息

bash 复制代码
git remote -v          # 显示远程地址
git remote show origin # 查看详细信息

推送本地提交到远程

bash 复制代码
git push origin <分支名>
# 首次推送并建立上游跟踪
git push -u origin main

之后在该分支直接 git push 即可。

从远程获取数据

bash 复制代码
git fetch origin          # 只拉取所有分支的最新提交,不合并
git fetch origin <分支名>

fetch 是安全的,不会影响本地工作。

拉取并合并

bash 复制代码
git pull origin <分支名>  # 相当于 git fetch + git merge

如果希望拉取后变基而非合并,可使用 git pull --rebase

处理推送冲突

如果远程分支比本地新,push 会被拒绝。解决流程:

bash 复制代码
git fetch origin
git merge origin/main    # 或 git rebase origin/main
# 解决冲突(如需要)
git push origin main

删除远程分支

bash 复制代码
git push origin --delete <分支名>

十、分支管理

分支是什么?

分支是一条独立的开发线,默认分支通常为 main(或 master)。分支指针指向该线上的最新提交。

查看分支

bash 复制代码
git branch            # 列出本地分支,*号标记当前分支
git branch -r         # 列出远程跟踪分支
git branch -a         # 列出所有分支

创建分支

bash 复制代码
git branch <新分支名>        # 创建但不切换
git branch <新分支> <起点>   # 基于指定提交或分支创建

切换分支

推荐使用新版 switch 命令,语义更清晰:

bash 复制代码
git switch <分支名>          # 切换到已有分支
git switch -c <新分支>       # 创建并切换

旧命令 git checkout <分支名> 同样可行。

合并分支

将某分支的改动合并到当前分支:

bash 复制代码
git merge <要合并的分支>
  • Fast-forward 合并:当要合并的分支直接领先于当前分支时,指针直接前移,不产生新提交。
  • 需要保留合并记录时,使用 git merge --no-ff <分支>,会强制生成一个合并提交。

解决合并冲突

如果两个分支修改了同一文件的同一部分,合并时会冲突。

Git 会在冲突文件中标记:

markdown 复制代码
<<<<<<< HEAD
当前分支的代码
=======
被合并分支的代码
>>>>>>> feature-branch

手动编辑文件解决冲突后:

bash 复制代码
git add <已解决冲突的文件>
git commit           # 完成合并提交(Git 会生成默认合并信息)

也可使用 git merge --abort 放弃合并。

变基(rebase)

将当前分支的提交"移植"到另一分支的最新提交之后,产生更线性的历史。

bash 复制代码
git rebase <目标分支>
# 例如在 feature 分支上执行:
git switch feature
git rebase main

变基时也可能冲突,解决后 git add,再执行 git rebase --continue,或 --abort 取消。
黄金法则:不要对已经推送到公共仓库的提交执行 rebase。

删除分支

bash 复制代码
git branch -d <分支名>       # 安全删除(仅当已合并)
git branch -D <分支名>       # 强制删除

远程分支跟踪

创建本地分支并跟踪远程分支:

bash 复制代码
git switch -c <本地分支> origin/<远程分支>
# 或快捷方式
git switch <本地分支名>     # 当远程有同名分支且只有一个远程

设置已有分支跟踪远程:

bash 复制代码
git branch -u origin/<远程分支>

十一、标签(Tag)

标签常用于标记发布版本。

创建标签

bash 复制代码
git tag <标签名>                 # 轻量标签(仅引用)
git tag -a <标签名> -m "说明"    # 附注标签(含作者、日期、信息,推荐)
# 给历史提交打标签
git tag -a v0.9 <commit-id> -m "beta版"

查看标签

bash 复制代码
git tag
git show <标签名>

推送标签

bash 复制代码
git push origin <标签名>   # 推送单个标签
git push origin --tags     # 推送所有标签

删除标签

bash 复制代码
git tag -d <标签名>                # 删除本地
git push origin --delete <标签名>  # 删除远程

十二、储藏(Stash)

当手头工作未完成,需要立即切换分支处理其他任务时,可先"储藏"当前修改。

bash 复制代码
git stash               # 储藏工作区和暂存区的修改(未跟踪文件需加 -u)
git stash -u             # 包括未跟踪文件
git stash list           # 查看储藏列表
git stash apply [stash@{n}]  # 恢复最近的储藏(不删除记录)
git stash pop            # 恢复并删除储藏记录
git stash drop stash@{0} # 删除指定储藏

十三、查看与追溯

逐行溯源

bash 复制代码
git blame <文件>         # 显示每行代码最后修改的提交、作者
git blame -L 10,20 <文件> # 只看第10~20行

二分查找引入问题的提交

bash 复制代码
git bisect start
git bisect bad HEAD       # 标记当前提交有问题
git bisect good v1.0      # 标记一个已知无问题的提交
# Git 会自动切换到一个中间提交,测试后标记 good 或 bad
# 重复直到找到第一个坏提交
git bisect reset          # 结束二分查找

搜索代码

bash 复制代码
git grep "关键词"          # 搜索工作区文件内容
git grep -n "关键词" HEAD  # 显示行号

十四、重写提交历史(谨慎操作)

交互式变基(合并/修改/删除提交)

bash 复制代码
git rebase -i HEAD~3      # 编辑最近3次提交

在编辑器中可执行以下操作:

  • pick:保留提交
  • reword:修改提交信息
  • squash:合并到上一个提交并保留信息
  • fixup:合并但丢弃提交信息
  • drop:删除提交

核弹级工具(慎用)

git filter-branchgit filter-repo 可用于从整个历史中删除文件或重写作者信息,一般只在不公开仓库中使用。


十五、典型协作工作流简例

main 分支为稳定产品线,feature 分支开发新功能为例:

bash 复制代码
git clone <仓库>
git switch -c feature-login main
# 编码...
git add .
git commit -m "完成登录页面"
# 拉取远端 main 最新代码,变基保持整洁
git fetch origin
git rebase origin/main
# 解决冲突后
git push -u origin feature-login
# 在代码托管平台发起 Pull Request,合并后删除特性分支
git switch main
git pull origin main
git branch -d feature-login

十六、常用命令速查表

操作 命令
初始化仓库 git init
克隆仓库 git clone <url>
查看状态 git status
跟踪文件 git add <file>
提交更改 git commit -m "message"
显示差异 git diff / git diff --staged
查看历史 git log --oneline --graph
撤销工作区修改 git restore <file>
撤销暂存 git restore --staged <file>
修改上次提交 git commit --amend
创建分支 git switch -c <branch>
切换分支 git switch <branch>
合并分支 git merge <branch>
变基 git rebase <target>
推送 git push origin <branch>
拉取合并 git pull
储藏 git stash / git stash pop
打标签 git tag -a v1.0 -m "release"
回退提交 git reset --hard <commit> (危险)
安全撤销 git revert <commit>
查看远程 git remote -v
关联远程 git remote add origin <url>

遵循上述工作流与命令,你就能自信地管理 Git 仓库的代码版本、分支与协作。建议在实践过程中多配合 git statusgit log 观察仓库变化,加深理解。

相关推荐
To_OC4 小时前
别再串行写 await 了,Promise.all 才是并行请求的正确打开方式
前端·javascript·promise
vipbic4 小时前
中后台越做越乱后,我用插件化把它救回来了
前端·vue.js
Hyyy4 小时前
Computer Use 适合做什么,不适合做什么——一次真实使用后的思考
前端
小和尚同志5 小时前
前端 AI 单元测试思考与落地
前端·人工智能·aigc
invicinble6 小时前
c端系统,其实更像一个信息展示平台
前端
李姆斯7 小时前
管理是否可以被完全量化
前端·产品经理·团队管理
名字还没想好☜7 小时前
Next.js 中间件实战:鉴权、重定向与 A/B 分流
开发语言·前端·javascript·中间件·react·next.js
广州灵眸科技有限公司8 小时前
瑞芯微RV1126B开发板(EASY-EAI-PI2) INI文件操作
java·前端·javascript·网络·人工智能
梦想三三8 小时前
Git与GitHub基础入门:从零开始掌握版本控制与代码托管(完整图文教程)
人工智能·git·elasticsearch·github
kaiking_g8 小时前
vue项目中,静态导入 vs 动态导入 详解
前端·javascript·vue.js