Git 版本控制实战指南：从本地仓库到多人协作

一、初识 Git：本地仓库的搭建与管理

1.1 初始化本地仓库

# 进入项目目录（如前端项目文件夹）
cd my-frontend-project

# 初始化 Git 仓库
git init

1.2 添加文件与提交

// index.js（示例前端代码）
console.log('Hello, Git!');

# 将文件添加到暂存区
git add index.js

# 提交到本地仓库
git commit -m "初始化前端项目"

1.3 查看提交历史

git log

二、远程仓库与协作开发

2.1 关联远程仓库

# 创建远程仓库（如 GitHub）后关联
git remote add origin https://github.com/username/my-frontend-project.git

# 推送代码到远程仓库
git push -u origin main

2.2 克隆远程仓库

# 其他开发者克隆项目
git clone https://github.com/username/my-frontend-project.git

三、分支开发模式与团队协作

3.1 创建与切换分支

# 新建功能分支
git checkout -b feature/login-page

# 切换到新分支后修改代码（如添加登录页面）
```javascript
// login.js（新功能代码）
export function renderLoginPage() {
  console.log('渲染登录页面');
}

3.2 合并分支与解决冲突

# 切换回主分支
git checkout main

# 合并功能分支
git merge feature/login-page

冲突解决示例：
假设 index.js 在主分支和功能分支中被修改，Git 会提示冲突。手动编辑文件后：

# 标记冲突已解决
git add index.js
git commit -m "合并登录页面功能"

四、Bug 分支处理与紧急修复

4.1 创建修复分支

# 从主分支派生修复分支
git checkout -b fix/header-bug main

# 修复问题（如调整头部样式）
```javascript
// header.js（修复代码）
export function fixHeaderStyle() {
  document.querySelector('header').style.height = '60px';
}

4.2 合并修复分支

git checkout main
git merge fix/header-bug

五、多人协作与 Rebase 变基

5.1 多人协作流程

1. 开发者 A 创建 feature/api-module 分支并推送。
2. 开发者 B 拉取最新代码并创建 feature/ui-optimization 分支。
3. 开发者 B 提交前执行 git pull --rebase 保持提交历史清晰。

# 变基操作（替代 merge）
git fetch origin
git rebase origin/main

5.2 Rebase 优势

• 线性提交历史：避免合并产生的多余节点。
• 更清晰的版本轨迹：适合频繁交互的团队协作。

---

六、标签管理（Tagging）

6.1 打标签

# 标记稳定版本（如 v1.0.0）
git tag -a v1.0.0 -m "发布版本 v1.0.0"

# 推送标签到远程仓库
git push origin v1.0.0

6.2 查看标签

git tag

七、完整实战案例：前端项目协作流程

7.1 项目初始化与分支策略

# 初始化仓库并设置主分支
git init && git branch -M main

# 创建开发分支（长期迭代）
git checkout -b develop

7.2 功能开发与合并

# 开发者 A 创建特性分支
git checkout -b feature/cart-module develop

# 开发者 B 同时开发另一功能
git checkout -b feature/payment-module develop

八、总结与最佳实践

8.1 提交信息规范

# 良好提交信息示例
git commit -m "新增用户登录功能" -m "包含表单验证与 API 集成"

8.2 分支命名规则

feature/功能描述          // 新功能  
fix/问题描述              // 紧急修复  
release/版本号           // 发布准备  

8.3 冲突预防技巧

• 频繁拉取代码：git pull --rebase 保持本地与远程同步。
• 小步提交：减少单次变更量，降低冲突概率。

通过以上内容，你可以从基础命令到实战应用逐步掌握 Git 的核心技能。结合 JavaScript 项目的实际开发场景，灵活运用分支策略、冲突解决和协作流程，将显著提升团队开发效率。