记录通过CDN引入的方式使用Vue和Vue的组件库

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需要引入以下几个文件：

Ant Design of Vue的CSS

JavaScript 日期处理类库

Ant Design of Vue的JS

3.使用Ant Design of Vue组件库的组件

        在网上搜索有关CDN的方式引入使用Vue的组件相关信息，发现查不到这类信息。原因可以理解，大部分人都是用NPM的方式安装使用的，很少会用到CDN的方式引入使用，毕竟只写一个页面然后需要用到这些组件库的概率很小。   

官网CND方式引入使用介绍

官网通过CDN的方式引入使用的介绍很少，而且也没有示例，刚开始有点懵逼，但是成功写出来后发现很简单。

下面是以使用日期选择框为例子：

Vue组件template(模板)

Vue组件的模板代码直接复制没问题，然后下面需要注意的点是：

对应的数据和方法不要忘记写

下面最最最关键的点，因为官网示例没有这段代码，所以花了我蛮久才想出来是缺哪个关键因素：

局部注册

至于为什么是antd.DatePicker.RangePicker，console.log(antd)就会明白了。

---

更正，上面的步骤好像不需要局部注册就可以使用，至于为什么我之前写的时候，需要局部注册才行。时间有点久远，忘记了。。。。。

---

有人私信问我ant-design-vue的cdn地址是哪里找的，这里讲一下。

上面截图其实可以到“浏览器引入”这块内容，里面其实已经都讲到了。

上面红框就是链接

然后进入指定的目录下去Copy URL就好了。