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

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

Logo

前往低代码交流专区

更多推荐