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) 就会明白了.
来源: http://www.jianshu.com/p/6c0439ca0189