vue2-to-vue3-migration
Workflow for migrating ant-design-vue (Vue2) codebases to Vue3.
Install
mkdir -p .claude/skills/vue2-to-vue3-migration && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/10678" && unzip -o skill.zip -d .claude/skills/vue2-to-vue3-migration && rm skill.zipInstalls to .claude/skills/vue2-to-vue3-migration
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
用于 ant-design-vue(Vue2) 到 ant-design-vue3(Vue3) 的页面、组件或模块迁移工作流。适用于单页迁移、批量迁移、迁移拆单、迁移验收、迁移风险盘点。Key capabilities
- →Single-file migration
- →Batch module migration
- →Migration planning
- →Behavioral consistency validation
- →Risk analysis
How it works
The skill analyzes Vue2 source code to extract dependencies and logic, then maps them to Vue3 composition API patterns while maintaining behavioral parity.
Inputs & outputs
When to use vue2-to-vue3-migration
- →Migrate single page to vue3
- →Plan batch migration
- →Check migration risks
- →Validate migrated components
About this skill
Vue2 到 Vue3 迁移工作流
本技能用于本仓库前端迁移任务，目标是将 ant-design-vue 中的 Vue2 页面、组件或模块，逐步迁移到 ant-design-vue3/agpay-ui-manager。
何时使用
- 需要把单个 Vue2 页面迁移到 Vue3
- 需要批量盘点一个模块的迁移范围
- 需要为复杂页面生成分阶段 PR 计划
- 需要对已迁移页面做行为一致性验收
- 需要识别 Vue2 代码中的迁移阻塞点、公共依赖和高风险写法
迁移前规则
开始前必须先读取并遵循以下规则文件：
- .github/instructions/ant-design-vue-legacy-migration.instructions.md
- .github/instructions/ant-design-vue3-vite-guidelines.instructions.md
- .github/instructions/vue-script-setup-safety.instructions.md
决策流程
根据用户输入选择路径：
- 用户要“直接迁移一个页面/组件”
- 执行单页迁移流程
- 用户要“迁移一个目录、一个模块、多个页面”
- 执行批量迁移流程
- 用户要“先规划，不立即改代码”
- 执行迁移拆单流程
- 用户要“检查已迁移结果是否可合并”
- 执行迁移验收流程
若用户表达不清，先补全以下信息：
- 源 Vue2 路径
- 目标 Vue3 路径
- 是否要直接改代码，还是只出计划/验收
单页迁移流程
- 定位源文件与目标落点
- 源目录通常在 ant-design-vue/agpay-ui-manager/src
- 目标目录通常在 ant-design-vue3/agpay-ui-manager/src
- 盘点行为
- 提取页面功能点、交互事件、接口依赖、路由依赖、权限点
- 标记风险：mixin、filter、this.$xxx、全局注册组件、旧插件
- 实施迁移
- 优先使用 Vue3 组合式写法
- 能用 script setup 时优先用 script setup
- 保持行为一致，不混入无关重构
- 新实现只落在 ant-design-vue3 目标目录，不在 Vue2 目录新增同类功能
- 收尾检查
- 检查是否有宏误导入
- 检查是否有导入名与本地声明重名
- 检查空状态、加载态、异常提示、重复提交保护
批量迁移流程
- 枚举模块内容
- 页面、弹窗、表单、表格、路由、API、权限点、公共组件
- 按依赖拆组
- 先迁移低耦合页面
- 再迁移公共组件与复杂交互模块
- 如公共逻辑阻塞页面迁移，先抽离公共层
- 输出批次方案
- 每批次范围
- 每批次风险
- 推荐顺序
- 每批次验收重点
迁移拆单流程
- 将任务拆成可独立评审、独立验证、独立回滚的阶段
- 默认顺序：公共依赖 -> 页面主体 -> 边界行为 -> 清理遗留
- 不把行为迁移与视觉重构放到同一个阶段
- 为每个阶段给出：目标、文件范围、验证方式、合并条件、回滚策略
迁移验收流程
- 找到对应 Vue2 源页面与 Vue3 目标页面
- 对比以下项目：
- 列表查询
- 条件筛选
- 新增/编辑
- 删除/关闭
- 权限控制
- 路由进入与返回
- 空状态/错误态
- 加载状态与重复提交保护
- 输出问题清单
- 严重级别
- 影响范围
- 修复建议
- 是否阻塞合并
输出要求
默认输出应包含：
- 迁移范围
- 改动清单或建议改动清单
- 风险点
- 行为一致性检查项
- 回归测试建议
- 下一步建议
如果用户明确要求“直接改代码”，则在输出摘要前先完成代码修改与最小必要验证。
项目约束
- ant-design-vue 为遗留目录，只做必要修复与迁移准备
- ant-design-vue3/agpay-ui-manager 为主要迁移目标
- 优先复用已有 Vue3 组件、工具函数、路由组织方式
- 涉及公共逻辑时，优先抽离到可被 Vue3 复用的位置
- 修改范围保持最小，避免顺手重构无关页面
可配合使用的 Prompt
以下 Prompt 可在特定场景下补充使用：
When not to use it
- →Visual refactoring
- →New feature development
Prerequisites
Limitations
- →Requires manual intervention for complex logic
- →Limited to ant-design-vue ecosystem
How it compares
Unlike manual refactoring, this workflow enforces systematic risk assessment and automated consistency checking before code modification.
Compared to similar skills
vue2-to-vue3-migration side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| vue2-to-vue3-migration (this skill) | 0 | 2mo | No flags | Intermediate |
| vue-best-practices | 19 | 5mo | No flags | Intermediate |
| vue-testing-best-practices | 5 | 6mo | No flags | Intermediate |
| vue-debug-guides | 4 | 6mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
vue-best-practices
antfu
MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.
vue-testing-best-practices
vuejs-ai
Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing.
vue-debug-guides
vuejs-ai
Vue 3 debugging and error handling for runtime errors, warnings, async failures, and SSR/hydration issues. Use when diagnosing or fixing Vue issues.
vue-router-best-practices
antfu
Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.
vueuse
onmax
Use when working with VueUse composables - provides reactive utilities for state, browser APIs, sensors, network, animations. Check VueUse before writing custom composables - most patterns already implemented.
frontend-vue-development
TencentBlueKing
前端 Vue 开发规范，涵盖 Vue 2/3 组件开发、Vuex 状态管理、路由配置、组件通信、样式规范、国际化。当用户进行前端开发、编写 Vue 组件、处理状态管理或实现页面交互时使用。