1.组件库的选择
众所周知,Ant Design作为一门设计语言面世,经历过多年的迭代和积累,它对UI的设计思想已经成为一套事实标准,受到众多前端开发者及企业的追捧和喜爱,也是React开发者手中的神兵利器。希望ant-design-vue能够让Vue开发者也享受到Ant Design的优秀设计。
ant-design-vue是 Ant Design 的Vue实现,组件的风格与Ant Design保持同步,组件的html结构和css样式也保持一致,真正做到了样式0修改,组件API也尽量保持了一致。
Ant Design Vue致力于提供给程序员愉悦的开发体验。
我选择的组件库是Ant Design of Vue而不是Vue官网推荐的Vant。毕竟Ant Design of Vue背靠阿里,外加我React用的就是Ant Design of React,比较熟。。。。。。,所以算的上是我目前最好的选择。
2.通过CDN方式引入相关文件
要使用Ant Design of Vue需要引入以下几个文件:
![](https://img.haomeiwen.com/i9070909/5544d46d6068057c.png)
![](https://img.haomeiwen.com/i9070909/17ff9be028ff12fb.png)
![](https://img.haomeiwen.com/i9070909/9f078313fdd37808.png)
3.使用Ant Design of Vue组件库的组件
在网上搜索有关CDN的方式引入使用Vue的组件相关信息,发现查不到这类信息。原因可以理解,大部分人都是用NPM的方式安装使用的,很少会用到CDN的方式引入使用,毕竟只写一个页面然后需要用到这些组件库的概率很小。
![](https://img.haomeiwen.com/i9070909/da2ec0119e1ab854.png)
官网通过CDN的方式引入使用的介绍很少,而且也没有示例,刚开始有点懵逼,但是成功写出来后发现很简单。
![](https://img.haomeiwen.com/i9070909/b3e529bde94907cc.png)
Vue组件的模板代码直接复制没问题,然后下面需要注意的点是:
![](https://img.haomeiwen.com/i9070909/3009614ddd430b50.png)
下面最最最关键的点,因为官网示例没有这段代码,所以花了我蛮久才想出来是缺哪个关键因素:
![](https://img.haomeiwen.com/i9070909/fd5bdc7758755879.png)
至于为什么是antd.DatePicker.RangePicker,console.log(antd)就会明白了。