按照官方文档升级 ant-design-vue v4 可以看到有十分多的 break change。

React 版的 ant-design 有官方的 codemod cli 工具@ant-design/codemod-v5 来帮助升级，但 ant-design-vue 并没有。在参考和学习了 React 版的 codemod 基础上，基于ast-grep 这个库，我做了一个 Vue 版本的 codemod cli 工具。

ant-design-vue-codemod

npm地址

ant-desgin-vue-codemod 可以帮你✅：

• 自动替换代码中有变更的 prop：dropdownClassName ->popupClassName，visible ->open
• 检测代码中存在的ant-design-vue/dist/antd.css 样式引入，找到后进行 warning 提示

工具可以帮你把大多数需要处理的场景处理好了，其余部分关于组件库风格、样式之类的变更仍然需要各位开发小伙伴在对项目 review 自测的时候进行处理哈~

使用方法

# 到项目目录下cd xx# 使用 npx 直接执行命令npx ant-design-vue-codemod# 或者使用 pnpm dlx 直接执行命令pnpm dlx ant-design-vue-codemod

正确的使用姿势是：

1. 先拉出一条新的升级分支
2. 使用 ant-design-vue-codemod 跑一遍脚本
3. 对项目进行自测，出现问题时手动进行修改即可