文档教程Vibe Coding示例工程【免费下载链接】vibe-vibeThe First Systematic Vibe Coding Open-Source Tutorial | From Zero to Full-Stack, Empowering Everyone to Build Products with AI | Live at: www.vibevibe.cn 首个系统化 Vibe Coding 开源教程 | 零基础到全栈实战让人人都能用 AI 开发产品 | 在线地址www.vibevibe.cn项目地址https://gitcode.com/datawhalechina/vibe-vibe点击查看免费下载本篇是 vibe-vibe 开源教程基础版第五章《精进》的核心要点总结指南。它对应仓库中的 5.6.1 本章核心要点回顾 文档系统梳理第五章版本管理 → 部署上线 → 安全意识 → 持续迭代 → 认知边界的完整知识结构、核心概念速查表与技能自评清单。读完本文你将拿到一张可直接对照检查的毕业清单并理解第五章如何在 vibe-vibe 仓库的进阶实战 Demo 中落地为 Next.js、Drizzle ORM 与用户认证等真实工程能力。一、第五章在整条学习路径中的位置基础版五章形成一个完整的能力闭环觉醒 → 心法 → 技法 → 实战 → 精进。第四章让你在本地做出一个能用的待办清单而第五章的全部目标就是让你的作品从能用变成好用、从自己玩变成分享给世界详见 5.6.2 基础版完整学习路径。第五章自身又由五个小节构成每一节解决一个具体问题小节主题一句话概括章节入口5.1后悔药版本管理给代码装上时光机改崩了随时回退5.1 版本管理5.2见世面部署上线把本地代码放到服务器上让别人能访问5.2 部署上线5.3护城河安全意识在 AI 时代保护自己的密钥与隐私5.3 安全意识5.4再进化持续迭代根据真实反馈不断改进产品5.4 持续迭代5.5知边界能力边界清楚 Vibe Coding 擅长什么、局限在哪5.5 认知边界这五大能力缺一不可没有版本管理改崩了就前功尽弃不部署作品只能留在自己电脑里没有安全意识作品上线的那一刻可能就是隐私泄露的开始不迭代产品永远停留在第一版不清楚边界容易在超出能力范围的需求里浪费大量时间。二、核心概念速查表可收藏第五章最重要的概念全部汇总在这张表里建议收藏备用概念一句话解释为什么重要版本管理给代码装上时光机可以随时回到过去改崩了不怕大胆实验Commit一次存档记录代码在某个时刻的状态每个存档都是一个安全点部署把本地代码放到服务器上让别人能访问从自己玩到分享给世界域名网站的门牌号如 example.com让别人能找到你的作品.env 文件存放密钥等敏感信息的配置文件保护你的隐私和账户安全.gitignore告诉 Git 哪些文件不要上传防止敏感信息泄露SlopsquattingAI 推荐不存在的库被恶意者抢注2024-2025 年新型安全威胁迭代根据反馈不断改进产品好产品是改出来的不是一次做出来的README项目的说明文档介绍项目是什么、怎么用让别人和未来的自己看懂项目下面对几个核心概念做纵深补充方便你理解它们背后的操作细节。2.1 版本管理三级方案按需选择版本管理不是高级技能而是基本生存技能——就像写文档要随时保存一样写代码也需要随时存档。5.1 节给出了三级方案详见 5.1 版本管理级别方案适合谁学习时间零门槛AI IDE 自带历史所有人5 分钟简单手动复制文件夹想要额外保险的人3 分钟进阶GitHub Desktop想要云端备份、为进阶版打基础15 分钟配合 5.1.6 版本管理最佳实践你还需要掌握两个关键细节Commit 信息怎么写用一句话说明这次改动做了什么例如添加任务删除功能修复刷新后数据丢失的问题。像updatefix...这类看不出内容的信息以后找版本时毫无帮助。什么文件不该提交node_modules/太大、可重装、.env可能含密码、dist/、build/可重新生成都要写进.gitignore忽略掉。2.2 .env 与 .gitignore安全的第一道防线.env 文件存放 API 密钥、数据库连接字符串等敏感信息。它的核心价值在于配置与代码分离——敏感值只存在于本地或部署平台的环境变量中绝不进入代码仓库。进阶教程的 demo 项目正是这样组织的进入demos目录后第一步就是cp .env.example .env再填入自己的DATABASE_URL见 demos/README.md模板文件.env.example里只有占位符真实密钥永远留在本地的.env里。.gitignore 文件在项目根目录创建后写入要忽略的文件例如# 依赖 node_modules/ # 环境配置 .env .env.local # 系统文件 .DS_Store Thumbs.db # 编译产物 dist/ build/2.3 SlopsquattingAI 时代的新型供应链攻击Slopsquatting是 2024-2025 年出现的新型攻击方式名字来源于SlopAI 生成的废话或错误内容Squatting抢注。攻击原理如下详见 5.3.5 AI 推荐的库安全吗1. 攻击者研究 AI 常幻觉出的包名比如 AI 经常推荐一个不存在的 aws-helper-sdk 2. 攻击者抢先注册这个包名在 npm 或 PyPI 上创建真实的包 3. 在包中植入恶意代码窃取环境变量、下载后门程序 4. 等待开发者信任 AI 推荐直接安装 5. 恶意代码被执行开发者的密钥、数据被盗取真实案例包括Python 库aiocpa在 0.1.13 版本中植入恶意代码、通过 Telegram 窃取用户 Crypto Pay API Token被发现前下载超 1.2 万次npm 上的solana-systemprogram-utils伪装成 Solana 工具库、悄悄在 2% 的交易中转移资金。防范原则只有一条AI 推荐的包 ≠ 存在的包 ≠ 安全的包——安装任何新依赖前花 30 秒去官方包仓库如 npmjs.com、pypi.org确认它真实存在、有下载量、有维护记录。三、五大能力模块逐个拆解3.1 5.1 后悔药版本管理怎么用起来5.1 节的实操要点是至少掌握零门槛的 AI IDE 历史功能时间充裕就用 GitHub Desktop每完成一个功能就 Commit每天结束时 Push 到云端。推荐组合是日常依赖 AI IDE 历史 重要节点手动备份文件夹 项目完成后上传 GitHub。完成这些后你就拥有了大胆尝试新功能、不满意就回退的底气——这正是 5.4 节每次添加新功能前先 Commit黄金法则的前提。3.2 5.2 见世面部署上线怎么选平台部署的目标是把本地代码放到服务器上让别人能访问。5.2 节的核心结论是按用户地域选平台Zeabur大陆用户首选。免费域名*.zeabur.app在大陆可正常访问、界面支持中文、自动检测项目类型、每月有 $5 免费额度还支持支付宝付款。完整操作步骤见 5.2.3 Zeabur 部署实战。一个关键细节仓库中 HTML 主文件必须命名为index.html否则可能无法直接访问。Vercel全球流行的前端部署平台适合海外用户或有自定义域名的用户。对纯 HTML/CSS/JS 静态项目几乎零配置Framework Preset 选 OtherBuild Command 留空。但注意 Vercel 的免费域名*.vercel.app在大陆无法正常访问。见 5.2.4 Vercel 部署实战。大陆访问解决方案除 Zeabur 外纯静态网站可用帽子云腾讯云用户可考虑 EdgeOne Pages已用 Vercel 的进阶用户可用 Cloudflare 代理 自有域名。选择决策树见 5.2.6 大陆访问解决方案。部署成功的验证标准不只是能打开页面还包括用手机浏览器打开链接也能正常访问——这证明网站真的可以从任何设备访问。3.3 5.3 护城河安全意识怎么建立5.3 节的核心是三个绝对禁令与一套可执行的检查习惯三禁令不告诉 AI 密钥、不硬编码密钥、不上传 .env。具体来说永远不要在与 AI 对话时发送 API 密钥、数据库连接字符串、密码、私钥/证书、个人身份信息、公司机密、JWT Token 等详见 5.3.2 绝对禁区永远不要告诉 AI。核心原则假设你发送给 AI 的任何内容都可能被公开。正确做法是使用占位符——让 AI 帮你写const apiKey process.env.API_KEY;而不是真实密钥。提交/部署前检查代码中无硬编码密钥、.env已加入.gitignore、无敏感日志、部署平台已配置环境变量、已启用 HTTPS。快速检查技巧是搜索password、secret、apiKey、token、sk-、AKIA、-----BEGIN等关键词以及提交前运行git diff --cached扫一眼即将提交的内容详见 5.3.4 初学者安全检查清单。永远审查 AI 生成的代码不盲目信任 AI特别是涉及安全、密钥、凭证的部分——包括 AI 生成的 GitHub Actions 配置。3.4 5.4 再进化持续迭代怎么做迭代的核心方法论在 5.4 节包含三个环节收集反馈让 3-5 个真实用户试用家人、朋友都行重点是观察他们怎么用而不是在旁边指导之后问三个关键问题——第一次打开你知道怎么用吗有什么地方让你困惑如果可以加一个功能你希望是什么并用表格记录反馈、标注 P0/P1/P2 优先级详见 5.4.2 收集反馈。功能扩展每次添加新功能前先 Commit黄金法则然后使用第三章的S.C.A.F.F. 框架写 Prompt——S 情境当前项目什么样、C 挑战想加什么功能、A 请求具体要 AI 做什么、F 格式希望得到什么输出、F 过滤有什么限制。从基础级功能分类标签、优先级、搜索、深色模式做起成功一两个后再挑战进阶级截止日期提醒、任务排序、数据导出、统计详见 5.4.3 功能扩展。整理作品集为项目写一个清晰的 README记录学习心得准备主界面、功能演示、移动端适配三种截图详见 5.4.5 从项目到作品集。3.5 5.5 知边界知道什么时候该升级5.5 节明确了 Vibe Coding 擅长的六大场景——个人工具、原型验证、效率脚本、数据分析与可视化、静态网站、学习编程概念详见 5.5.1 Vibe Coding 能做什么。它们的共同特征是问题边界清晰需求自己说了算、输入输出明确、内容确定、交互简单。同时要识别六个升级信号判断是否需要学习更深的知识详见 5.5.3 什么信号告诉你需要学习更多信号表现可能的原因建议方向同一 bug 反复出现修了又出现AI 治标不治本学习调试基础项目越改越乱不知道代码在哪缺乏代码组织知识学习代码结构撞上 80% 墙每步都很难复杂度超出 AI 能力学习架构/拆分项目想要用户登录需要账号系统需要后端知识进入进阶版想做手机 App发布到应用商店不同技术栈学习移动开发AI 回答离谱代码跑不起来超出 AI 能力边界学习更多编程知识关键心态这些信号是成长的标志不是失败的证明。遇到信号后有多种选择简化需求、重新开始、进入进阶版、寻求帮助——进阶是选择不是必须。四、技能对照清单完成第五章后自评逐项勾选确认自己真正掌握了第五章的能力5.1 版本管理技能掌握标准自评使用 AI IDE 历史功能能找到并恢复到之前的代码版本☐手动备份项目知道在重要节点复制整个项目文件夹☐使用 GitHub Desktop能完成 Clone、Commit、Push 操作☐写清晰的 Commit 信息能一句话说明这次改了什么☐5.2 部署上线技能掌握标准自评选择合适的部署平台知道 Zeabur 适合大陆用户Vercel 适合海外☐完成一键部署能把项目从 GitHub 部署到平台☐获得访问链接项目有了可公开访问的网址☐验证部署成功能在手机和电脑上都正常访问☐5.3 安全意识技能掌握标准自评三禁令熟记于心不告诉 AI 密钥、不硬编码密钥、不上传 .env☐配置 .gitignore知道把 .env 和 node_modules 加入忽略列表☐验证 AI 推荐的库安装前去官方包管理网站确认存在☐审查代码的习惯不盲目信任 AI 生成的代码☐5.4 持续迭代技能掌握标准自评收集用户反馈知道让真实用户试用并记录问题☐规划功能扩展能用 S.C.A.F.F. 框架让 AI 添加新功能☐整理作品集能写一个清晰的 README 文件☐5.5 认知边界技能掌握标准自评知道擅长什么清楚 Vibe Coding 适合做个人工具、静态网站☐知道局限在哪清楚复杂后端、用户系统需要进阶学习☐识别升级信号知道什么时候该学习更深入的知识☐五、常见误区提醒基于前面章节的学习这里有五个容易踩的坑误区正确做法我要等代码完美了再 Commit半成品也可以 Commit随时可以改部署好麻烦先本地用着吧部署只需要几分钟现在就做AI 生成的代码应该没问题永远审查特别是涉及安全的部分基础版太简单我要直接学进阶基础版的方法论是进阶的根基我做的东西太简单不好意思分享能解决问题的就是好东西大胆分享六、从基础版迈向进阶版仓库里的实战样板基础版用 HTML CSS JavaScript localStorage 做出了个人工具而当你识别出想要用户登录数据存云端等升级信号后进阶版的技术栈是Next.js TypeScript 数据库。vibe-vibe 仓库中的 demos 目录正是进阶教程第 6-9 章的可运行示例可以对照第五章的每个能力点看到它们的进阶形态Demo对应章节说明核心技术demo-01-todo第 7 章 CRUD 第 9 章测试Next.js Todo 增删改查Next.js · Drizzle ORM · Vitestdemo-02-todo-auth第 8 章 认证Todo Better Auth 用户系统Better Auth · 游标分页 · 虚拟列表demo-03-social-schema第 6 章 Schema 设计Drizzle ORM 纯脚本演示无 UI社交网络 Schema · 事务 · 高级查询例如第五章速查表中的部署.env概念在进阶项目中是这样落地的进入 demo-01-todo 目录后先cp .env.example .env填入DATABASE_URL再pnpm install、pnpm drizzle-kit push同步表结构、pnpm dev启动开发服务器——.env管理与配置与代码分离正是 5.3 节安全意识的直接工程实践。而 5.4 节功能扩展里提到的分类标签、截止日期、任务排序从基础版的 localStorage 方案升级为数据库方案后对应 demo-01-todo 的 todos 表结构category分类、dueDate截止日期、order排序、completed完成状态都变成了数据库中的真实字段配合 Drizzle ORM 的pgTable定义和类型安全查询。从localStorage 里存数组到数据库里建表这就是你完成第五章后走向进阶的直观路径。推荐的学习顺序是先demo-03理解 Schema 设计与 SQL 操作再demo-01用 Next.js 实现完整 CRUD 并学习前后端联调与测试最后demo-02在 CRUD 基础上加认证理解用户系统和权限控制详见 demos/README.md。七、本节要点与下一步第五章的核心是让你的作品从能用到好用。版本管理、部署、安全、迭代、边界认知——五大能力缺一不可。对照技能清单检查自己的掌握程度把没有打勾的项补上。避开常见误区建立先 Commit 再改永远审查 AI 代码30 秒验证依赖包等正确习惯。完成了这一切你就从学习者变成了创造者。下一步请继续阅读 5.6.2 基础版完整学习路径回顾你从第一章到第五章走过的完整技能习得路径以及你在 AI 编程浪潮中的位置。赞分享文档教程Vibe Coding示例工程【免费下载链接】vibe-vibeThe First Systematic Vibe Coding Open-Source Tutorial | From Zero to Full-Stack, Empowering Everyone to Build Products with AI | Live at: www.vibevibe.cn 首个系统化 Vibe Coding 开源教程 | 零基础到全栈实战让人人都能用 AI 开发产品 | 在线地址www.vibevibe.cn项目地址https://gitcode.com/datawhalechina/vibe-vibe点击查看免费下载相关推荐Vibe Vibe 基础版完整学习路径回顾从觉醒到精进的五章能力闭环与进阶衔接Vibe Vibe 基础版完整学习路径回顾从觉醒到精进的五章能力闭环与进阶衔接 导读 本文是 Vibe Vibe首个系统化 Vibe Coding文档教程Vibe Coding示例工程vibe-vibe 基础版第五章「精进」从「能用」到「好用」的版本管理、部署上线、安全与持续迭代完整路径vibe vibe 基础版第五章「精进」从「能用」到「好用」的版本管理、部署上线、安全与持续迭代完整路径 本篇是 vibe vibe 教程基础版的收官章节导读文档教程Vibe Coding示例工程Vibe Coding 技术文档实战从 PRD 到代码的五大组件桥梁vibe-vibe 进阶教程 4.2Vibe Coding 技术文档实战从 PRD 到代码的五大组件桥梁vibe vibe 进阶教程 4.2 本指南讲解在产品需求文档PRD定稿之后如何文档教程Vibe Coding示例工程上一篇Go-SQLite3终极安装指南彻底解决CGO编译难题的完整方案下一篇ayu-vim现代VIM配色主题的终极指南 - 3种配色风格完整解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考