阿里Qoder与GLM-5.1组合表现炸裂

先说一个核心判断：想让老项目从Vue2平滑升级到Vue3，很多团队都在这上面费了不少力气。但如果选对工具、理清思路，整个过程其实可以顺畅很多。今天就来聊聊我们如何借助Qoder配合GLM-5.1，将mall-app-web这个电商实战项目的移动端商城，一步步从Vue2迁移到Vue3——整体虽不轻松，但每个阶段都有章可循。

mall-app-web项目概况

mall-app-web是mall电商实战项目的移动端版本，采用uni-app+Vue3架构重构实现。功能覆盖相当全面，包括首页门户、商品搜索、商品展示、品牌专区、购物车、订单流程、支付、会员中心等常见电商模块。

• 项目地址：github.com/macrozheng/…
• 文档网站：www.macrozheng.com

项目演示：

（图片占位）

Vue2迁移至Vue3全过程

搭建uni-app+vue3项目脚手架

迁移的第一步，自然是先搭建一个基于新版uni-app+Vue3的脚手架。这个脚手架不需要过于复杂，核心目标是确保项目依赖正常运行、基础功能打通即可。以mall-app-web为例，我们先搭建了一个页面框架，然后添加了首页、分类、购物车、个人中心这几个基础页面，页面内容先用空白页占位，重点是把整体架子立起来。

（图片占位）

接下来就是网络请求、数据存储、目录结构等基础设施。注意，这里的脚手架是从Vue2项目手动升级而来，当然你也可以直接在GitHub上找一个现成的Vue3项目，让Qoder基于该项目进行搭建。

升级后的技术栈变化较大，具体如下：

制定迁移进度表

脚手架就位后，接下来最关键的一步是让Qoder生成一份迁移进度表。毕竟整个迁移不可能一蹴而就，有了这张表，后续的工作节奏和完成进度就能一目了然。

我们把迁移按页面功能拆分为9个阶段，每个页面都有对应的迁移状态标记。

（图片占位）

Vue2升级Vue3实现流程

既然采用按页面逐级迁移的策略，就需要一个清晰的单页面迁移计划。操作起来并不复杂，直接输入提示词：

现在想迁移首页`/pages/index/index`对应功能，从vue2升级到vue3，请帮我规划一个迁移计划。

Qoder会生成对应的计划，你可以根据实际需求调整。迁移了几个页面之后，我们就可以让Qoder创建一个Skill，专门用于实现单个页面从Vue2到Vue3的自动化迁移。

生成的Skill存放在项目的.qoder/skills目录下，整个Skill流程共分为7个阶段。

（图片占位）

使用方式也很简单：从Qoder的设置中直接导入即可。一旦Skill创建完成，每次提到“Vue2升级到Vue3”，系统就会自动调用该流程来执行迁移。

（图片占位）

制定开发规范

迁移了几个页面之后，一些问题逐渐暴露。例如项目里已经定义了通用的分页请求参数和分页结果，但Qoder仍然会重复定义这些属性，代码命名规范也参差不齐。

（图片占位）

（图片占位）

这时就需要制定一套开发规范来约束Qoder的代码输出。我们让它生成了一份规范文件，并存放到了.qoder/rules目录下。

（图片占位）

如果你想复用这套规范，可以在Qoder的设置->规则中导入。如果用Claude Code的话，直接复制到AGENTS.md文件里也能达到相同效果。

有了规范之后，Qoder的代码质量明显提升，不再出现反复定义相同结构的情况。

（图片占位）

API文档优化

项目升级到Vue3后全面转向TypeScript，这时又遇到了一个新问题：对于网络请求的请求参数和响应结果类型，Qoder总是根据Vue2项目里的代码来推断，准确性很难保证。

好在项目本身提供了Swagger生成的在线API文档，因此可以让Qoder在定义API方法类型时，查阅文档来确定正确的类型。

（图片占位）

但直接解析在线文档的方式效率并不高。于是我们换了一个思路：让Qoder根据API文档一次性生成本地MD文档，之后查询直接走本地文件，速度和准确性都大幅提升。基于这种方法生成的API类型定义代码，规范程度非常理想。

（图片占位）

这些生成的API文档都存放在项目的docs/api目录下，有兴趣的话可以查看。

（图片占位）

新功能开发

除了迁移，新功能的开发同样可以顺利推进。以注册功能为例，输入的提示词如下：

我现在想开发一个用户注册功能，页面样式参考登录页面，直接在register.vue里实现。用户注册包含：username、telephone、password、authCode这些信息，调用接口`/sso/register`获取验证码（authCode）采用模拟方式，发送限制为60s一次,调用接口后弹出一个5s的toast来让用户获取，调用接口`/sso/getAuthCode`

页面效果如下：

（图片占位）

商品搜索功能同样可以复用这套逻辑：

我现在想开发一个商品搜索页，参考项目中的UI风格来实现，包含顶部的搜索栏和下方的搜索记录，搜索记录保留最近10条，存储到pinia之中。交互逻辑为点击首页搜索框 -> 跳转到商品搜索页 -> 输入搜索关键字 -> 跳转到商品列表页面（/pages/product/list）。商品列表页顶部添加搜索栏，显示当前搜索关键字，点击可以跳转到商品搜索页。商品列表页中调用的搜索接口`/product/search`，已经支持搜索功能，添加请求参数`keyword`即可实现。

页面效果如下：

（图片占位）

经验总结

使用Qoder配合GLM-5.1编写代码，效果确实出色。整个迁移过程下来，有几点经验值得分享：

• 将大任务拆分为多个小任务，让AI逐个完成，效果远好于一次性提交庞大需求。
• 开发规范必须提前确立，AI编程同样需要“规则意识”。
• 通用的操作流程可以封装成SKILL，方便后续复用，效率翻倍。
• 对于流程复杂的任务，先与AI探讨执行计划再动手，能有效减少返工时间。
• 需要从网页抓取的数据（如API文档），预先生成本地MD文档，效率提升非常明显。

项目地址

github.com/macrozheng/…