在cursor中快速生成可复用vue页面需：1. 在src/views下创建pascalcase命名的.vue文件；2. 使用defineoptions声明name；3. 通过composable或内联方式封装数据逻辑；4. 在router中配置异步路由；5. 添加插槽与类型化props支持复用。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

在Cursor中快速生成结构清晰、逻辑独立、可复用的Vue页面，需绕过默认模板的硬编码路径和耦合组件，直接基于项目实际路由与状态管理约定构建。

创建带标准结构的Vue页面文件

在项目 src/views 目录下右键 → New File → 输入 ProductList.vue（命名需符合 PascalCase，且与路由名一致）。

输入以下基础骨架，注意 script setup 语法必须启用 defineOptions，否则后续路由注册会丢失页面标题：

<script setup><br>defineOptions({ name: 'ProductList' })<br></script>

注入可复用的数据获取逻辑

方法一：使用组合式函数封装请求

在 src/composables/useProductList.ts 中新建文件，写入：

import { ref, onMounted } from 'vue'
import { getProductList } from '@/api/product'

export function useProductList() {
const list = ref([])
const loading = ref(false)

const fetch = async () => {
loading.value = true
list.value = await getProductList()
loading.value = false
}

onMounted(fetch)
return { list, loading, fetch }
}

回到 ProductList.vue，在 <script setup> 中导入并解构：<br>const { list, loading, fetch } = useProductList()</script>

方法二：直接调用 API 并暴露刷新能力（适合简单页）

不引入 composable，改用内联逻辑，但必须将 fetch 声明为 const 变量而非函数表达式——否则 Cursor 的 AI 补全无法识别该方法可用于模板绑定：
const fetch = async () => { /* 实现同上 */ }
onMounted(fetch)

配置路由使页面可被跳转复用

第一步：打开 src/router/index.ts

check-vue-style

检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载

第二步：在 routes 数组中插入新路由对象，path 必须以斜杠开头，component 必须使用异步 import() 语法，否则热更新失效：

{
path: '/products',
name: 'ProductList',
component: () => import('@/views/ProductList.vue')
}

第三步：确认 router.ts 中已启用 history 模式，且 createRouter 调用时传入了 routes 和 history 参数。若缺失 history，页面将无法响应 URL 变化。

第四步：保存文件，Cursor 会自动触发 Vite 重启；如未重启，手动按 Ctrl+S 触发一次保存即可。

添加插槽支持以增强复用性

在 ProductList.vue 的

{{ title || '商品列表' }}

在 script setup 中定义可选 props，并设默认值避免子组件渲染报错：

const props = defineProps()

【title 是可选 prop，但必须显式声明类型，否则 Cursor 的 TypeScript 推导会将它识别为 any，导致模板中 {{ title }} 报错】

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！