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

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

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 文件