从零到上线：Vibe Coding零成本开发微信Markdown编辑器全流程
此前曾分享过微信小程序 Vibe Coding 上线全流程，收到许多关于如何利用 Vibe Coding 开发网站的留言。趁着最近动手搓了一个几乎人人必备的 Markdown 文章编辑器，我将整个零成本开发部署的过程整理出来，供大家参考。
项目缘起
Markdown 文章编辑器如今人人都能通过 Vibe Coding 手工打造，但开发完成之后，“如何部署”往往成为新的问题。
恰好我手头有一个与 Markdown 相关的域名，便顺势开发了一款专门面向公众号内容创作者的 AI Markdown 工作台，命名为「码搭AI」。
核心功能一览
内容库管理
码搭AI 与其他 Markdown 编辑器最大的不同，就是它对“内容库”的深度支持。
很多编辑器只能单篇写作，写完即走，但公众号运营者往往需要同时管理多个账号、多篇文章，缺少的是完整的内容管理方案。
- 多库管理 — 支持创建多个独立的内容库。如果你运营多个公众号，可以按账号分库存放，互不干扰，一键切换。
- 自定义图标 — 每个内容库都可以上传自己的图标或选用 Emoji，让你在侧边栏就能快速辨认并定位。
- 多文档管理 — 每个库内都可以创建、编辑、删除及重命名多篇文档，随时增删改查。
- 文档排序与置顶 — 重要文档一键置顶，也可以通过上下移动灵活调整顺序，写作节奏完全由你把控。
- 侧边栏快捷切换 — 内容库直接展示在侧边栏，单击即切换，无需进入二级页面翻找。
- 本地持久化 — 所有内容自动保存在浏览器本地，刷新页面也不会丢失，打开即用，免登录。
一句话概括：一个编辑器帮你管好所有账号的所有文章。
三步实现零成本部署
整个项目从代码到上线都无需花费一分钱，流程非常简单，主要分为以下三步：
第一步：初始化项目
打开 Claude Code（或其他 AI 编程工具），用下面这样的描述告诉它你想要的功能：
帮我创建一个微信公众号 Markdown 编辑器，使用 Vue 3 + Vite + TDesign，支持实时预览、主题切换、一键复制到公众号。
AI 会自动搭建项目骨架、安装依赖并生成核心代码。
你只需要持续提出需求和调整，这正是 Vibe Coding 的乐趣所在。
第二步：推送代码到 GitHub
项目开发完成后，通过 GitHub CLI 快速创建仓库并推送代码：
# 安装 GitHub CLI 后登录
gh auth login
# 创建仓库并推送
git init
git add .
git commit -m "feat: 初始版本"
gh repo create your-project --public --source=. --push
代码进入 GitHub 仓库后，后续每次 git push 都会自动触发部署，极其便捷。
第三步：Vercel 一键部署
- 打开 vercel.com，使用 GitHub 账号登录。
- 点击「Import Project」，选择刚刚创建的 GitHub 仓库。
- 框架会被自动识别为 Vite，直接点击 Deploy。
- 等待一两分钟，部署即可完成。
Vercel 会自动分配一个 xxx.vercel.app 的域名，同时也支持绑定自定义域名。
绑定自定义域名
在 Vercel 项目的 Settings → Domains 中添加你的域名，然后前往域名服务商处配置 DNS 解析：
- 添加一条 CNAME 记录，指向
cname.vercel-dns.com。 - 等待 DNS 生效（通常几分钟到几小时）。
生效后即可通过自定义域名访问你的编辑器，比如我用的 mamd.cn。
⚠️ 温馨提示：vercel.app 默认域名有时无法直接访问，建议提前绑定自定义域名并配置好 DNS，通常就能正常使用了。
实践心得与总结
如果你也在用 Vibe Coding 做项目，欢迎在评论区分享你的作品。有任何问题也可以留言交流。