用Cursor重构Vue项目需建立人机协作控制链：先启用项目索引并忽略node_modules，再通过Composer批量重命名、Agent拆分组件、.cursorrules锁定架构约束，最后三重验证确保质量。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用Cursor重构Vue项目不是简单地让AI重写代码，而是建立人机协作的精准控制链——既要让AI理解项目上下文，又要守住架构边界、组件职责和类型安全。盲目触发全量重写会导致Composition API与Options API混杂、Pinia状态管理被绕过、TS类型定义丢失。
第一步：激活项目级上下文感知
打开项目根目录，在Cursor中按 Cmd+Shift+P（Mac）或 Ctrl+Shift+P（Windows），输入「Settings」打开设置面板。
进入「Features」→「Codebase Indexing」→ 开启「Enable Codebase Indexing」。
在项目根目录新建 .cursorignore 文件，写入以下内容：
node_modules/
dist/
coverage/
*.log
.env.local
立即学习“前端免费学习笔记（深入）”；
【必须忽略 node_modules】 否则索引过程会卡死或内存溢出，且AI无法聚焦业务代码。
等待右下角提示「Indexing complete」后，再进行任何重构操作——此时AI才能准确识别 useUserStore() 来自 src/stores/user.ts，而非凭空生成一个同名但无关联的 store。
第二步：用 Composer 批量重命名并同步更新引用
当你要将旧组件 UserList.vue 重命名为 MemberList.vue，不能只改文件名。
方法一：侧边栏点击「Composer」→ 输入指令：
「将所有对 UserList.vue 的 import 和路由配置中的路径，统一替换为 MemberList.vue，并同步更新组件内使用的 useUserList composable 名称」
方法二：选中 UserList.vue 文件 → 右键 → 「Refactor with AI」→ 选择「Rename symbol across project」→ 输入新名称 MemberList → 点击「Apply」。
这一步会自动修改：
• src/views/Dashboard.vue 中的 import UserList from '@/components/UserList.vue'
• src/router/index.ts 中的 component: () => import('@/components/UserList.vue')
• 若组件内部调用了 useUserList()，也会同步改为 useMemberList()（前提是该函数名符合命名一致性规则）。
第三步：用 Agent 拆分臃肿组件（含逻辑迁移）
面对一个 1200 行的 OrderDetail.vue，不要让它自己“优化”，要明确指令边界。
第一步：在AI侧边栏输入：
「分析 src/views/OrderDetail.vue 的结构，识别出订单信息展示、物流跟踪、售后操作三个独立逻辑区块」
第二步：确认识别结果无误后，输入：
「基于识别结果，创建三个新组件：
• OrderInfoCard.vue（提取订单基础字段、价格计算逻辑）
• LogisticsTracker.vue（提取地图渲染、节点状态、时间轴）
• AfterSaleActions.vue（提取按钮组、弹窗逻辑、状态校验）
并将原组件中对应代码完整迁移过去，保留原有 props 类型定义和 emits 声明」
第三步：运行 npm run type-check 验证 TS 类型是否连贯——AI可能遗漏 defineEmits 中的事件名拼写，必须人工核对。
第四步：在原 OrderDetail.vue 中用 <OrderInfoCard /> 等标签替换对应区块，并传入必要 props。
第四步：用 .cursorrules 锁定重构红线
在项目根目录创建 .cursorrules 文件，写入不可妥协的约束：
「本项目使用 Vue 3 + script setup + TypeScript，所有新组件必须使用 defineProps 和 defineEmits 显式声明；禁止出现 this、data()、mounted 等 Options API 语法；Pinia store 必须通过 useXXXStore 调用，不得直接 new Store()；CSS 必须使用 scoped 或 module 方式隔离」
启用该规则：
设置 →「Rules for AI」→ 勾选「Include .cursorrules file」。
此后所有 AI 生成的代码都会被强制校验——若你输入「写一个用户登录表单」，AI 就不会输出 export default { data() { return { ... } } }，而是直接生成 <script setup lang="ts"> const props = defineProps<{ disabled?: boolean }>();。
第五步：执行重构后的三重验证
1. 运行 npm run lint 检查 ESLint 规则是否被破坏（如 missing eslint-disable 注释、未使用的变量）。
2. 在浏览器中打开开发服务器，手动点击每个涉及重构的页面，观察控制台是否有 Failed to resolve component 或 Invalid prop 报错。
3. 打开 Cursor 的「AI Review」功能（设置 → Features → AI Review → Enable auto-review），对刚修改的文件逐个触发审查，重点关注「Potential type mismatch」和「Unused import」两类警告。
