关于使用vue集成Ant Design Vue因版本变化导致的问题

---

author: Nathannie
date: 2022年5月9日17:47:56

---

问题背景

环境参数:

"dependencies": {
   "ant-design-vue": "^2.0.0-rc.3",
   "vue": "^3.0.0",
   "vue-router": "^4.0.0-0",
   "vuex": "^4.0.0-0"
},

按照视频操作，集成 Ant Design Vue ，引入按钮样式组件，发现样式（颜色）不生效。

预期效果：

实际效果：

可以看到颜色红色不生效 。

问题分析

经过一系列的检查，发现是官网代码书写有误
官网给的代码（有误）：

<a-button danger :size="size">Danger</a-button>

正确情况的代码：

<a-button type="danger" ghost>Danger</a-button>

分析：没有添加type=""属性。

问题出现在danger样式都没有添加type=""
图1

图2

---

⭐准确的原因是学习视频中展示的官网使用的Ant Design Vue教程版本是2.0.0.rc.2。

而danger样式作为类型是在2.2.0之后，所以就视频中的版本，使用danger必须使用属性的方式,即type="danger"。
而当前学习时间，官网版本变为2.2.8,而本地版本是"ant-design-vue": "^2.0.0-rc.3",,所以直接使用类型方式是不支持的。

问题解决

如果安装ant-design-vue<2.2.0，则必须使用type="danger"。
如果安装ant-design-vue>2.2.0，则可以使用danger。

# <2.2.0
<a-button type="danger" >Default</a-button>

# > 2.2.0
<a-button danger >Default</a-button>

相关参考

1. https://2x.antdv.com/componen...
2. https://www.itxst.com/ant-des...