用 Cursor + Claude 构建全栈 SaaS 应用

上周，我发布了一个视频教程，展示了我是如何使用 Cursor 和 Claude 3.5，结合 Open SaaS 构建全栈 SaaS 应用的。

原视频被科技领域的意见领袖 Rohan Paul 转发后，播放量如今已经超过 20 万！

既然看起来很多人都对这个话题感兴趣，我想再补充一些信息和技巧，配合视频帮助你快速上手构建 SaaS 应用，也希望能帮你赚到一些额外收入！

利用 Open SaaS 和 Wasp

最重要的一点是，我使用 Open SaaS 作为项目基础。它是一个免费、开源的全栈 SaaS starter，采用 React、NodeJS 和 Prisma 构建。

Open SaaS 开箱即用，内置了许多实用功能：

• Open AI API 应用示例
• AWS S3 文件上传示例
• Stripe 或 Lemon Squeezy 支付集成
• 简单的一条命令部署

如果你想进一步了解，可以查看 Open SaaS 主页。

这个模板不仅包含大量 boilerplate code，是一个很好的起点，而且它还构建在 Wasp 之上。Wasp 是一个功能完备的全栈 React/NodeJS 框架。

Wasp 采用中央配置文件，你只需要用几行代码定义功能，剩下的事情就交给 Wasp 管理。这样一来，你无需再为 Auth 等功能编写大量 boilerplate code。例如：

app todoApp {
  title: "ToDo App",  // visible in the browser tab
  auth: { // full-stack auth out-of-the-box
    userEntity: User, 
    methods: { google: {}, gitHub: {}, email: {...} }
  }
}

这意味着，当你使用 Cursor 和 Claude 这类 AI 辅助编程工具时，AI 需要完成的工作会少得多。它编写的代码更加简单，你得到的代码也更容易调试！

Cursor 使用技巧

在使用 Cursor 时，我注意到 AI 仍然存在一些幻觉或编写出有 bug 代码的问题。我通过以下几种方式解决了这些问题：

• 将 Wasp 文档添加到 Cursor 的上下文中
• 在 Cursor Rules 设置中告诉 Cursor 如何避免它经常犯的错误
• 确保为整个 Codebase 建立索引

1. 将 Wasp 文档添加到 Cursor 的上下文中

使用 Open SaaS，以及使用 Wasp 作为底层框架，有一个好处：二者都是免费且开源的。幸运的是，这也意味着我们可以访问它们的原始文档文件。这些文档使用 markdown 编写，可以在各自的 GitHub Repo 中找到。

因此，我会把 Wasp 文档的 markdown 文件复制到当前项目根目录下的一个独立目录中。之后，每当我遇到问题或尝试实现新功能时，就可以引用这些文档。

接下来，当我使用 Cursor 的 Composer 或聊天界面时，可以输入“@”符号，依次选择 Folder -> Docs，然后编写类似下面的 prompt：

使用 @docs 作为参考，帮我通过 Wasp 的 Websockets 功能在应用中实现聊天功能。为应用添加一个聊天页面……

2. 添加 Cursor Rules，避免常见错误

Cursor 和 Claude 非常擅长跨多个文件编写代码，但它们仍然可能犯一些小错误，比如产生不存在的 import，或者忽略某个本可以让实现过程更快捷的 Wasp 功能。

因此，我喜欢找出这些常见错误，并将相应规则添加到 Cursor Settings 中的 Cursor Rules 部分。如果你希望这些规则仅针对当前项目，也可以将它们添加到项目根目录下的 .cursorrules 文件中。

重要的是，如果你发现 Cursor 总是在重复犯同样的错误，就应该查看文档、找出问题，并在每次出现新问题时添加一条新规则。

以下是我目前发现比较实用的规则：

• 从 SDK 导入 Wasp 函数时，务必使用 'wasp'，不要使用 '@wasp'，例如：import { Task } from 'wasp/entities', import { type GetTasks } from 'wasp/server/operations', import { getTasks, useQuery } from 'wasp/client/operations'
• 将新 entity（也就是 model）添加到 schema.prisma，而不是 main.wasp 文件
• 不要将依赖项添加到 main.wasp 文件，而应提示通过 npm install 安装
• 创建 Wasp operation（query 和 action）时，将它们合并到功能目录中的 operations.ts 文件，而不是分别放入 queries.ts 和 actions.ts 文件

3. 为整个 Codebase 建立索引

这一点很简单。请确保在 Cursor 设置中启用了为 Codebase 建立索引的选项。这样，当你要求 Cursor 完成某项任务时，它就能更轻松地将整个项目以及文档文件保留在上下文中。

在 Show settings 下拉菜单中，还有一个默认索引新文件夹的选项。请确保启用它，以便 Cursor 创建新文件夹和新功能时，能够自动为它们建立索引。

差不多就是这些。现在，你再也没有理由不去实现那个已经构思了很久的酷炫 SaaS 应用了。

将 Cursor 与 Open SaaS、Wasp 搭配使用，简直就像开启了 SaaS 应用开发的作弊码。尽情享受吧！

顺便说一句，如果你觉得这些内容有用，我们非常希望你能在 GitHub 上给我们点一个 Star。

⭐️ 在 GitHub 上为 Wasp 点亮 Star 🙏

这是支持我们这类开源项目最简单的方式。

谢谢，我们下次再见！

部分评论可能只有登录后的访客才能看到。请登录以查看全部评论。

如需采取进一步措施，你可以考虑屏蔽此人和/或举报滥用行为。