用 Cursor + Claude 制作全栈 SaaS 应用程序

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

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

利用 Open SaaS 和 Wasp

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

Open SaaS 附带一系列很酷的现成功能：

• 全栈认证

• 开放 AI API 应用程序示例

• AWS S3 文件上传示例

• Stripe 或 Lemon Squeezy 支付集成

• 全栈类型安全

• 管理仪表板

• 电子邮件发送

• 完整文档

• 简单的一键部署

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

该模板不仅是一个很好的开始，因为它带有大量样板代码，而且它还建立在Wasp之上，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 docs 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 文件中，而不是单独的 queries.ts 和 action.ts 文件

3. 索引整个代码库 www.cqzlsb.com

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

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

立即获取 SaaSin'

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

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