使用Cursor开发VUE的环境配置

📅 2026/6/27 2:24:01
使用Cursor开发VUE的环境配置
使用Cursor开发VUE的环境配置安装go扩展即安装官方的插件按CtrlShiftP输入 Go:Install/Update Tools安装所有工具尤其是gopls设置自动保存File - Preferences – Settings – Auto Save – 设置为 onFocusChange (此项位于VS Code Settings中)创建根目录并建前后端子目录your-project/ ├── frontend/ # Vue项目 ├── backend/ # Go项目打开your-project后会自动感知这是一个多项目的工作区项目初始化在AI指令面板中输入创建一个 Vue 3 TypeScript 项目使用 Vite 作为构建工具包含 - Pinia 状态管理 - Vue Router - Element Plus UI框架 放在 frontend 目录下后端同样处理初始化 Go 项目使用 Gin 框架 GORM目录结构如下 backend/ ├── cmd/ # 启动入口 ├── internal/ # 内部业务代码 ├── api/ # 路由和DTO ├── config/ # 配置管理 └── go.mod配置.cursorrules这是关键一步是让工具理解项目的核心在项目的根目录下创建 .cursorrules文件内容如下# 项目技术栈 技术栈 - 前端: Vue 3 TypeScript Vite Element Plus Pinia - 后端: Go Gin GORM PostgreSQL - 数据库: PostgreSQL使用 GORM # 默认回复规则 - 所有回复使用中文 - 复杂需求拆解成小任务分步实现 # Go后端规范 后端目录结构 - api/路由定义、请求DTO、响应DTO不写业务逻辑 - internal/service/业务逻辑层 - internal/repository/数据访问层DAO - internal/model/数据库模型 - internal/middleware/中间件JWT、CORS等 - pkg/通用工具函数 编码规范 - 工具函数只能放在 pkg/ 目录下 - 数据库连接统一通过 internal/database 获取 - Service层依赖Repository接口不直接依赖具体实现 - 错误处理必须显式禁止忽略error返回值 - API层只做参数绑定、校验和响应格式化 # Vue前端规范 前端目录结构 - src/views/页面组件 - src/components/可复用组件 - src/stores/Pinia状态管理 - src/api/API请求封装 - src/router/路由配置 - src/types/TypeScript类型定义 编码规范 - 使用Composition API script setup语法 - 组件命名使用PascalCase - 优先使用现有组件库Element Plus避免重复造轮子 - API调用统一封装在 src/api 中不要在组件内直接写axios有了这个文件每次生成代码都会遵循这些规范开始开发生成数据库模型请帮我设计一个后台管理系统的数据库模型需要 - users 表用户登录、基本信息 - roles 表角色 - permissions 表权限 使用 GORM 的 Model 定义支持 PostgreSQL生成CRUD代码请根据 User 模型生成完整的 RESTful API - POST /api/users - 创建用户 - GET /api/users - 列表查询支持分页、模糊搜索 - GET /api/users/:id - 获取详情 - PUT /api/users/:id - 更新用户 - DELETE /api/users/:id - 删除用户 要求 1. 使用 Gin 框架 2. 添加参数校验 3. 密码需要 bcrypt 加密 4. 遵循项目的分层架构生成前端页面请根据以下用户管理需求生成Vue页面 - 表格展示用户列表用户名、邮箱、角色、状态 - 支持分页 - 支持按用户名搜索 - 弹窗表单用于新增/编辑用户 - 删除按钮带二次确认 使用 Vue 3 Element Plus联调API请帮我生成 TypeScript 的 API 调用文件对接后端接口 - 用户列表GET /api/users - 创建用户POST /api/users - 更新用户PUT /api/users/:id - 删除用户DELETE /api/users/:id 包含完整的请求/响应类型定义关于技巧对于复杂功能可以先分析再处理代码第一步分析 请分析用户权限校验的业务逻辑输出关键决策点 第二步实现 根据上述分析用Go实现相同逻辑注意 - 使用JWT解析token - 从Redis获取用户权限缓存 - 返回是否需要拦截的中间件函数使用快速引用commit 分析当前的变更检查代码问题 workspace: 理解整个项目的上下文 filexxx.go :引用特定文件调试与修复报错时选中错误信息右键 Explain Error会 分析错误原因 提供解决方案 自动修改代码生成单元测试请为用户注册接口生成单元测试 - 测试正常注册场景 - 测试用户名已存在 - 测试邮箱格式错误 - 使用 testify/assert 库