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

Posted 瀚岳-诸葛弩

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 2.x与ant-desing-vue的安装与版本兼容问题相关的知识,希望对你有一定的参考价值。

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的语法纠错,不然会报错。

举例(以日期选择控件为例),代码如下:

以上是关于vue 2.x与ant-desing-vue的安装与版本兼容问题的主要内容,如果未能解决你的问题,请参考以下文章

vue-cli2.x与vue-cli3.x的搭建

vue-cli 3.x 与vue-cli 2.x构建项目的区别

[Vue专题] 对比vue-cli2.x和vue-cli3.x的搭建

全局安装 Vue cli3 和 继续使用 Vue-cli2.x

全局安装 Vue cli3 和 继续使用 Vue-cli2.x

安装完Vue cli3 之后,还想用vue-cli2.x 版本