美文网首页Web前端之路Vue.jsVue.js专区
记录通过CDN引入的方式使用Vue和Vue的组件库

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

作者: 虚拟J | 来源:发表于2019-09-20 08:08 被阅读0次

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)就会明白了。

相关文章

  • vue使用cdn引入vue和element-ui

    #vue使用cdn引入vue和element-ui # element-ui 关于使用cdn引入方式报错 Refe...

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

    1.组件库的选择 众所周知,Ant Design作为一门设计语言面世,经历过多年的迭代和积累,它对UI的设计思想已...

  • Vue学习第一课

    1:在项目中引入Vue 通过静态cdn的方式引入: 文件来源:bootcdn前端资源库 2:添加绑定 在视图 ;...

  • 0.利用vue-cli新建一个vue项目

    有三种方式创建vue项目,1.本地引入vuejs、2.使用cdn引入vuejs、3.使用vue-cli创建vue...

  • 03第一个Vue实例 2019-07-28

    一、知识点总结 1、VUE引入的方式 引入本地Vue文件 通过CDN文件的方式 2、将用