跨项目迁移的AI协作实践：从反复返工到一次成功

你说得对我来重新整合把两篇的优点结合起来同时修正不准确的表述。跨项目迁移的AI协作实践从反复返工到一次成功前言我一直很好奇一个问题AI到底能不能帮我在两个不同的项目之间迁移功能正好手头有两个技术栈完全不同的前端项目A项目Vue CLI Vue 2 Element UI Vuex某个功能模块只有菜单配置页面没做B项目Vue 3 Vite Element Plus Pinia同样的功能模块完整可用于是我用这个场景做了一次实验看看AI能不能帮我把B项目的功能搬到A项目里。我不懂前端开发正好可以测试——在不熟悉的领域AI到底能帮到什么程度需要我提供多少信息需要反复调试多少次要消耗多少Token这篇文章记录了我的实验过程和最终结论。一、背景项目情况A项目目标项目旧技术栈Vue CLI Vue 2 Element UI Vuex目标模块完全不可用只有菜单配置前端页面都没做B项目源项目新技术栈Vue 3 Vite Element Plus Pinia目标模块功能完整可用C项目后端同时服务于A、B两个项目核心诉求让A项目的目标模块也能正常使用B项目就不再需要了。我的困境我不太会前端开发。这意味着我不知道代码应该放在哪里我不知道路由怎么配置我不知道接口前缀是什么我无法判断AI给的方案是否可行我只能不断让AI试错消耗大量Token二、五次尝试四次失败第一次尝试直接迁移想法最简单直接把B项目的功能模块复制到A项目。做法让AI分析AB项目的代码框架罗列迁移清单。结果AI分析后发现两个项目技术栈差别太大——Vue2 vs Vue3、Element UI vs Element Plus、Vuex vs Pinia基本无法直接复制。放弃。教训技术栈不同不能硬搬。第二次尝试升级A项目想法既然B项目技术栈更新不如把A项目升级到Vue3保持跟B一样然后直接把B迁移过来。做法评估升级A项目的可行性。结果升级涉及面太广——Vue CLI升级Vite、Vue2升Vue3、Element UI换Element Plus、Vuex换Pinia还要考虑大量依赖兼容性。不确定因素太多风险太大。放弃。教训为了一个模块升级整个项目得不偿失。第三次尝试自动代码转换想法让AI在迁移代码时自动将Vue3代码转换成Vue2代码。做法使用AI工具直接转换B项目的Vue3组件为Vue2。尝试了Trae、Kiro、Cursor等工具Cursor额度用超了也没成功。结果迁移后效果很不理想。两边项目风格差异太大转换后的代码要么页面丢失要么点击没反应。换了好几个AI工具都不行。教训自动代码转换在技术栈差异大的情况下效果很差。第四次尝试完整迁移方案想法让AI先分析两边项目框架差异决定迁移哪些模块代码自己给出完整迁移方案。做法让AI制定详细的迁移计划包括UI组件转换、状态管理转换、公共组件处理、工具函数迁移、路由和权限配置等。结果AI给出的方案非常复杂涉及大量转换工作。虽然都是AI在处理但中间只要有一个环节出问题整个系统就容易崩溃。调试成本极高。教训方案太复杂环节太多任何一个环节出错都可能导致整体失败。第五次尝试只参考不迁移最终成功想法不迁移B项目的代码只参考B项目的样式和功能在A项目中用A项目的技术栈重新写一遍。做法我不会前端只能按照AI给的方案不断操作和测试。遇到问题就让AI处理中间换了好几个AI工具消耗了大量Token最后总算完成了。结果成功了最终实现了A项目的目标模块功能完整代码风格与A项目一致。成功关键不是迁移代码而是参考设计重新实现。三、核心洞察问题不是AI不够聪明在反复失败和调试的过程中我逐渐意识到一个关键问题我一直在问错误的问题。错误的问题 vs 正确的问题我原来问的实际上应该问的怎么把B项目迁移到A项目怎么让A项目拥有B项目的功能怎么转换Vue3代码到Vue2A项目现有的代码是怎么写的怎么处理组件库不兼容用A项目的组件库怎么实现同样的界面怎么让AI自动完成迁移我需要给AI提供哪些信息才能一次成功真正的难点这个任务真正的难点不是技术栈转换也不是代码迁移而是我是一个不会前端的人却要让AI帮我在一个不熟悉的项目中实现功能。这就导致了几个核心问题1. 我不知道什么信息是关键的我不知道文件应该放在哪里、路由应该怎么配置、接口前缀是什么。这些在懂前端的人看来是基础信息但对我来说完全是盲区。2. 我无法判断AI的方案是否可行AI给出一个方案我看不出哪里可能出问题。只能先让AI做等出错了再回来调试。3. AI需要大量猜测因为我没有提供足够的信息AI只能自己猜。猜文件放哪里、猜路由怎么配、猜接口前缀是什么。每次猜错就要返工一轮。4. 我需要消耗大量Token来试错每次AI猜错我就要消耗Token让它重新分析和修复。一个错误可能来回好几轮。核心问题的本质AI需要猜测的信息太多了。每次AI需要猜测就可能猜错猜错就要返工。而我又不会前端只能不断让AI调试修复消耗大量Token。这不是AI不够聪明而是我没有给它足够精确的信息。AI需要猜测的信息清单信息类型AI会怎么猜结果文件放哪里按常规放在src/views/system/user/菜单接口要求的是user目录页面找不到路由路径自己拼一个路径如/system/user与菜单接口返回的路径不匹配代码风格混用两个项目的写法代码风格不统一接口前缀可能用B项目的前缀A项目用不同的前缀接口调不通UI组件混用两个UI库的组件组件不兼容页面报错用数据说话我在Kiro上做了对比测试第一次尝试让AI自己摸索消耗15%的Token额度结果只完成了第一个模块而且过程中多次返工、调试问题AI每次都要猜测文件位置、路由配置、接口前缀猜错一次就返工一轮第二次尝试提供完整信息清单消耗1%的Token额度结果顺利完成一个模块代码一次通过原因AI不需要猜测任何信息直接按照清单执行15倍的差距就是消除AI猜测带来的效率提升。这也解释了为什么很多人觉得AI烧Token——不是AI的问题是我们没有给它足够的信息。四、问题的根源通过这次经历我发现问题的根源是我不知道需要给AI提供什么信息AI也不会主动问我需要什么。每次我开始一个任务我会按照自己的理解给AI一个指令。AI根据这个指令开始工作遇到信息缺失就自己猜测。猜对了还好猜错了就开始出错。我看到了错误再回来纠正。如此反复。这个过程的核心问题是AI的猜测和我预期的结果之间存在一个信息差。这个信息差包括项目结构信息差我不知道文件应该放哪里AI也不知道配置信息差我不知道路由怎么配AI也不知道代码风格信息差我知道A项目有自己的写法但没告诉AI接口信息差我知道两个项目的接口前缀不同但没告诉AI每次信息差存在AI就必须猜测。每次猜测就有概率出错。五、解决方案消除信息差最终的解决方案很简单但我是通过不断试错才悟出来的把所有AI需要猜测的信息都明确地告诉它。具体需要提供的信息经过多次试错我总结出了跨项目迁移必须提供的核心信息信息项说明如何获取文件存放目录根据菜单接口的component字段决定让AI读取菜单接口返回的数据路由path菜单接口返回的具体路径让AI读取菜单接口返回的数据接口前缀A项目A项目的API代理前缀查看A项目的配置文件接口前缀B项目B项目的API代理前缀查看B项目的配置文件参考风格文件A项目中指定一个现有文件作为代码模板选择一个功能类似的页面参考功能文件B项目中要模仿的具体文件指定B项目的目标模块路径成功的关键成功的关键不是让AI先告诉我需要什么而是我通过不断的试错终于知道了AI需要什么信息。然后把这些信息整理成一个清单在每次迁移前填写好AI就能一次成功。换句话说我用Token买到了需要提供什么信息这个知识。六、最终的方法论1. 核心原则把所有AI需要猜测的信息都明确地告诉它。目录、路径、前缀、参考文件一个都不能少。每让AI猜测一次就可能多一轮返工多消耗一次Token。2. 跨项目迁移的信息清单每次迁移前填写这个清单## 迁移前必须提供的信息 ### 基础信息 - [ ] A项目路径_________________ - [ ] B项目路径_________________ - [ ] 要迁移的模块名称_________ ### 代码风格参考A项目 - [ ] 参考文件路径页面结构_________________ ### 业务功能参考B项目 - [ ] 参考文件路径主页面_________________ ### 路由和目录信息 - [ ] 菜单接口component字段值_________ - [ ] 菜单接口path字段值_________ - [ ] A项目接口前缀_________ - [ ] B项目接口前缀_________ ### 转换规则 - [ ] 接口前缀转换规则_________ → _________ - [ ] UI组件库转换_________ → _________3. 各方案对比方案工作量风险结果直接迁移小高❌ 技术栈不兼容升级A项目极大极高❌ 不确定因素太多自动代码转换中高❌ 转换效果差完整迁移方案大中❌ 环节太多易崩溃参考重写信息清单中低✅ 成功4. 成功的提示词模板## 任务从B项目迁移[模块名称]到A项目 ### 项目信息 A项目目标[名称] 路径[路径] 技术栈[Vue2Element UI] B项目源[名称] 路径[路径] 技术栈[Vue3Element Plus] ### 关键信息 1. 代码风格参考A项目 [具体文件路径] 2. 功能参考B项目 [具体文件路径] 3. 文件存放目录src/views/[component值]/component [值] 4. 路由path[菜单接口返回的path] 5. 接口前缀B项目用 [前缀1]A项目用 [前缀2] ### 转换规则 - 接口路径替换前缀其余不变 - UI组件B项目的Element Plus → A项目的Element UI - 语法B项目的Composition API → A项目的Options API ### 执行要求 1. 先读取两个参考文件输出分析报告 2. 确认无误后再生成完整代码 3. 代码完全遵循A项目的风格七、写在最后这次经历让我深刻体会到两件事第一件问题不是AI不够聪明以前我总觉得AI不够智能需要反复调教。现在我明白了问题是我不知道如何与AI协作。在一个我不熟悉的领域我不知道什么信息是关键的也不知道AI需要什么。我只能不断试错用Token买经验。第二件知识是有代价的最终总结出的这个信息清单看起来很简单。但这是我用4次失败、无数Token、好几个AI工具换来的。如果我一开始就知道需要提供这些信息可能一次就能成功。但问题是一开始我根本不知道需要提供什么。这个知识本身就是通过实践获得的。给后来者的建议如果你也在做类似的跨项目迁移不要直接迁移代码要参考重写提前准备信息清单目录、路由、接口前缀、参考文件让AI先分析再实现把这次的经历记下来下次就知道需要什么了希望这篇文章能帮你少走弯路少消耗Token。附录快速参考卡## 跨项目迁移三步走 ### 第一步准备信息 - [ ] A项目参考文件代码风格 - [ ] B项目参考文件业务功能 - [ ] 文件存放目录component字段 - [ ] 路由path菜单接口返回 - [ ] 接口前缀两个项目各是什么 ### 第二步让AI分析 请先读取两个参考文件输出分析报告不要写代码 ### 第三步执行迁移 基于以上分析按照信息清单实现