阿里Qoder + GLM-5.1，夯爆了！|代码|显式标识|调用|阿里

关注过我的mall电商项目的小伙伴应该了解，mall项目是有一套基于uni-app的商城项目的，之前一直是Vue2版本的，最近把它升级到了Vue3。纯手工升级的话工作量还是挺大的，于是我使用阿里Qoder + GLM-5.1完成了升级，今天给大家分享下这套升级方案！mall-app-web简介这里还是先简单介绍下mall-app-web项目吧！

mall-app-web是mall电商实战项目的移动端商城项目，基于uni-app+Vue3实现。主要包括首页门户、商品搜索、商品展示、品牌专区、购物车、订单流程、支付、会员中心等功能。

项目迁移过程

如果你直接和Qoder说帮我把这个项目从Vue2升级到Vue3 ，这基本就是在浪费Token了，我们得先把这个任务进行拆分，让Qoder一步步完成这些任务。

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

迁移的第一步是搭建一个基于最新版uni-app+Vue3的项目脚手架，方便后续页面的迁移。

这个脚手架可以很简单，只要项目依赖没问题，可以正常运行，有个基础功能就可以了。这里以mall-app-web项目为例，有个页面框架，然后添加首页、分类、购物车、我的这几个页面即可，页面可以直接使用空白页占位。

然后是网络请求、数据存储、目录结构搭建好，这里我是基于Vue2项目自己搭建的脚手架，当然你也看去Github找个Vue3的，直接让Qoder基于找到的项目去搭建脚手架。

我这里的项目脚手架升级后的技术栈如下：

类别

技术

版本

框架

uni-app

3.0.0-5000720260410001

前端框架

^3.5.20

状态管理

Pinia

2.0.27

持久化

pinia-plugin-persistedstate

^3.2.0

构建工具

Vite

^5.2.8

语言

TypeScript

^5.1.6

CSS 预处理

Sass

^1.56.1

代码规范

ESLint + Prettier

^8.22.0 / ^2.7.1

类型增强

@uni-helper/uni-app-types

1.0.0-alpha.6

迁移进度表

脚手架搭建完成后，我们需要让Qoder生成一份迁移的进度表，因为这个迁移工作不是一次性就能完成的，这样可以方便我们后续快速了解迁移进度。

我这里按页面功能把迁移分成了9个阶段，对于每个页面都有对应的迁移状态。

由于我们是按页面进行迁移的，在迁移之前我们可以先让Qoder制定一个单页面的迁移计划，可以输入如下提示词：

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

之后Qoder就会制定好对应的计划，可以按照自己的需求来调整计划，在迁移了几个页面之后，我们就可以让Qoder直接生成一个skill，来实现单页面从vue2迁移到vue3。

我这里生成的skill已经存放到了项目的.qoder/skills目录下，skill中步骤共分为7个阶段。

大家如果想使用的话，直接从Qoder的设置中导入即可，创建好skill后，当我们每次提到Vue2升级到Vue3的时候，就会调用这个skill来执行了。

在我们迁移完几个页面之后，就会发现Qoder写代码的一些问题了，例如项目里面明明定义了通用的分页请求参数和分页结果，Qoder却老是在类里重复定义这些属性。

还有一些代码命名规范不统一的问题，具体如下。

此时我们就需要制定开发规范来约束Qoder的代码，避免这些问题。我这里让Qoder生成了一份开发规范，存放到了.qoder/rules目录下。

如果你想使用的话，可以添加到Qoder的设置->规则中去，这能帮助我们约束Qoder编写的代码，如果你使用的是Claude Code的话，直接复制到AGENTS.md文件里去也是一样的。

有了开发规范，Qoder就可以按照规范来写代码了。

API文档

由于项目升级Vue3后使用了TypeScript，对于网络请求中的方法的请求参数和响应结果类型，Qoder老是按照vue2项目里的代码来推断类型，往往不太准确。

由于我们的项目是有Swagger生成的在线API文档的，我们可以让Qoder在定义api方法中类型时，去查文档来确定类型。

但是这种查在线文档解析的方式是很慢的，我们可以让Qoder想根据API文档一次性生成md文档，之后让Qoder去查生成好的md文档，这样既快又准确，基于此方法生成的api类型定义代码如下，还是挺规范的。

生成的api文档都存放在项目的docs/api目录下了，感兴趣的小伙伴可以看下。

新功能开发我这里还尝试用Qoder开发了注册功能和商品搜索功能，效果还是可以的，和原项目风格也一致。

注册功能我输入的提示词如下：

我现在想开发一个用户注册功能，页面样式参考登录页面，直接在register.vue里实现。

 用户注册包含：username、telephone、password、authCode这些信息，调用接口`/sso/register`

 获取验证码（authCode）采用模拟方式，发送限制为60s一次,调用接口后弹出一个5s的toast来让用户获取，调用接口`/sso/getAuthCode`

商品搜索功能我输入的提示词如下：

我现在想开发一个商品搜索页，参考项目中的UI风格来实现，包含顶部的搜索栏和下方的搜索记录，搜索记录保留最近10条，存储到pinia之中。

 交互逻辑为点击首页搜索框->跳转到商品搜索页->输入搜索关键字->跳转到商品列表页面（/pages/product/list）。

 商品列表页顶部添加搜索栏，显示当前搜索关键字，点击可以跳转到商品搜索页。

 商品列表页中调用的搜索接口`/product/search`，已经支持搜索功能，添加请求参数`keyword`即可实现。