基于 Supabase+Vue3 的 Cursor 人工智能开发

开发环境：Windows物理机+Ubuntu虚拟机

Cursor：https://www.cursor.com/cn

Supabase：https://supabase.com/docs/guides/local-development

软件配置：

Windows：11

Ubuntu：24.04

Cursor：1.96.2

nodejs：24.1.0

npm：11.3.0

---

软件安装

1. 安装Cursor：在windows下（在Ubuntu下安装Cursor很麻烦），直接去官网下载安装包安装即可
2. 安装supabase：在Ubuntu虚拟机里安装Supabase（在windows上安装应该也可以）

开发演练

1. 初始化项目

   # 初始化vue3项目
   npm create vite@latest supabase-vue-3 -- --template vue
   cd supabase-vue-3
   # 安装supabase模块
   npm install @supabase/supabase-js
   

2. 配置.env文件

   VITE_SUPABASE_URL=http://127.0.0.1:54321
   VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
   

3. 新建src/supabase.js

   import { createClient } from '@supabase/supabase-js'
   const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
   const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY
   export const supabase = createClient(supabaseUrl, supabaseAnonKey)
   

4. 启动项目即可（以上是参考supabase官方的案例如果想测试效果可以看原文https://supabase.com/docs/guides/getting-started/tutorials/with-vue-3?queryGroups=database-method&database-method=dashboard）

   npx supabase start
   npm run dev
   

5. 打开Cursor新建窗口，选择Connect via SSH（由于Cursor和Supabase不在同一台机器上所以需要用远程开发）选择之后需要输入Ubuntu的地址用户名密码

   
   image.png

6. 在左侧选择之前创建的项目作为目录，这里supabase-vue-3就是我的项目名称

   
   image.png

7. 使用Cursor开发（部分对话）

• 设计一个化工厂环保管理平台

image.png
1752453847243_d.png

• 编写markdown文件

  
  image.png

• 使用rbac模型

  
  image.png

• 发散一下

  
  image.png

• 发散过头了

  
  1752453878639_d.png

• 开始编码！

  
  1752453884881_d.png

• 经过漫长的生成和报错修复，终于完成！

  
  1752453891860_d.png

• 创建数据库（因为上面只是生成了前端代码，没有链接到supabase...）

• Cursor连接supabase-mcp

  "supabase": {
        "command": "npx",
        "args": [
          "-y",
          "@modelcontextprotocol/server-postgres",
          "postgresql://postgres:postgres@127.0.0.1:54322/postgres"
        ]
      }
  

1752453897957_d.png

项目完善还需要漫长的对话及修正，因为上面生成的项目看似是生成完了，其实只是生成了一个大屏页面，业务页面其实都是空的，需要根据实际业务去设计，总体上来看，人工智能在前期方案设计及前端页面设计方面还是有很大用处的。

这是Cursor给我的Cursor+Supabase与传统开发的时间对比~

image.png