delorex/test-repo
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(docs): integrate version2 curriculum and stage-3 updates

Browse Source 
概要
- 将 version2 分支的课程结构重构、第三阶段章节新增、示例资源迁移、高级 RAG 文档与 Vercel 部署配置等整合为 main 上的一次汇总提交

内容导航与 README 调整
- 更新 README 的总体介绍文案，引入“第零阶段 + 第一到第三阶段”的完整学习路径描述
- 将原先的“三阶段实战路径”说明替换为新版分阶段描述，突出从小游戏到跨平台复杂应用的学习节奏
- 删除已过时的“第二次更新将在分支 version2 合并到主分支”的提示，改为直接以 main 为主线
- 统一 README 顶部标题和排版风格，保证中英文导航、徽章展示等视觉结构一致

课程结构与章节导航更新
- 调整 docs 目录下的学习阶段导航结构，使 README 中的导航表与各 stage 实际目录对齐
- 补全并创建 stage-3 相关章节入口文件，用于承载高级阶段的课程内容
- 新增或更新以下章节入口：
  - 高级核心技能：
    - docs/stage-3/core-skills/3.1-mcp-claudecode-skills/index.md
    - docs/stage-3/core-skills/3.2-long-running-tasks/index.md
  - 多平台开发：
    - docs/stage-3/cross-platform/3.3-wechat-miniprogram/index.md
    - docs/stage-3/cross-platform/3.4-wechat-miniprogram-backend/index.md
    - docs/stage-3/cross-platform/3.5-android-app/index.md
    - docs/stage-3/cross-platform/3.6-ios-app/index.md
  - 个人品牌：
    - docs/stage-3/personal-brand/3.7-personal-website-blog/index.md
- 保持 stage-0、stage-1、stage-2 既有章节结构不变的前提下，对导航表格进行排版和链接校正，使整体课程地图清晰、可点击

示例与图片资源重组
- 将原先位于 docs/examples/example1/images/ 下的微信小程序示例图片，整体迁移到 stage-3 的正式课程路径中：
  - 目标路径：docs/stage-3/3.3-how-to-build-a-wechat-miniprogram/example1/images/
- 通过 rename 方式保留 git 历史关系，避免图片资源被视为完全新增，从而方便后续追踪
- 为微信小程序示例新增 index 页面：
  - docs/stage-3/3.3-how-to-build-a-wechat-miniprogram/example1/index.md
- 使该示例在“高级三：多平台开发：如何构建微信小程序”章节中有清晰的入口，对应实际实战内容

高级 RAG 与 AI 进阶文档
- 新增一篇系统介绍 RAG 的高级文档：
  - docs/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future.md
- 覆盖内容包括：RAG 的基本概念、典型架构、工作流程以及未来演进方向，为第三阶段的复杂应用提供知识检索基础
- 配套引入多张插图，帮助读者从架构图和流程视角理解 RAG：
  - docs/stage-3/ai-advanced/3.a1-rag-introduction/images/image1.png ~ image15.png

部署与工程配置
- 新增 vercel.json 配置文件，为项目在 Vercel 上的部署提供基础配置
  - 明确文档构建产物的输出路径和静态站点托管方式
  - 为之后的一键部署和自动化预览打下基础

依赖与锁文件更新
- 调整 package.json 中与新版文档结构和部署相关的配置，保持脚本和依赖与当前课程形态同步
- 更新 package-lock.json，以反映最新的依赖树和版本锁定状态
- 保证在执行 npm install / npm run build 时，依赖环境与 version2 中的实际使用情况一致

兼容性与行为说明
- 该提交通过 npm run build 验证，确保在整合 version2 内容后，VitePress 构建过程正常完成
- main 分支上的历史被压缩为一条有语义的“第二次大更新”提交，详细的开发过程仍保留在 version2 分支，用于后续需要时回溯
This commit is contained in:
sanbuphy
2026-01-12 12:21:35 +08:00
parent 307a37cdb9
commit a4b583b13f
632 changed files with 18082 additions and 8092 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/index.md
+239
View File
@@ -0,0 +1,239 @@
---
layout: home
hero:
name: 'Easy-Vibe'
text: 'Learn Vibe Coding from 0 to 1'
tagline:
- 不止是写代码，而是成为集产品、设计、全栈开发于一身的超级个体。
- 从想法到原型，从原型到上线，把每一次输出变成可交付的产品。
- 让 AI 成为你的搭档：更快、更稳、更有创造力。
- 用系统化的学习路径，构建你的个人技术与产品护城河。
actions:
- theme: brand
text: 开启学习之旅
link: /stage-0/0.1-learning-map/
- theme: alt
text: ⭐️ github 加速更新
link: https://github.com/datawhalechina/easy-vibe
features:
- title: 零基础友好
details: 专为非技术背景设计。从“会说话就会编程”开始，通过贪吃蛇等小游戏快速上手，打破技术恐惧。
- title: 循序渐进的实战路径
details: 独创“三阶段”学习法。从 AI 产品经理思维，到全栈开发落地，再到复杂应用构建，步步为营。
- title: Vibe Coding 新范式
details: 掌握 AI 时代的编程核心。学会与 AI 结对编程，让 IDE 成为你的最强搭档。
- title: 真实项目驱动
details: 拒绝玩具代码。亲手构建 Web 原型、全栈应用、微信小程序，将每一个想法真正落地为产品。
---
<div align="center" style="margin-top: 40px; margin-bottom: 40px;">
<h2 style="border: none; font-size: 2rem; font-weight: 700; margin-bottom: 20px;">为什么选择 Easy-Vibe？</h2>
<p style="font-size: 1.2rem; color: var(--vp-c-text-2); max-width: 800px; margin: 0 auto; line-height: 1.6;">
2025 年是 AI 编程的元年。越来越多的人开始尝试 AI 编程，但往往止步于简单的 Demo。<br>
Easy-Vibe 致力于填补这一空白，教你如何像专业人士一样，用 AI 组织开发流程，从原型到上线，打通产品落地的最后一公里。
</p>
</div>
<div class="stage-container">
<div class="stage-card">
<div class="stage-icon">🌱</div>
<h3>Stage 0: 纯新手</h3>
<p>适合产品、运营及非技术背景。通过做游戏理解 AI 编程逻辑，建立信心。</p>
<a href="/stage-0/0.1-learning-map/">查看详情 →</a>
</div>
<div class="stage-card">
<div class="stage-icon">🎨</div>
<h3>Stage 1: AI 产品经理</h3>
<p>掌握 Vibe Coding 工作流。学会拆解需求，独立完成高保真 Web 应用原型。</p>
<a href="/stage-1/1.1-introduction-to-ai-ide/">查看详情 →</a>
</div>
<div class="stage-card">
<div class="stage-icon">💻</div>
<h3>Stage 2: 初中级开发</h3>
<p>深入全栈开发。前端组件化、数据库设计、后端 API 开发与部署上线。</p>
<a href="/project/chapter4/chapter4-lets-build-hogwarts-portraits">查看详情 →</a>
</div>
<div class="stage-card">
<div class="stage-icon">🚀</div>
<h3>Stage 3: 高级开发</h3>
<p>构建复杂跨平台应用。微信小程序实战，挑战更高阶的 AI 原生应用开发。</p>
<a href="/stage-3/3.3-how-to-build-a-wechat-miniprogram/example1/index">查看详情 →</a>
</div>
</div>
<style>
.VPHomeHero .text {
font-size: 1.8rem;
}
.stage-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
max-width: 1152px;
margin: 0 auto;
padding: 20px;
}
.stage-card:nth-child(1) { --card-color: #10b981; } /* Green for Stage 0 */
.stage-card:nth-child(2) { --card-color: #3b82f6; } /* Blue for Stage 1 */
.stage-card:nth-child(3) { --card-color: #8b5cf6; } /* Purple for Stage 2 */
.stage-card:nth-child(4) { --card-color: #f59e0b; } /* Orange for Stage 3 */
.stage-card {
background-color: var(--vp-c-bg-soft);
border-radius: 12px;
padding: 24px;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
border: 1px solid var(--vp-c-bg-soft);
position: relative;
overflow: hidden;
}
.stage-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background-color: var(--card-color);
opacity: 0.5;
transition: opacity 0.2s;
}
.stage-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border-color: var(--card-color);
}
.stage-card:hover::before {
opacity: 1;
}
.stage-icon {
font-size: 3rem;
margin-bottom: 16px;
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}
.stage-card h3 {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 8px;
color: var(--vp-c-text-1);
transition: color 0.2s;
}
.stage-card:hover h3 {
color: var(--card-color);
}
.stage-card p {
font-size: 0.9rem;
color: var(--vp-c-text-2);
margin-bottom: 16px;
line-height: 1.5;
}
.stage-card a {
color: var(--card-color);
font-weight: 500;
text-decoration: none;
font-size: 0.9rem;
display: inline-flex;
align-items: center;
transition: transform 0.2s;
}
.stage-card a:hover {
text-decoration: none;
transform: translateX(4px);
}
</style>
<div class="footer-cta">
<p class="love-text">Made with ❤️ by Open Source Contributors</p>
<h3 class="support-title">觉得有帮助？</h3>
<p class="support-text">你的 Star 是我们持续更新的动力 🚀</p>
<div class="github-badge">
<a href="https://github.com/datawhalechina/easy-vibe" target="_blank" rel="noopener noreferrer">
<img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?style=social&label=Star on GitHub" alt="GitHub stars"/>
</a>
</div>
</div>
<style>
/* ... existing styles ... */
.footer-cta {
margin-top: 100px;
padding: 40px 24px;
text-align: center;
background: var(--vp-c-bg-soft);
border-radius: 24px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
border: 1px solid var(--vp-c-bg-soft);
transition: border-color 0.3s;
}
.footer-cta:hover {
border-color: var(--vp-c-brand);
}
.love-text {
color: var(--vp-c-text-3);
font-size: 0.875rem;
margin-bottom: 24px;
font-family: var(--vp-font-family-mono);
}
.support-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 8px;
color: var(--vp-c-text-1);
}
.support-text {
font-size: 1.1rem;
color: var(--vp-c-text-2);
margin-bottom: 24px;
}
.github-badge {
display: flex;
justify-content: center;
align-items: center;
}
.github-badge img {
height: 32px; /* Make the button slightly larger */
}
/* Custom style for the GitHub Star button in Hero section */
.VPButton.alt[href*="github.com"] {
background: linear-gradient(90deg, #8B5CF6, #EC4899, #8B5CF6);
background-size: 200% auto;
border: 1px solid transparent !important;
color: white !important;
font-weight: 600;
animation: gradient 3s linear infinite;
box-shadow: 0 4px 14px 0 rgba(139, 92, 246, 0.5);
transition: all 0.3s ease;
}
.VPButton.alt[href*="github.com"]:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(236, 72, 153, 0.6);
background-position: right center;
}
@keyframes gradient {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
</style>