vue 2.x与ant-desing-vue的安装与版本兼容问题

Posted 2022-05-04 诸葛弩

https://www.antdv.com/components/overview

ant-desing-vue是阿里推荐的唯一组件方案。使用起来非常简单，但在通过vue ui配置过程中，可能会出现版本与vue版本不匹配的问题。

1、依赖项的常见安装方式，如下图：

此处，要特别注意：通过VUE UI安装的运行依赖项只会体现最新版本，无法选择指定版本。这在我调试环境过程中出现了非常多的问题，一开始没有认识到是版本兼容问题，在网上找了很多解决方案。都不能解决。

对比jeecg的package.json后才发现可能是版本问题，因为我们在选择vue的时候选择的是vue2.x，并不兼容最新版本的ant-desing-vue。

通过npm重新安装时，才发现如下错误提示（用vue-ui图形化模式安装时，这个错误并不会出现，这个很不人性，而且官网也没有说明）

2、版本冲突的解决方案：

不用vue ui的图形化安装，改为npm或cnpm安装，并指定ant-desing-vue版本

npm i --save ant-design-vue@1.7.2

网上的全部都是：npm i --save ant-design-vue@next，

不要用，这个是针对vue3.x的。

安装完成后，具体使用可参考官网教程。

3、使用

解决完版本冲突后，ant-desing-vue的使用官网提供了非常详细的案例，并且可以通过sandbox模拟运行。所有语法符合vue组件语法。使用比较简单，在官网还可以通过选定不同的版本进行代码样例查看。具体如下：

需要注意的是，在进行value绑定的时候，我们要解除eslint的语法纠错，不然会报错。

举例（以日期选择控件为例），代码如下：

创作打卡挑战赛 赢取流量/现金/CSDN周边激励大奖