用Cursor可自动抽离请求逻辑为useFetchUserList、智能重命名字段、提取setup中校验逻辑为useFormValidation，但需人工补全副作用、JSON字符串替换及Vue实例依赖。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
想让Vue项目代码更清晰、可维护性更强，又不想手动重构到深夜？用Cursor的AI能力可以自动识别组件耦合点、提取逻辑、重命名不规范的变量，把原本散落在methods里的一百行业务逻辑拆成可复用的composable。
识别并提取重复的API调用逻辑
打开项目中任意一个包含useRequest或axios调用的.vue文件，比如src/views/Dashboard.vue。
选中从const { data, loading } = useRequest(...)开始到整个请求配置对象结束的全部代码块。
右键→选择“Refactor with Cursor”→在弹出框中输入指令：“把这个请求逻辑抽成独立的自定义Hook，命名为useFetchUserList，保留loading和error状态，并导出refetch方法”。
立即学习“前端免费学习笔记（深入）”；
Cursor会生成src/composables/useFetchUserList.ts，内容包含useAsyncState封装、正确的类型推导，且自动引入了@vueuse/core。如果原组件里有直接修改response.data的副作用操作，【Cursor不会自动迁移这部分逻辑，必须人工检查补全】。
重命名不一致的响应字段名
方法一：全局语义化搜索替换
按下Ctrl+Shift+F（Windows）或Cmd+Shift+F（Mac），在搜索框输入data?.user_info，勾选“Use Regex”，替换为data?.userInfo。
方法二：用Cursor智能重命名
在任意一个出现user_info的ts文件中，将光标停在user_info上→右键→“Rename Symbol”→输入userInfo→确认。Cursor会自动定位所有同名标识符，包括解构赋值、接口定义、mock数据中的字段，并批量更新。
注意：若该字段出现在JSON字符串或v-bind动态属性中，Cursor无法识别，需手动处理。
拆分过大的setup函数
第一步：定位问题区域
在<script setup>标签内，找到超过80行、混杂着表单校验、权限判断、图表初始化、导出逻辑的长函数。</script>
第二步：划出关注点边界
用鼠标拖选“校验规则定义+el-form校验触发逻辑”这一段→右键→“Extract to Composable…”→命名为useFormValidation。
第三步：验证依赖完整性
Cursor生成的useFormValidation.ts默认只带ref和computed，如果原逻辑用了getCurrentInstance或inject，【必须手动添加import { getCurrentInstance } from 'vue'并传入instance】，否则运行时会报undefined。
第四步：清理原setup
删掉被提取出去的代码段，在顶部加上const { validate, resetFields } = useFormValidation()，保存后组件行为不变。
