背景
不知道用 Ant Design Vue 的小伙伴们有没有遇到过这些问题：弹窗关不掉、下拉框扩展菜单不支持输入框、想用的组件功能不支持……
在一次次使用 Ant Design Vue V3 中遇到问题查找 issue 的过程中，发现 V3 版本实在是存在太多问题了，同时 V3 版本已经彻底不维护了，最终我还是走上了升级 Ant Design Vue 版本的路。
但升级真不是一件容易的事情呀，在官方提供的升级文档中我们可以看到，这次有许多使用上的 break change，直接升级大概率会导致项目功能不可用。
我们当然可以通过直接搜索/替换来对项目代码进行处理，但这样做不仅低效还容易出问题。作为一位成熟的开发工程师，这种批量的事情当然要通过代码来实现。
React 的 ant-design 有提供对应的 codemod cli 工具来帮忙升级 @ant-design/codemod-v5，但是 Vue 版本的 ant-design-vue 没有提供这类工具。在参考和学习了 React 版的 codemod 基础上，基于 ast-grep 这个库，我做了一个 Vue 版本的 codemod cli 工具。
那么，欢迎大家来试用 ant-design-vue-codemod！
ant-design-vue-codemod
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
正确的使用姿势是：
- 先拉出一条新的升级分支
- 使用
ant-design-vue-codemod跑一遍脚本 - 对项目进行自测，出现问题时手动进行修改即可
这一轮操作下来可以帮大家省下不少的时间，我们就可以快乐地摸鱼🐟了
