一、理论知识

1. 什么是 Vibe Coding，为什么离不开 Git

Vibe Coding：借助 Cursor、Claude Code 等 AI 工具，通过自然语言让 AI 自动生成、重构、调试代码； AI 编程天然缺陷：

• AI 会直接覆盖、删除、重写大量代码，没有备份机制；
• 多次对话后无法区分哪一套代码可正常运行；
• 想对比 AI 两次不同修改方案非常困难； Git 解决方案：给每一次 AI 修改打版本快照，一键回退、自由切换不同代码方案。

2. Git 核心基础理论

1. 分布式版本控制 不同于传统云端备份，Git 本地完整存储全部项目历史，断网也能管理版本，仅推送 / 拉取时需要网络。
2. 三大区域详解
   • 工作区：本地项目文件夹，肉眼可见源码
   • 暂存区：临时筛选，只把需要记录的改动提交，忽略无关文件
   • 本地仓库：永久版本库，每次 commit 生成唯一版本号，永久留存
3. Git vs GitHub 核心区分

   Git	GitHub/Gitee
   本地软件，命令行工具	云端网页平台
   离线管理版本	云端存储、分享、多人协作
   必须安装	仅需注册账号
   可单独使用	依赖 Git 才能上传代码

   3. Git 标准生命周期

   修改文件 → git add（工作区→暂存区）→ git commit（暂存区→本地仓库）→ git push（本地→云端仓库）

第二部分：完整实操教程（可直接复制写进博客）

前置准备

1. 下载安装 Git：官网下载，安装全程默认下一步；
2. 打开终端（Windows CMD/PowerShell、Mac 终端、Cursor 内置终端）；
3. 全局配置（仅第一次安装执行）

# 配置用户名（Github昵称）
git config --global user.name "你的名字"
# 配置邮箱（注册Github的邮箱）
git config --global user.email "你的邮箱@shturl."
# 查看配置是否生效
git config --global --list

实操 1：本地 Git 基础流程（纯本地，不用 GitHub，新手优先）

步骤 1：创建项目文件夹，初始化 Git 仓库

# 进入你的项目文件夹（Vibe Coding项目目录）
cd /Users/xxx/code/vibe-demo
# 初始化git，生成隐藏.git版本库文件夹
git init

步骤 2：修改代码后，添加文件到暂存区

# 添加所有修改文件到暂存区
git add .
# 仅添加单个文件（推荐精准控制）
git add main.js

步骤 3：提交版本，写入版本说明（关键！方便后续区分 AI 修改记录）

# commit 生成版本快照，引号内写清楚本次改动
git commit -m "初始可用版本，AI第一次生成完整页面"

步骤 4：查看所有历史版本（查看 AI 每一次修改记录）

git log
# 简洁版日志
git log --oneline

步骤 5：Vibe Coding 核心操作：AI 改崩代码，回退旧版本

1. 查看历史版本 ID（一串哈希字符，如abc1234）
2. 一键回退到指定可用版本

git reset --hard abc1234

作用：直接覆盖当前文件，恢复到对应版本，完美解决 AI 改错代码的问题。

实操 2：搭配 GitHub 云端备份（防止本地文件丢失）

1. Github 新建空仓库，复制仓库地址
2. 本地项目关联远程仓库（下方第一块代码）
3. 后续更新推送（AI 修改代码后备份云端）（下方第二块代码）

git remote add origin https://github.com/xxx/vibe-demo.git
# 推送本地所有版本到云端
git push -u origin main

git add .
git commit -m "AI重构页面样式，新增响应式布局"
git push

实操 3：Vibe Coding 专属实战工作流（博客重点）

适配日常用 Cursor/Claude 写代码的标准流程：

1. 项目初始化，创建初始可用版本并提交；
2. 交给 AI 重构 / 新增功能；
3. AI 执行完成后，运行代码测试；
   • 情况 1：代码正常运行 → git add + commit 保存新版本；
   • 情况 2：代码报错、逻辑崩坏 → git reset --hard 回退到上一个稳定版本，重新给 AI 发指令；
4. 阶段性完成功能后 push 到 GitHub 云端备份。

实操 4：进阶小功能（多套 AI 方案对比）

使用分支存储 AI 不同修改方案，不用反复回退覆盖代码：

# 创建新分支，用于测试AI新版方案
git branch ai-new-ui
# 切换分支
git checkout ai-new-ui
# AI在此分支修改代码，测试新方案
# 切换回稳定主分支，原有代码不受影响
git checkout main