Vue 转 React 代码迁移

要解决的问题

把一个 Vue 项目迁到 React，最累的不是写新功能，而是逐文件翻译。一个 .vue 文件拆开后，template 要变成 JSX，<script> 里的 Options API 或 Composition API 要重写成 Hooks，<style> 还得迁到 CSS Modules。再加上 v-if、v-for、v-model 这些指令没有直接对应物，Pinia/Vuex 的状态模型、Vue Router 的路由守卫、VueUse 的生态工具，每一项都要手工找 React 的等价实现。本技能的目标是把这套翻译过程系统化：先分析架构，再分阶段执行迁移，同时保持业务逻辑不变。

核心能力与工作方式

技能按五个阶段推进：

• Stage 0 架构分析：先调用 code-reverse-replicate 梳理项目结构，生成组件映射表，明确迁移范围。
• Stage 1 组件转换：把 SFC 拆成 JSX + Hooks，模板指令逐条映射，v-if → 三元或 &&，v-for → .map()，v-model → value + onChange，生命周期按映射表转换，mounted → useEffect([], [])，computed → useMemo。
• Stage 2 状态管理：Pinia store 一对一迁到 Zustand，Vuex 按模块拆成 Zustand slice 或 Redux Toolkit slice，ref/reactive 转为 useState/useRef。
• Stage 3 路由迁移：Vue Router 的 createRouter、router-link、router-view 分别替换为 createBrowserRouter、<Link>、<Outlet>，路由守卫按场景用 loader 或高阶组件替代。
• Stage 4 工具层：axios 实例直接复用，VueUse 换 react-use/ahooks，UI 组件库按对等关系替换，如 Element Plus → Ant Design。
• Stage 5 工程化：vite.config.ts 去掉 Vue 插件换 React 插件，测试工具从 vue-test-utils 切到 @testing-library/react。

适用边界与注意点

• Teleport 和 KeepAlive 在 React 中没有原生等价物，需要用 Portal 或状态缓存自行实现。
• Vue 自定义指令无法 1:1 映射，必须按功能重写。
• Vue 2 项目迁移复杂度较高，建议先做架构分析，再按模块增量迁移，而非一次性全量切换。
• SFC 拆分后，单个 .vue 文件会生成多个 React 组件文件，文件组织需要重新规划。
• 样式隔离推荐使用 CSS Modules，以保持与 Vue Scoped CSS 类似的效果。