用Cursor快速搭建Vue管理系统，自动生成Vue3+TS+Vite项目、主布局、RBAC路由、权限守卫及用户管理模块，并接入真实API。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用Cursor快速搭建一个功能可用的Vue管理系统，避免从零手写路由、布局、权限逻辑等重复性基建代码。
初始化项目并配置AI感知环境
打开Cursor编辑器，确保已登录并启用AI服务。按下Cmd/Ctrl+K调出AI命令面板，输入以下指令：
“创建一个Vue3 + TypeScript + Vite项目，启用Vue Router和Pinia，禁用ESLint和Prettier，项目名叫admin-cursor”
Cursor会自动生成完整命令并执行：npm create vue@latest admin-cursor → 选择TypeScript、Router、Pinia → 全部选No → 完成后自动进入目录。
立即学习“前端免费学习笔记（深入）”；
运行npm install安装依赖，再执行npm run dev验证服务是否启动成功。此时浏览器应显示Vite默认欢迎页，【必须看到该页面才代表基础环境就绪】。
生成主布局与左侧菜单结构
在src/layouts目录下新建MainLayout.vue文件，将一张主流后台系统布局图（含顶部导航栏+左侧折叠菜单+右侧内容区）拖入Cursor编辑器窗口。
右键图片→选择“Generate code from image”，Cursor会识别视觉结构并输出带响应式、可折叠菜单的完整布局组件，包含el-aside、el-main等Element Plus语义化标签。
生成后立即检查<el-menu>是否绑定:default-active="$route.path"，若未绑定，手动补上——否则菜单高亮状态不会随路由变化。
注入动态路由与权限守卫
第一步：在src/router/index.ts中，向AI发送指令：“基于RBAC权限模型生成Vue Router 4嵌套路由配置，包含/login、/、/user、/role四个路由，其中/为重定向到/dashboard，子路由需挂载在MainLayout下”
第二步：AI返回代码后，确认routes数组中每个路由都含有meta字段，例如{ meta: { roles: ['admin'] } }——这是后续按钮级权限控制的依据。
第三步：在router.beforeEach守卫中插入权限校验逻辑，Cursor会自动生成类似“if (to.meta.roles && !userStore.roles.includes(to.meta.roles[0])) { return '/403' }”的判断语句。
第四步：在src/stores/user.ts中用Pinia定义roles字段，并在登录成功后调用setRoles()方法赋值——【这一步漏掉会导致所有守卫失效】。
一键生成用户管理模块页面
方法一：在src/views目录下新建UserListView.vue，对空文件右键→“Describe and generate”，输入：“生成用户列表页，含搜索栏、el-table展示id/用户名/邮箱/状态列、操作列含编辑和删除按钮，使用el-pagination分页”
方法二：直接复制一段已有列表页代码，在光标处按Cmd/Ctrl+L呼出行内AI，输入：“把当前表格字段改为适配用户管理API返回结构，字段映射：data.id→id，data.userName→username，data.email→email，data.status→status”
生成后立刻检查v-model绑定的查询参数对象是否与API要求一致，比如后端要求pageNum而非currentPage——不匹配会导致分页失效。
接入真实API并替换Mock数据
在src/api/user.ts中，用AI生成标准请求函数：输入“生成用户列表、新增、修改、删除四个API函数，URL前缀为/api/users，使用Axios封装，GET传params，POST/PUT传data”
生成完毕后，打开vite.config.ts，在server.proxy中添加：'/api': { target: 'http://localhost:8081', changeOrigin: true }——【target地址必须与后端实际启动端口一致】。
最后删掉mock目录及所有Mock.js相关引用，确保开发环境下请求真实后端接口而非模拟数据。
