Easy-Vibe 项目详细介绍

Easy-Vibe 是 Datawhale（一个开源学习社区）推出的一个项目制学习教程仓库，全称“从 0 到 1 学会 vibe coding，项目制学习”。它的核心目标是帮助学习者从零基础开始，掌握 vibe coding（一种 AI 辅助的、直觉式的现代编程方式），最终能够独立构建完整的 AI 原生应用（AI-native products）并上线部署。

这是用来做什么的？

  • 解决的问题：

    • 很多人不知道如何选择和使用 AI 编程工具（比如 Claude、Cursor、Trae 等）。
    • 不知道如何将大模型的能力（如生成代码、图像、视频）应用到实际产品中。
    • 不清楚 AI 生成的代码距离真实上线运行还有多大差距。
  • 核心理念：通过“vibe coding”方式（用自然语言提示 AI 生成、迭代代码），结合项目实践，让学习者快速从想法原型到生产级产品。

  • 学习路径：分为三个阶段：

    1. 本地原型阶段：构建简单的 Web 小应用（如贪吃蛇游戏）。
    2. 全栈开发与部署阶段：集成后端、数据库、RAG（检索增强生成），并上线部署。
    3. 跨平台复杂应用阶段：开发更高级的 AI 应用（如霍格沃茨肖像生成器）。

  • 目标受众：

    • 非技术小白（但建议有基本编程基础）。
    • 中级开发者想快速原型化。
    • 高级工程师想高效构建 AI 产品。
  • 额外收获：不仅仅教编码，还强调产品思维（如需求文档 PRD 编写、UI/UX 设计、用户增长策略、想法验证）。

项目通过一系列递进的实战项目（如贪吃蛇游戏、霍格沃茨肖像应用、现代 Web App）来教学，帮助你掌握从想法到上线的全流程。

主要特点和技术栈

  • 特点：

    • 项目驱动学习，闭环体验（建议完整做完所有项目）。
    • 强调 AI 工具链的使用，减少手动敲代码。
    • 包含额外知识补充（如 Git/GitHub 使用、API 调用等）。

  • 关键技术：

    • 前端：HTML/CSS/JS、现代组件库、UI 设计工具。
    • 后端：Supabase（数据库、认证、存储、边缘函数）、Dify（RAG、工作流编排）。
    • AI 工具：Trae（推荐 AI IDE）、Cursor、VS Code、Claude 等大模型。
    • 部署：Zeabur（一键云托管）、类似 Vercel/Netlify。
    • 版本控制：Git & GitHub（分支、PR、SSH）。
    • API：文本转图像/视频、Dify API、Supabase API 等。

仓库许可：CC BY-NC-SA 4.0（知识共享、非商业、相同方式共享）。

如何使用？

  1. 准备环境：

    • 安装 Node.js、npm、Git。
    • 推荐使用 AI IDE（如 Trae、Cursor 或 VS Code + AI 插件）。
    • 有基本编程知识（任意语言）最好。

  2. 克隆仓库：

    git clone https://github.com/datawhalechina/easy-vibe.git
cd easy-vibe

  3. 运行本地服务（两种方式）：

    • 推荐现代方式（AI IDE）：
      在 AI IDE 中打开项目文件夹，直接输入提示：

      请你帮我运行这个项目的本地服务

    AI 会自动帮你安装依赖并启动。

    • 传统 CLI 方式：

      npm install
npm run dev

      然后浏览器打开 http://localhost:3000 查看。

  4. 学习和使用流程：

    • 从 docs/ 目录开始阅读：

      • 先看 Chapter 0：学习地图（docs/project/chapter0-learning-map/），了解整体路径。

      • 依次完成 Project 1~6（每个章节有详细 Markdown 教程、代码示例和 AI 提示指导）。

        • 示例项目：Project 1 用 AI 构建贪吃蛇游戏，并集成文本/图像生成 API。
        • Project 4：用 AI IDE 将设计图转为霍格沃茨肖像应用代码。
      • 额外示例（docs/examples/）：如用 Trae 构建微信小程序版贪吃蛇。
    • 在实践中，多用 AI 提示生成代码、调试、优化。
    • 项目逐步引入 Git 提交、分支管理、部署到 Zeabur 等。

  5. 注意事项：

    • 仓库主要文档是中文（英文文档不完整）。
    • 部分高级项目（7~9）和示例（2~3）仍在建设中（

版权属于：fanqiang.info

本文链接：https://www.fanqiang.info/archives/vibecoding.html

若无特别注明，本文皆为“fanqiang.info”原创，随意转载但请保留文章出处。更多精彩内容在电报频道更新: https://t.me/fqinfo

标签: Vibe Coding

添加新评论