欢迎大家来试用 ant-design-vue-codemod 升级 ant-design-vue V4

[CrabSAMA]

按照官方文档升级 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. 对项目进行自测，出现问题时手动进行修改即可

[elarbor]

地址统一这样是不是更好？
https://vue2.ant-design.com/cn/components/overview
https://vue3.ant-design.com/cn/components/overview
https://react.ant-design.com/cn/components/overview

https://框架.ant-design.com/语言/components/overview