关于vue-cli:关于使用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…