Datawhale Easy-Vibe 教程全解析零基础用 AI 编程把想法做成真实产品含 10 语言课程导览与本地运行指南【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding项目制学习项目地址: https://gitcode.com/datawhalechina/easy-vibe本文基于仓库 docs-readme/ja-JP/README.md日文版项目总览展开结合 package.json、docs/.vitepress/config.mjs、docs/.vitepress/build-hooks.mjs、docs/DEPLOYMENT.md、llms.txt 等源码与配置完整梳理 Easy-Vibe 的项目定位、五大学习路径、三个阶段的课程地图、多语言国际化实现与本地运行方式帮助读者快速定位自己在 AI 编程学习中的起点与路线。Datawhale 开源项目easy-vibe是一套项目制学习的 AI 编程Vibe Coding教程目标是从 0 到 1 教会学习者用自然语言驱动 AI把脑海中的想法逐步做成可演示、可上线、可商用的真实产品。阅读完本文你将掌握该教程的完整课程骨架Stage 1–3 附录知识库、各章节的适用人群与核心内容以及在本机搭建 VitePress 文档站进行阅读、构建与部署的具体方法。为什么是 Easy-VibeAI 时代编程从说话开始家計簿アプリを作りたい言葉にするだけでいい。 WeChat ログイン付きの予約システムが必要言葉にするだけでいい。 コメント機能付きのブログを作りたい言葉にするだけでいい。这是日文版 README 开篇的三连问想要记账应用说出来即可。需要带微信登录的预约系统说出来即可。想要带评论功能的博客说出来即可。AI 时代的编程始于用语言描述你想要的产物而 Easy-Vibe 的价值是教你如何把说出来的想法真正变成被使用的产品——这正是它与一般 AI 教程最本质的区别不是教语法、背 API而是以真实产品为主线倒推需要掌握的一切。从仓库实际结构看这一理念被落实为31 阶段的渐进式学习路径见 llms.txt 的高层架构说明Stage 1: 新手入门与产品原型stage-0/ stage-1/ ├── 目标建立编程思维掌握 AI IDE快速构建产品原型 └── 产出互动小游戏、完整的产品原型 Stage 2: 初中级开发stage-2/ ├── 目标全栈开发能力数据库、部署、支付 └── 产出可上线的全栈 AI 应用 Stage 3: 高级开发stage-3/ ├── 目标跨平台开发AI 进阶Claude Code 深度使用 └── 产出生产级多平台应用 附录知识体系appendix/ ├── 目标计算机基础到工程素养的完整知识库 └── 内容9 大领域80 交互式专题谁适合学习这门课程日文版 README 明确列出了五类目标读者覆盖从零基础到资深开发者的完整光谱目标人群学习方式建议完全初学者先做出第一个项目理解原理可以放到后面产品经理 / 创业者快速验证想法低成本构建 MVP学生掌握 AI 时代的实践技能初级开发者学习从想法到上线的完整流程中高级开发者在复杂项目中升级 AI 协作工作流五大学习路径按目标选择你的起点README 针对不同目标给出了五条清晰的路径每条都标注了适合谁、学什么、得到什么路径适合人群学什么得到什么入口 快速上手体验所有人通过简单具体的动手练习感受 AI 编程对 vibe coding 的清晰第一印象docs/en/stage-1/ai-capabilities-through-games/ 想法 → 产品原型初学者 / PM / 创业者学习地图、AI IDE 工具、想法验证、原型开发、AI 能力集成、完整 Demo 迭代可向用户或团队演示的 AI 产品原型docs/en/stage-1/learning-map/ 端到端全栈产品初级开发者 / 独立开发者 / 进阶学习者前端工作流、设计转代码、数据库、后端 API、部署、支付、大型项目独立上线现代化 AI Web 应用的能力docs/en/stage-2/AI 原生Claude Code 与 Agent 工作流对 AI 原生工程感兴趣的开发者Claude Code、MCP、Skills、Agent Teams、长任务、Spec Coding、跨平台应用复杂 AI 辅助开发与自动化的强大工作流docs/en/stage-3/ 参考资料与基础所有人计算机基础、前后端基础、基础设施、AI 原理、工程实践覆盖 9 大知识领域的长期参考知识库docs/en/appendix/学习建议与内容导航README 给出的核心学习建议可以概括为四句话初学者、产品经理、创业者 → 从 Stage 1 开始想从原型走向全栈交付 → 从 Stage 2 开始想学 Claude Code 高级工作流或跨平台项目 → 进入 Stage 3遇到概念或背景知识卡点 → 随时查阅 附录知识库。上图是 README 中展示的整体学习地图原图位于 assets/readme-image1.png。值得注意的是它并非一张静态宣传图而是与仓库目录结构一一对应的导航图你可以沿着图上节点直接进入对应章节的 Markdown 源文件继续深入阅读。一、初学者入门Stage 1章节核心内容学习地图整个学习旅程的引导式概览AI 时代会说话就能编程通过贪吃蛇等例子初体验 AI 编程掌握 AI 编程工具学习 AI IDE 工具用法构建简单本地项目找到好想法学会发现并验证值得做的产品想法构建产品原型从需求到单页、多页产品原型集成 AI 能力集成文本、图像、视频等 AI 功能完整项目实践模拟真实场景收集用户反馈并迭代完整项目附录产品与商业思维章节核心内容产品思维与解决方案设计从 0 到 1 做产品的核心框架AI 应用场景参考B2B / B2CB 端行业与 C 端消费者的 AI 应用场景附录用户调研与需求验证章节核心内容想法从哪来最适合初学者的 3 个参考来源建立发现具体产品机会的可靠管道双钻模型先做对的事再把事做对用结构化流程从零散灵感走向可执行方向用 Jobs to Be Done 发现用户真实诉求透过表面功能需求用真实任务分析用户目标The Mom Test验证需求的用户访谈法学会提出更好的问题避免假阳性反馈附录技术方案章节核心内容遇到错误怎么办vibe coding 常见问题与排查方法7 个 AI 编程工具对比通过实战测试对比主流 AI 编程平台用 Agent 设计网站实战学习多 Agent 协作二、初中级开发者Stage 2前端章节核心内容前端 0用 Lovart 构建素材生成 Agent用 Nanobanana 与 Lovart 批量生成视觉素材构建带意图识别的绘图 Agent前端 1Figma 与 MasterGo 基础学习从设计稿到可实现 UI 思考的工作流前端 2构建第一个现代应用 - UI 设计学习现代应用界面背后的 UI 设计基础前端 3UI 规范与多产品设计用通用 UI 规则提升多产品间的一致性与美感前端 4用 LLM 与 Skills 美化界面用提示词与插件让 AI 生成更精致的界面前端 4制作霍格沃茨画像从零构建交互式 AI 图像前端项目前端 6从设计原型到项目代码把设计原型转换成浏览器中真正可运行的前端代码前端 7用现代组件库升级 UI用组件库更快构建专业界面后端章节核心内容后端 1学习 Git 与 GitHub掌握 Git 核心版本控制操作与协作工作流后端 2从数据库到 Supabase学习关系型数据库基础用 Supabase 作为现代 BaaS 平台后端 3后端 API 设计与开发用 AI 辅助 API 设计、后端代码生成与 API 文档后端 4上线产品原型用 Zeabur 快速将全栈应用部署到云端后端 5从 IDE 到 CLI AI 编程工具探索终端优先的 AI 编程工作流后端 6集成 Stripe 等支付系统用支付与计费能力实现商业化大型项目章节核心内容大型项目 1第一个 SaaS 全栈应用 - AI 文案生成网站构建带登录、生成、计费、管理功能的 AI 营销文案工作台大型项目 2在线考试与管理系统构建带出题、考试流程、管理工具的在线考试系统AI 能力附录章节核心内容AI 1Dify 基础与知识库集成用 Dify 构建 AI 应用并集成私有知识库三、高级开发者Stage 3Claude Code 核心技能章节核心内容Claude Code 入门安装、配置、基础与常用命令Claude Code MCP 指南通过 MCP 将 Claude Code 连接到 GitHub、数据库、API 等服务Claude Code Skills 指南将专业知识打包为可复用的技能如何让 Claude Code 处理长任务设计长任务让编程工具持续工作直到完成Claude Agent Teams 指南像真实开发团队一样协调多个 AI 实例工程级开发的 Claude Code Superpowers用 TDD 与最佳实践让 AI 产出工程级代码Claude Code 工作流最佳实践重构、代码审查与日常开发的最佳实践移动端 Claude Code 远程开发在移动设备上构建高效的远程工作流Claude Agent SDK 完全指南构建自定义 Agent 工作流把 Claude 集成到自己的工具中从 vibe coding 到 spec coding从即兴提示词转向更结构化的规格驱动开发跨平台开发章节核心内容如何为应用选择合适平台比较应用形态基于用户、场景与交付目标选型构建微信小程序理解生态从模板到上线完成前端小程序构建带后端的小程序加入后端逻辑与数据库完成完整业务闭环构建 Android 应用用现代原生工作流学习 Android 开发构建 iOS 应用学习 iOS 开发与 Apple 生态规范构建本地 PWA 应用用离线支持、推送与安装能力把网站变成真正的应用构建浏览器 AI 助手扩展用云 API 或内置 AI 创建总结任意页面的 Chrome 扩展构建 Electron 桌面应用用 Electron 构建三平台语音转文字桌面应用快速构建并铸造 NFT从零编写智能合约、部署并铸造自己的 NFT构建 VS Code 扩展构建带模板、代码聊天、多文件问答的 AI 项目助手构建工业级 Qt 桌面应用创建带趋势、告警、监控的实时 Qt HMI 系统AI 能力附录章节核心内容什么是 RAG如何工作系统建立 RAG 原理与常见架构的认知用 LangGraph 实现中高级 RAG 工作流设计多步骤工作流与更高级的 RAG 系统附录知识库覆盖9 大知识领域与80 多个交互式专题用动画与可视化组件帮助读者直观理解从计算机基础到 AI 前沿的核心概念。知识库入口docs/en/appendix/。这九个领域在 llms.txt 中有完整索引计算机基础、开发工具、浏览器与前端、服务器与后端、数据、架构与系统设计、基础设施与运维、人工智能、工程卓越——每一篇都是独立成文的 Markdown并配套交互式 Vue 演示组件位于 docs/.vitepress/theme/components/appendix/。多语言与国际化10 语言站点是如何构建的日文版 README 开篇即强调主要课程全体系以 10 种语言公开zh-cn、en、zh-tw、ja-jp、ko-kr、es-es、fr-fr、de-de、ar-sa、vi-vn供全球学习者共同把想法变成产品。这并非一句口号而是由站点配置直接支撑的事实。在 docs/.vitepress/config.mjs 中10 个 locale 被统一登记在localeMap里每个 locale 都配置了lang、hreflang、ogLocale等 SEO 属性同时为每个语言单独生成了导航nav与侧边栏sidebar。以日语为例其 locale 配置包含titleEasy-Vibe チュートリアルdescriptionゼロから学ぶ Vibe Coding - AIプログラミングを初めから体系的に学習导航栏ホーム/初心者とPM/フルスタック開発/上級開発/付録/Vibe ストーリー侧边栏由getStage1Sidebar(ja-jp)、getStage2Sidebar(ja-jp)、getStage3Sidebar(ja-jp)与localizeAppendixSidebar(...)生成。日文内容的实际存放目录是 docs/ja-jp/其首页 docs/ja-jp/index.md 定义了 hero 区主标题ゼロからのAIコーディングガイド、轮播式 tagline 与两个 CTA 按钮正文直接复用HomeFeatures /组件。从部署实现看整个多语言体系还有三处值得一提的源码细节首页语言自动重定向docs/.vitepress/build-hooks.mjs 通过transformHead在首页 HTML 的head注入一段内联脚本根据浏览器navigator.language将访客分发到对应语言ja/ja-jp→/ja-jp/zh/zh-cn→/zh-cn/等并在首次访问时先导向欢迎页noscript则回退到zh-cn。这一逻辑与 docs/index.md 中的 Vue 侧重定向实现互为备份。Base 路径自适应docs/.vitepress/config.mjs 依据VERCEL、EDGEONE、BASE环境变量自动选择部署基路径Vercel/EdgeOne 用/GitHub Pages 用/easy-vibe/细节与排障方法记录在 docs/DEPLOYMENT.md 中。构建时 SEO 资产生成buildEnd钩子会动态写出带 Sitemap 地址的robots.txt并默认把全部.md源文件复制进构建产物以支持页面的复制 / 下载 Markdown功能。在本地运行 Easy-Vibe日文版 README 提供了两种运行方式且都保留了现代方法优先的思路——这正是项目想传递的 vibe coding 理念本身。现代方法在 VS Code、Cursor、Trae 等 AI IDE 的聊天窗口中直接输入一句话このプロジェクトをローカルで実行するのを手伝ってください。AI 会自动帮你完成安装依赖、启动开发服务器等一系列操作。中文环境下等价的说法是请帮我本地运行这个项目。传统方法手动执行git clone https://gitcode.com/datawhalechina/easy-vibe cd easy-vibe npm install npm run dev然后在浏览器中打开本地地址开始阅读。这里有一处需要说明的差异README 中写的是打开http://localhost:3000而根据 package.json 中dev: vitepress dev docs与 docs/DEPLOYMENT.md 的说明本仓库是基于 VitePress 的文档站开发服务器的实际默认端口是 5173本地访问http://localhost:5173README 中的 3000 是面向初学者的简化表述以你终端实际输出的地址为准。除npm run dev外package.json 还提供了这些常用命令要求 Node.js 18命令作用npm run build多语言生产构建由scripts/build-locales.mjs驱动并自动生成 sitemapnpm run preview本地预览构建产物npm run sitemap生成sitemap.xml与robots.txtnpm run lint/npm run formatESLint 检查 / Prettier 统一格式npm run test运行仓库内测试Node 内置 test runner依赖方面站点使用 VitePress Vue 3并集成了element-plus、mermaid、reveal.js、katex等用于交互式组件、图表与幻灯片演示的库见 package.json。AI Agent 友好的仓库设计2026-03-02 的更新中Easy-Vibe 引入了llms.txt与OpenClaw / AI Agent 友好支持让 OpenClaw、Claude、Cursor、Trae 等 AI Agent 能快速理解仓库结构并定位合适的教程内容。仓库根目录的 llms.txt 正是这份Agent 导航地图它先给出 31 阶段的高层架构与快速决策树问怎么开始/零基础/入门 → Stage 1问数据库/部署/全栈 → Stage 2问 MCP/小程序/跨平台/Claude Code → Stage 3问计算机基础/原理 → 附录再逐篇给出文章文件路径、关键词与内容概要——也就是说本文档站本身也演示了如何为 LLM 构建可检索的结构化知识。配合 docs/.vitepress/build-hooks.mjs 在构建期生成的robots.txt含Disallow旧版目录与Sitemap指向以及sitemap.xml全站的搜索引擎与 Agent 可发现性都有工程化保障。如何参与贡献日文版 README 明确欢迎社区参与发现文档问题或可改进之处 → 提交 Issue想直接贡献内容 → 提交 Pull Request若长期无人回复可联系 Datawhale 支持团队想发起新的 Datawhale 开源项目 → 遵循 Datawhale 开源项目指南。仓库内的 AGENTS.md 进一步给出了协作规范目录结构约定docs/为 VitePress 站点源码交互式 Vue 组件位于docs/.vitepress/theme/components/appendix/、命令建议用npm run build作为正确性检查、提交信息采用 Conventional Commits 风格等。许可证本作品采用知识共享 署名-非商业性使用-相同方式共享 4.0 国际许可协议CC BY-NC-SA 4.0授权package.json 中亦声明license: CC-BY-NC-SA-4.0允许在署名、非商业用途、相同方式共享的前提下自由使用与传播。【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding项目制学习项目地址: https://gitcode.com/datawhalechina/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Datawhale Easy-Vibe 教程全解析：零基础用 AI 编程把想法做成真实产品（含 10 语言课程导览与本地运行指南）
Datawhale Easy-Vibe 教程全解析零基础用 AI 编程把想法做成真实产品含 10 语言课程导览与本地运行指南【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding项目制学习项目地址: https://gitcode.com/datawhalechina/easy-vibe本文基于仓库 docs-readme/ja-JP/README.md日文版项目总览展开结合 package.json、docs/.vitepress/config.mjs、docs/.vitepress/build-hooks.mjs、docs/DEPLOYMENT.md、llms.txt 等源码与配置完整梳理 Easy-Vibe 的项目定位、五大学习路径、三个阶段的课程地图、多语言国际化实现与本地运行方式帮助读者快速定位自己在 AI 编程学习中的起点与路线。Datawhale 开源项目easy-vibe是一套项目制学习的 AI 编程Vibe Coding教程目标是从 0 到 1 教会学习者用自然语言驱动 AI把脑海中的想法逐步做成可演示、可上线、可商用的真实产品。阅读完本文你将掌握该教程的完整课程骨架Stage 1–3 附录知识库、各章节的适用人群与核心内容以及在本机搭建 VitePress 文档站进行阅读、构建与部署的具体方法。为什么是 Easy-VibeAI 时代编程从说话开始家計簿アプリを作りたい言葉にするだけでいい。 WeChat ログイン付きの予約システムが必要言葉にするだけでいい。 コメント機能付きのブログを作りたい言葉にするだけでいい。这是日文版 README 开篇的三连问想要记账应用说出来即可。需要带微信登录的预约系统说出来即可。想要带评论功能的博客说出来即可。AI 时代的编程始于用语言描述你想要的产物而 Easy-Vibe 的价值是教你如何把说出来的想法真正变成被使用的产品——这正是它与一般 AI 教程最本质的区别不是教语法、背 API而是以真实产品为主线倒推需要掌握的一切。从仓库实际结构看这一理念被落实为31 阶段的渐进式学习路径见 llms.txt 的高层架构说明Stage 1: 新手入门与产品原型stage-0/ stage-1/ ├── 目标建立编程思维掌握 AI IDE快速构建产品原型 └── 产出互动小游戏、完整的产品原型 Stage 2: 初中级开发stage-2/ ├── 目标全栈开发能力数据库、部署、支付 └── 产出可上线的全栈 AI 应用 Stage 3: 高级开发stage-3/ ├── 目标跨平台开发AI 进阶Claude Code 深度使用 └── 产出生产级多平台应用 附录知识体系appendix/ ├── 目标计算机基础到工程素养的完整知识库 └── 内容9 大领域80 交互式专题谁适合学习这门课程日文版 README 明确列出了五类目标读者覆盖从零基础到资深开发者的完整光谱目标人群学习方式建议完全初学者先做出第一个项目理解原理可以放到后面产品经理 / 创业者快速验证想法低成本构建 MVP学生掌握 AI 时代的实践技能初级开发者学习从想法到上线的完整流程中高级开发者在复杂项目中升级 AI 协作工作流五大学习路径按目标选择你的起点README 针对不同目标给出了五条清晰的路径每条都标注了适合谁、学什么、得到什么路径适合人群学什么得到什么入口 快速上手体验所有人通过简单具体的动手练习感受 AI 编程对 vibe coding 的清晰第一印象docs/en/stage-1/ai-capabilities-through-games/ 想法 → 产品原型初学者 / PM / 创业者学习地图、AI IDE 工具、想法验证、原型开发、AI 能力集成、完整 Demo 迭代可向用户或团队演示的 AI 产品原型docs/en/stage-1/learning-map/ 端到端全栈产品初级开发者 / 独立开发者 / 进阶学习者前端工作流、设计转代码、数据库、后端 API、部署、支付、大型项目独立上线现代化 AI Web 应用的能力docs/en/stage-2/AI 原生Claude Code 与 Agent 工作流对 AI 原生工程感兴趣的开发者Claude Code、MCP、Skills、Agent Teams、长任务、Spec Coding、跨平台应用复杂 AI 辅助开发与自动化的强大工作流docs/en/stage-3/ 参考资料与基础所有人计算机基础、前后端基础、基础设施、AI 原理、工程实践覆盖 9 大知识领域的长期参考知识库docs/en/appendix/学习建议与内容导航README 给出的核心学习建议可以概括为四句话初学者、产品经理、创业者 → 从 Stage 1 开始想从原型走向全栈交付 → 从 Stage 2 开始想学 Claude Code 高级工作流或跨平台项目 → 进入 Stage 3遇到概念或背景知识卡点 → 随时查阅 附录知识库。上图是 README 中展示的整体学习地图原图位于 assets/readme-image1.png。值得注意的是它并非一张静态宣传图而是与仓库目录结构一一对应的导航图你可以沿着图上节点直接进入对应章节的 Markdown 源文件继续深入阅读。一、初学者入门Stage 1章节核心内容学习地图整个学习旅程的引导式概览AI 时代会说话就能编程通过贪吃蛇等例子初体验 AI 编程掌握 AI 编程工具学习 AI IDE 工具用法构建简单本地项目找到好想法学会发现并验证值得做的产品想法构建产品原型从需求到单页、多页产品原型集成 AI 能力集成文本、图像、视频等 AI 功能完整项目实践模拟真实场景收集用户反馈并迭代完整项目附录产品与商业思维章节核心内容产品思维与解决方案设计从 0 到 1 做产品的核心框架AI 应用场景参考B2B / B2CB 端行业与 C 端消费者的 AI 应用场景附录用户调研与需求验证章节核心内容想法从哪来最适合初学者的 3 个参考来源建立发现具体产品机会的可靠管道双钻模型先做对的事再把事做对用结构化流程从零散灵感走向可执行方向用 Jobs to Be Done 发现用户真实诉求透过表面功能需求用真实任务分析用户目标The Mom Test验证需求的用户访谈法学会提出更好的问题避免假阳性反馈附录技术方案章节核心内容遇到错误怎么办vibe coding 常见问题与排查方法7 个 AI 编程工具对比通过实战测试对比主流 AI 编程平台用 Agent 设计网站实战学习多 Agent 协作二、初中级开发者Stage 2前端章节核心内容前端 0用 Lovart 构建素材生成 Agent用 Nanobanana 与 Lovart 批量生成视觉素材构建带意图识别的绘图 Agent前端 1Figma 与 MasterGo 基础学习从设计稿到可实现 UI 思考的工作流前端 2构建第一个现代应用 - UI 设计学习现代应用界面背后的 UI 设计基础前端 3UI 规范与多产品设计用通用 UI 规则提升多产品间的一致性与美感前端 4用 LLM 与 Skills 美化界面用提示词与插件让 AI 生成更精致的界面前端 4制作霍格沃茨画像从零构建交互式 AI 图像前端项目前端 6从设计原型到项目代码把设计原型转换成浏览器中真正可运行的前端代码前端 7用现代组件库升级 UI用组件库更快构建专业界面后端章节核心内容后端 1学习 Git 与 GitHub掌握 Git 核心版本控制操作与协作工作流后端 2从数据库到 Supabase学习关系型数据库基础用 Supabase 作为现代 BaaS 平台后端 3后端 API 设计与开发用 AI 辅助 API 设计、后端代码生成与 API 文档后端 4上线产品原型用 Zeabur 快速将全栈应用部署到云端后端 5从 IDE 到 CLI AI 编程工具探索终端优先的 AI 编程工作流后端 6集成 Stripe 等支付系统用支付与计费能力实现商业化大型项目章节核心内容大型项目 1第一个 SaaS 全栈应用 - AI 文案生成网站构建带登录、生成、计费、管理功能的 AI 营销文案工作台大型项目 2在线考试与管理系统构建带出题、考试流程、管理工具的在线考试系统AI 能力附录章节核心内容AI 1Dify 基础与知识库集成用 Dify 构建 AI 应用并集成私有知识库三、高级开发者Stage 3Claude Code 核心技能章节核心内容Claude Code 入门安装、配置、基础与常用命令Claude Code MCP 指南通过 MCP 将 Claude Code 连接到 GitHub、数据库、API 等服务Claude Code Skills 指南将专业知识打包为可复用的技能如何让 Claude Code 处理长任务设计长任务让编程工具持续工作直到完成Claude Agent Teams 指南像真实开发团队一样协调多个 AI 实例工程级开发的 Claude Code Superpowers用 TDD 与最佳实践让 AI 产出工程级代码Claude Code 工作流最佳实践重构、代码审查与日常开发的最佳实践移动端 Claude Code 远程开发在移动设备上构建高效的远程工作流Claude Agent SDK 完全指南构建自定义 Agent 工作流把 Claude 集成到自己的工具中从 vibe coding 到 spec coding从即兴提示词转向更结构化的规格驱动开发跨平台开发章节核心内容如何为应用选择合适平台比较应用形态基于用户、场景与交付目标选型构建微信小程序理解生态从模板到上线完成前端小程序构建带后端的小程序加入后端逻辑与数据库完成完整业务闭环构建 Android 应用用现代原生工作流学习 Android 开发构建 iOS 应用学习 iOS 开发与 Apple 生态规范构建本地 PWA 应用用离线支持、推送与安装能力把网站变成真正的应用构建浏览器 AI 助手扩展用云 API 或内置 AI 创建总结任意页面的 Chrome 扩展构建 Electron 桌面应用用 Electron 构建三平台语音转文字桌面应用快速构建并铸造 NFT从零编写智能合约、部署并铸造自己的 NFT构建 VS Code 扩展构建带模板、代码聊天、多文件问答的 AI 项目助手构建工业级 Qt 桌面应用创建带趋势、告警、监控的实时 Qt HMI 系统AI 能力附录章节核心内容什么是 RAG如何工作系统建立 RAG 原理与常见架构的认知用 LangGraph 实现中高级 RAG 工作流设计多步骤工作流与更高级的 RAG 系统附录知识库覆盖9 大知识领域与80 多个交互式专题用动画与可视化组件帮助读者直观理解从计算机基础到 AI 前沿的核心概念。知识库入口docs/en/appendix/。这九个领域在 llms.txt 中有完整索引计算机基础、开发工具、浏览器与前端、服务器与后端、数据、架构与系统设计、基础设施与运维、人工智能、工程卓越——每一篇都是独立成文的 Markdown并配套交互式 Vue 演示组件位于 docs/.vitepress/theme/components/appendix/。多语言与国际化10 语言站点是如何构建的日文版 README 开篇即强调主要课程全体系以 10 种语言公开zh-cn、en、zh-tw、ja-jp、ko-kr、es-es、fr-fr、de-de、ar-sa、vi-vn供全球学习者共同把想法变成产品。这并非一句口号而是由站点配置直接支撑的事实。在 docs/.vitepress/config.mjs 中10 个 locale 被统一登记在localeMap里每个 locale 都配置了lang、hreflang、ogLocale等 SEO 属性同时为每个语言单独生成了导航nav与侧边栏sidebar。以日语为例其 locale 配置包含titleEasy-Vibe チュートリアルdescriptionゼロから学ぶ Vibe Coding - AIプログラミングを初めから体系的に学習导航栏ホーム/初心者とPM/フルスタック開発/上級開発/付録/Vibe ストーリー侧边栏由getStage1Sidebar(ja-jp)、getStage2Sidebar(ja-jp)、getStage3Sidebar(ja-jp)与localizeAppendixSidebar(...)生成。日文内容的实际存放目录是 docs/ja-jp/其首页 docs/ja-jp/index.md 定义了 hero 区主标题ゼロからのAIコーディングガイド、轮播式 tagline 与两个 CTA 按钮正文直接复用HomeFeatures /组件。从部署实现看整个多语言体系还有三处值得一提的源码细节首页语言自动重定向docs/.vitepress/build-hooks.mjs 通过transformHead在首页 HTML 的head注入一段内联脚本根据浏览器navigator.language将访客分发到对应语言ja/ja-jp→/ja-jp/zh/zh-cn→/zh-cn/等并在首次访问时先导向欢迎页noscript则回退到zh-cn。这一逻辑与 docs/index.md 中的 Vue 侧重定向实现互为备份。Base 路径自适应docs/.vitepress/config.mjs 依据VERCEL、EDGEONE、BASE环境变量自动选择部署基路径Vercel/EdgeOne 用/GitHub Pages 用/easy-vibe/细节与排障方法记录在 docs/DEPLOYMENT.md 中。构建时 SEO 资产生成buildEnd钩子会动态写出带 Sitemap 地址的robots.txt并默认把全部.md源文件复制进构建产物以支持页面的复制 / 下载 Markdown功能。在本地运行 Easy-Vibe日文版 README 提供了两种运行方式且都保留了现代方法优先的思路——这正是项目想传递的 vibe coding 理念本身。现代方法在 VS Code、Cursor、Trae 等 AI IDE 的聊天窗口中直接输入一句话このプロジェクトをローカルで実行するのを手伝ってください。AI 会自动帮你完成安装依赖、启动开发服务器等一系列操作。中文环境下等价的说法是请帮我本地运行这个项目。传统方法手动执行git clone https://gitcode.com/datawhalechina/easy-vibe cd easy-vibe npm install npm run dev然后在浏览器中打开本地地址开始阅读。这里有一处需要说明的差异README 中写的是打开http://localhost:3000而根据 package.json 中dev: vitepress dev docs与 docs/DEPLOYMENT.md 的说明本仓库是基于 VitePress 的文档站开发服务器的实际默认端口是 5173本地访问http://localhost:5173README 中的 3000 是面向初学者的简化表述以你终端实际输出的地址为准。除npm run dev外package.json 还提供了这些常用命令要求 Node.js 18命令作用npm run build多语言生产构建由scripts/build-locales.mjs驱动并自动生成 sitemapnpm run preview本地预览构建产物npm run sitemap生成sitemap.xml与robots.txtnpm run lint/npm run formatESLint 检查 / Prettier 统一格式npm run test运行仓库内测试Node 内置 test runner依赖方面站点使用 VitePress Vue 3并集成了element-plus、mermaid、reveal.js、katex等用于交互式组件、图表与幻灯片演示的库见 package.json。AI Agent 友好的仓库设计2026-03-02 的更新中Easy-Vibe 引入了llms.txt与OpenClaw / AI Agent 友好支持让 OpenClaw、Claude、Cursor、Trae 等 AI Agent 能快速理解仓库结构并定位合适的教程内容。仓库根目录的 llms.txt 正是这份Agent 导航地图它先给出 31 阶段的高层架构与快速决策树问怎么开始/零基础/入门 → Stage 1问数据库/部署/全栈 → Stage 2问 MCP/小程序/跨平台/Claude Code → Stage 3问计算机基础/原理 → 附录再逐篇给出文章文件路径、关键词与内容概要——也就是说本文档站本身也演示了如何为 LLM 构建可检索的结构化知识。配合 docs/.vitepress/build-hooks.mjs 在构建期生成的robots.txt含Disallow旧版目录与Sitemap指向以及sitemap.xml全站的搜索引擎与 Agent 可发现性都有工程化保障。如何参与贡献日文版 README 明确欢迎社区参与发现文档问题或可改进之处 → 提交 Issue想直接贡献内容 → 提交 Pull Request若长期无人回复可联系 Datawhale 支持团队想发起新的 Datawhale 开源项目 → 遵循 Datawhale 开源项目指南。仓库内的 AGENTS.md 进一步给出了协作规范目录结构约定docs/为 VitePress 站点源码交互式 Vue 组件位于docs/.vitepress/theme/components/appendix/、命令建议用npm run build作为正确性检查、提交信息采用 Conventional Commits 风格等。许可证本作品采用知识共享 署名-非商业性使用-相同方式共享 4.0 国际许可协议CC BY-NC-SA 4.0授权package.json 中亦声明license: CC-BY-NC-SA-4.0允许在署名、非商业用途、相同方式共享的前提下自由使用与传播。【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding项目制学习项目地址: https://gitcode.com/datawhalechina/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考