使用 Cursor + Claude 开发全栈 SaaS 应用

上周，我发布了一个视频教程，展示了如何使用 Cursor 和 Claude 3.5 以及Open SaaS制作全栈 SaaS 应用程序。

原始视频被网红 Rohan Paul 转发，目前观看次数已超过 200,000 次！

因此，由于这似乎是很多人感兴趣的话题，我想我会提供一些额外的信息和提示来配合视频，并帮助您快速开始构建 SaaS 应用程序，并希望能帮助您赚取一些额外的现金！

利用 Open SaaS 和 Wasp

最重要的是，我使用Open SaaS（一个免费、开源、全栈 React、NodeJS 和 Prisma SaaS 启动器）作为我的基础。

Open SaaS 附带一系列开箱即用的酷炫功能：

• 全栈认证
• 开放 AI API 应用程序示例
• AWS S3 文件上传示例
• Stripe 或 Lemon Squeezy 支付集成
• 全栈类型安全
• 管理仪表板
• 电子邮件发送
• 完整文档
• 简单的单命令部署

如果您想了解更多信息，请查看Open SaaS 主页。

该模板不仅是一个很好的开始，因为它附带了大量的样板代码，而且它还建立在Wasp之上，这是一个包含电池的全栈 React/NodeJS 框架。

Wasp 使用中央配置文件，这意味着您只需用几行代码定义功能，Wasp 就会为您管理它们，从而无需为 Auth 等编写一堆样板代码，例如：

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 的过程中，我注意到 AI 仍然存在一些问题，比如会产生幻觉或编写错误代码。我通过两种方式解决了这些问题：

1. 将 Wasp 文档添加到 Cursor 的上下文中
2. 指导 Cursor 如何克服在 Cursor 规则设置中常见的错误。
3. 确保索引整个代码库

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

使用 Open SaaS 和 Wasp 作为底层框架的好处是它们都是免费且开源的。幸运的是，这意味着我们还可以访问它们的原始文档文件，这些文件是用 Markdown 编写的，可以在各自的 GitHub Repos 上找到。

所以我要做的就是将Wasp 文档的 Markdown 文件复制到我正在开发的项目根目录下它们各自的目录中。这样，当我有问题或尝试实现新功能时，就可以参考这些文档。

然后，当我使用 Cursor 的编写器或聊天界面时，我可以使用“@”符号并选择Folder -> Docs并编写如下提示：

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

2. 添加游标规则以避免常见错误

Cursor 和 Claude 非常擅长跨多个文件编写代码，但他们仍然会犯一些小错误，例如对导入产生幻觉，或者跳过可以加快实现速度的 Wasp 功能。

这就是为什么我喜欢识别这些常见错误，并将它们添加到“游标设置”中的“游标规则”部分。或者，.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'
• 将新实体（又名模型）添加到文件schema.prisma，而不是main.wasp文件
• 不要向main.wasp文件添加依赖项，而是指示通过以下方式安装它们npm install。
• 创建 Wasp 操作（查询和操作）时，将它们合并到功能目录中的 operations.ts 文件中，而不是单独的 query.ts 和 actions.ts 文件

3. 索引整个代码库

这很简单。确保在 Cursor 设置中，你可以选择索引你的代码库，这样当你要求 Cursor 执行某些操作时，它就能更轻松地将你的整个项目（以及文档文件）保持在上下文中。

Index new folders by default下拉菜单下还有一个选项Show settings。请确保启用此选项，以便在 Cursor 创建新文件夹和功能时自动将其编入索引

立即获取 SaaSin'

就是这样。现在你没有理由不去实现你一直以来的那个很酷的 SaaS 应用创意了。

使用 Cursor 以及Open SaaS和Wasp就像是 SaaS 应用程序开发的秘籍，所以尽情享受吧！

哦，顺便说一句，如果您发现这有用，我们很乐意在 GitHub 上点个星。

⭐️ GitHub 上的 Star Wasp 🙏

这是支持我们这样的开源计划最简单的方法。

谢谢，下次再见！