Cursor可快速生成Vue 3列表页和详情页：自动创建ListPage.vue（含搜索、分页、跳转）、DetailPage.vue（接收id参数、查mock数据），并配置路由、补充类型定义与mock数据，全程基于Composition API和Vue Router 4。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用Cursor快速生成Vue列表页和详情页，省去手动创建文件、写路由、搭骨架的重复劳动，直接产出可运行的页面结构和基础交互逻辑。
初始化项目并启用AI辅助
确保已安装最新版Cursor（v0.45+），打开一个空文件夹或已有Vue 3 + Vite项目根目录。
点击左下角「AI」按钮 → 选择「New Chat」→ 输入指令：【请基于当前项目技术栈（Vue 3 + Composition API + Vue Router 4）生成一个商品列表页和对应详情页】。
等待Cursor分析项目结构（它会自动读取package.json、vite.config.ts和src/router/index.ts）。
立即学习“前端免费学习笔记（深入）”；
生成列表页（ListPage.vue）
在AI对话框中追加指令：「生成ListPage.vue，含分页加载模拟数据、搜索框、每项带跳转到详情页的链接」。
Cursor会输出完整组件代码，复制粘贴到src/views/ListPage.vue。
注意检查是否自动引入了router.push——若未引入，需手动在setup中添加：import { useRouter } from 'vue-router'，否则点击跳转会报错。
这一步操作起来很简单，直接把文件拖进去就行。
生成详情页（DetailPage.vue）
方法一：在同一次对话中继续输入「接着生成DetailPage.vue，接收路由参数id，根据id从mock数据中查出对应商品详情，显示标题、描述、价格」。
方法二：新开一个AI chat，输入「用Vue 3 Composition API写一个接收$route.params.id的详情页，数据来自静态数组，要求有返回列表页按钮」。
【必须确认DetailPage.vue中使用了useRoute()而非this.$route，否则在setup语法下无法获取参数】。
生成后立即在src/views/下新建DetailPage.vue，粘贴内容。
配置路由
第一步：打开src/router/index.ts。
第二步：在routes数组末尾插入两条新路由：
{ path: '/', redirect: '/products' },
{ path: '/products', name: 'ProductList', component: () => import('@/views/ListPage.vue') },
{ path: '/products/:id', name: 'ProductDetail', component: () => import('@/views/DetailPage.vue') }
第三步：保存文件，Vite会热更新路由配置。
如果漏掉name字段，后续编程式导航（如router.push({ name: 'ProductDetail', params: { id } })）将失效。
补充Mock数据与类型定义
在src/utils/mockData.ts中创建模拟商品数组，每项含id、title、desc、price字段。
在src/types/index.ts中定义接口：export interface Product { id: string; title: string; desc: string; price: number; }。
这一步不能跳过，否则ListPage.vue里的v-for和DetailPage.vue中的类型推导会报红。
把mockData.ts路径导入ListPage.vue和DetailPage.vue的script setup顶部。
