介绍
模板包含什么,用了哪些技术。
快速上线小型 SaaS 的起步模板,部署在 Cloudflare Workers。
技术栈
| 部分 | 用的是 |
|---|---|
| 页面 | Nuxt 4 + Vue |
| 接口与构建 | Nitro(Nuxt 自带) |
| 数据请求 | TanStack Vue Query |
| 界面 | shadcn-vue + Tailwind CSS 4 |
| 数据库 | Cloudflare D1 + Drizzle |
| 登录 | Better Auth:邮箱密码、邮箱验证、找回密码、Google、Google One Tap |
| 邮件 | Resend 托管模板 |
| 文档 | Markdown,构建时转成静态 HTML |
Nitro 是什么
Nuxt 的服务端部分,负责接口、服务端渲染和打包。
server/api/下的文件就是接口:health.get.ts→GET /api/health。- 接口用
defineEventHandler写,event里能拿到请求、Cookie 和 D1 等绑定。这一层叫 H3,相当于 Express / Hono。 - 构建时按预设打包。本模板用
cloudflare_module:.output/server/是 Worker 代码,.output/public/是静态文件。文档页的预渲染也由它完成。
命令行与 AI 工具
| 工具 | 类型 | 安装 | 用来做什么 |
|---|---|---|---|
cf |
Cloudflare CLI | npm install -g cf,cf auth login |
建 D1、执行正式库迁移、查账号资源 |
wrangler |
Cloudflare CLI | 项目依赖,npx wrangler login |
本地预览、发布 Worker、改线上密钥 |
cloudflare-deploy |
Skill | Codex 自带;Claude Code 软链接到 ~/.claude/skills/ |
让 AI 按 Cloudflare 的产品选择和发布检查清单操作 |
| Resend MCP | MCP | codex mcp add resend --url https://mcp.resend.com/mcp(Claude Code:claude mcp add --transport http resend https://mcp.resend.com/mcp),浏览器 OAuth 授权 |
让 AI 管理发件域名、模板,查发送记录 |
resend、resend-cli、email-best-practices |
Skill | 按 resend.com/setup.md 安装 | 让 AI 按官方方式写发信代码、用 Resend CLI、处理投递问题 |
cf 和 wrangler 的登录互不通用,两个都要登。MCP 的 OAuth 授权有删除资源的权限;应用发信只用限制到发件域名的发送 Key。
计划中
后台管理、支付订阅、多语言、GitHub 登录。