大家好，我是锋哥。最近发布了《Cursor+Claude AI编程 1小时打造Java微信小程序商城系统(SpringBoot4+Vue3) 》。
image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/2b8f0cfab8a74b5ea947d4e702825746~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5bCP6ZSLamF2YTEyMzQ=:q75.awebp?rk3s=f64ab15b&x-expires=1790246741&x-signature=lu1%2Bk%2FsZGebvniKJAoRqgTfpxI4%3D) 本课程主要讲解根据我们提供的项目需求使用Cursor+Claude AI编程设计一个基于Java的微信小程序商城系统，SpringBoot后端，Vue3前端。以及把常用的Cursor Rules规则包应用，Skills技能包应用讲解下。用AI开发项目的时候，也可能会有报错或者功能缺陷，我们通过这个实战来讲解下在Cursor中如何来修复这些问题和缺陷。[《Cursor+Claude AI编程 1小时打造Java微信小程序商城系统(SpringBoot4+Vue3) 》 （该图片在源文档中已缺失或失效）
项目需求分析设计
功能需求：
生成一个微信小程序商城系统，SpringBoot后端，Vue3前端。
1，微信小程序项目是weixin目录，SpringBoot后端项目是server目录，管理员端是client目录。
2，要求普通用户访问的是微信小程序端。管理员后台管理页面用Vue3，也就是client项目目录。
3，数据库是mysql5.7，生成建表sql语句，以及测试数据。
4，微信小程序端以及Vue管理端要求页面美观
5，支付功能模拟支付即可，不需要真实支付
6，微信小程序端和Vue管理端调用的都是SpringBoot后端接口。
7，微信小程序的登录功能使用微信官方登录接口，不需要用用户名密码方式。
Cursor里Rules规则包应用
规则为 Agent 提供系统级指令。它们将提示词、脚本等内容打包在一起，便于在团队内管理和共享工作流。用于引导 Agent 行为，例如强制代码规范、最佳实践或语言要求。
添加规则：Rules 数据库名字以 db_ 开头,项目里连接mysql数据库密码是 123456 , 生成的测试数据用户或者管理员密码要md5加密，原密码是123456
全局配置
Include third-party skills, subagents, and other configs：开启后，会自动应用来自其他工具的 Agent 配置，实现能力扩展。
当前已配置一条规则：Always respond in Chinese-simplified，强制 Agent 始终使用简体中文进行回复。
Rules（规则）
作用：用于引导 Agent 行为，例如强制代码规范、最佳实践或语言要求。
应用方式：可以设置为全局生效，或按文件路径、手动触发。
操作：点击 + New 可以创建新规则。
点 New+
Cursor里Skills技能包应用
Agent Skills 是一个用于为 AI 智能体扩展专门能力的开放标准。Skills 将特定领域的知识和工作流封装起来，智能体可以调用这些 Skills 来执行特定任务。
Skills（技能）
作用：是 Agent 的专业能力模块，用于完成特定任务，如代码重构、测试生成等。
触发方式：Agent 会在相关场景自动调用，也可以通过 / 命令手动触发。
当前状态：No Skills Yet，可点击 New Skill 进行创建。
网页风格设计技能包添加： [code] csharp 体验AI代码助手 代码解读 复制代码
npm install -g uipro-cli
cd /path/to/your/project
uipro init --ai claude # Claude Code uipro init --ai cursor # Cursor uipro init --ai windsurf # Windsurf uipro init --ai antigravity # Antigravity uipro init --ai copilot # GitHub Copilot uipro init --ai kiro # Kiro uipro init --ai codex # Codex CLI uipro init --ai qoder # Qoder uipro init --ai roocode # Roo Code uipro init --ai gemini # Gemini CLI uipro init --ai trae # Trae uipro init --ai opencode # OpenCode uipro init --ai continue # Continue uipro init --ai codebuddy # CodeBuddy uipro init --ai all # All assistants
[/code]
命令行执行：npm install -g uipro-cli
cursor终端输入：uipro init --ai cursor
这样项目里就加入了技能包：
我们用 / 指定技能包：
这样设计的页面就参考使用了ui-ux-pro-max技能包：
我们来看下用了技能包做出来的页面效果，整体还是不错的。
初始化SpringBoot，Vue以及微信小程序项目
申请微信小程序测试号
我们先申请下微信小程序测试号：
得到小程序ID和密钥
新建SpringBoot项目
首先新建weixin_shop项目父目录，然后我们在父目录新新建server项目，也就是java后端服务项目，框架采用SpringBoot
依赖选SpringBoot，SpringSecurity，Mybaits，其他的依赖交给AI搞。
这样我们java项目就新建好了
新建Vue3项目
我们前端Vue项目采用Vite构建
进入weixin_shop命令行，输入npm create vite@latest
输入项目名称 client
再选vue框架，javascript语言
这样我们就把前端vue项目新建好了
新建微信小程序项目
先在weixin_shop下新建weixin项目目录：
然后新建小程序，记得要贴下你的APPID
语言模版可以选javascript
这样我们就把微信小程序项目新建好了：
利用Cursor生成微信小程序商城项目
cursor的rules规则加一个数据库表名以t_开头。
功能需求：
生成一个微信小程序商城系统，SpringBoot后端，Vue3前端。
1，微信小程序项目是weixin目录，SpringBoot后端项目是server目录，管理员端是client目录。
2，要求普通用户访问的是微信小程序端。管理员后台管理页面用Vue3，也就是client项目目录。
3，数据库是mysql5.7，生成建表sql语句，以及测试数据。
4，微信小程序端以及Vue管理端要求页面美观
5，支付功能模拟支付即可，不需要真实支付
6，微信小程序端和Vue管理端调用的都是SpringBoot后端接口。
7，微信小程序的登录功能使用微信官方登录接口，不需要用用户名密码方式。
我们先选Plan和Cursor沟通下方案，模型选 Opus4.6
AI很快给我们生成了设计方案：
但是有一点我不满意，要给我降级SpringBoot版本，我不同意，我选择用Mysql8。
继续沟通：
沟通后，AI给了我们新方案
然后我们点击 Build 构建，大概生成了20分钟，生成完了：
我们来运行下项目：
先把数据库建了，把表导入下：
然后我们启动下server后端SpringBoot项目：
发现报错了。这个我们下一讲去解决。
前端Vue再试下，没有编译问题。还好。
小程序端也能动，因为后端的问题，没数据。我们下一讲解决，
利用Cursor修复bug和完善功能
前面后端的项目有个问题：
我们直接把这个复制下，贴到cursor上，还是先plan沟通：
检测是依赖问题，直接点Build就可以修复。其他报错问题，也类似交给AI处理即可。所以后端问题还是好解决的。
接着继续测试前端vue项目，发现用户管理，有个状态字段被挤压：
我们把问题丢给AI 先plan下，注意问题要描述清楚：
AI给了我们解决方案，把字段宽度扩大下，我们认可方案的话，点击Build，提交：
这样就解决了问题：
最后就是小程序了。
首先是登录问题，小程序头像和昵称默认空和微信用户。我们要修改下基础库版本，改成 2.21.2- 2.27.1
改成后。直接可以用当前登录的用户头像和昵称了。
第二个问题是收货地址问题，AI给我们的是写死的几个地址。
我们让AI改成 省市区三级联动下拉框。
AI给了我们官方的方案 picker 方案，我们点 Build 提交
最后一个是缺陷问题，底部的tabbar图标太丑了。
换下图标：
这样立马高大上了。
