Vant入门

2019/06/22 17:11
阅读数 10W

Vant是什么

简介

Vant是有赞开源的一套基于Vue2.0的Mobile组件库。通过Vant,可以快速搭建出风格统一的页面,提升开发效率。目前已有近50个组件,这些组件被广泛使用于有赞的各个移动端业务中。Vant旨在更快、更简单地开发基于Vue的美观易用的移动站点。特性组件都是来源于有赞的微商城业务,并且经过有赞业务的检验,更靠谱完善详实的中文文档专门的设计师团队维护视觉规范,统一而优雅支持babel-plugin-import单测覆盖率超过90%建议搭配webpack,babel使用Vant。

有赞

看完,你可能会问,“有赞”是什么鬼? 好像是一个微商城,帮你搭建微商网站的好像,而且在香港已上市,好像是浙江的公司,看官网的网址注册2012年就有了,不过我之前没听过。 既然是搭建平台的公司,所以技术应该还可以。 官网:https://www.youzan.com/?from_source=baidu_pz_shouye_0

流行度

流行度怎样?坦白说,我也不知道,但是根据不怎么好。因为不可能统计到多少人在用,只能通过github上的star、各大技术论坛、博客的出现频率来判断流行度。

我百度搜索“vue.js ui库”,出现了很多ui库,但都没有见vant的踪影,主要是element、vux、ivew等这些。不过,既然项目在用,学习一下也是很好的。

推荐21个顶级的Vue UI库! http://blog.talkingdata.com/?p=5993

推荐10个常用的Vue UI库 https://www.sohu.com/a/239663533_468707

2018年九个很受欢迎的vue前端UI框架 https://blog.csdn.net/qq_36538012/article/details/82152052

特性

  • 50+ 个经过有赞线上业务检验的组件
  • 单元测试覆盖率超过 80%
  • 完善的中英文文档和示例
  • 支持 babel-plugin-import
  • 支持 TypeScript
  • 支持 SSR

重要

简介里说的很清楚,vant是mobile的,也就是适用于手机移动端的vue,如果你开发的是pc端的vue,那就可能就用不了vant组件库。

另外,它除了了mobile组件,还有专门的小程序组件库,官网地址是: https://youzan.github.io/vant-weapp/#/intro

Vant的基本知识

读法

Vant(/ˈvænt/)

英语并没有vant这个单词。

官网

https://youzan.github.io/vant/#/zh-CN/intro

github地址: https://github.com/youzan/vant/blob/HEAD/README.zh-CN.md 默认是英文版,可以点击中文版。目前(2019-1-5)已经有7108个star。

开原协议

MIT。 所以可以放心用。

开始写代码

vue.js环境

因为vant是基于vue的,所以默认你应该已经安装好vue的开发环境。包括nodejs、npm等。

安装vant

NPM

npm i vant -S

YARN

yarn add vant

CDN

<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.5/lib/index.css">

<!-- 引入组件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@1.5/lib/vant.min.js"></script>

解释

官网列出了三种安装方法(不是三个步骤,一步步完成哦)。我一般还是使用npm来安装。

yarn是什么? 官网介绍:快速、可靠、安全的依赖管理工具。可以理解为包管理器。与npm相似。目前已经有部分人从npm转向了yarn。 官网:https://yarnpkg.com/zh-Hans/ github:https://github.com/yarnpkg/yarn/ 目前有34201个star。 中文网?:https://yarn.bootcss.com 某博客对yarn的简介: Yarn发布于2016年10月,并在Github上迅速拥有了2.4万个Star。而npm只有1.2万个Star。这个项目由一些高级开发人员维护,包括了Sebastian McKenzie(Babel.js)和Yehuda Katz(Ember.js、Rust、Bundler等)。

组件

50多个组件,每一个组件官方都有详细的示例代码,最值得一赞的是右侧有相应的UI展示,非常人性化,所以学习起来比较直观容易。比如button组件: https://youzan.github.io/vant/#/zh-CN/button

后记

写代码之前,都应该先多看看vue.js官网的风格指南,它会指南你更好的编码方式,包括组件的命名规范等,我参考资料里列出了地址。vant里也是推荐这种风格(见:https://youzan.github.io/vant/#/zh-CN/style-guide)。虽然可能有人会说:不好的风格,代码运行起来看上去一样的:(

附录

版本

目前(19-1-5)最新的版本是1.5.1 版本的更新比较频繁,看得出比较活跃。每个月至少2个版本,多的有差不多10个版本。 官网列出每个版本的内容,和对应的PR(pull request)编号。 最老的列出了0.5.2版本(2017.4.26)。下面列出三个重要版本。

v1.5.1

2019-01-01 Improvements Card: 新增 price、num 插槽 #2416 Slider: 新增 button 插槽 #2373 Slider: 新增 active-color、inactive-color 属性 #2374 Tabbar: 新增 active-color 属性 #2372 Sku: 新增 sku-selected 事件 #2386

Bug Fixes 修复 Card 描述过长时的样式问题 #2414 修复 ContactList 未注册依赖的 button 组件的问题 #2415 修复 Icon 在 file 协议网页下无法展示的问题 #2385

v1.0.0

2018-03-19

Breaking changes 新增 List 组件 #682 新增 Collapse 组件 #674 构建: 升级至 webpack 4,优化构建配置 #693 Popup: 新增 lock-scroll 属性,废弃 lock-on-scroll、prevent-scroll 属性 #688 Waterfall 组件不再维护,推荐使用 List 组件代替 #683

Improvements AddressEdit: 新增 show-delete 属性 #716 SwipeCell: 优化 Swipe 动画流畅度 #685 Field: 支持配置 au为size 最大/最小高度 #718 Locale: 精简 i18n 配置文档 #701 PullRefresh: 支持手动触发 loading 动画 #684 Switch: 新增 size 属性,支持自定义尺寸 #723 Sku: 新增头部金额插槽 #705 Sku: 优化 DOM 结构 #704 Tab: 支持通过滑动手势进行切换 #694 #695 Tag: 调整标签样式 #689 Toast: 支持通过 Vue.use 注册 #690

Bug Fixes 修复 Actionsheet 下边框未展示的问题 #686 修复 AddressEdit 在数据变更时未正确选中省市区的问题 #680 修复 Stepper value 溢出的问题 #691 修复 Badge 选中时字体粗细 #687

v0.5.2

2017-04-26 Improvements 新增 Picker 组件测试用例 #20 新增 Col & Row 组件测试用例 #16 新增 Uploader 单元测试 #9

Bug Fixes 修复 Webpack 打包错误 #21 修复 Toast 关闭时未移除 Dom 节点的问题 #19 修复组件样式问题 #5

参考资料

vant官网 vant github官网 vuejs官网-风格指南 一文看懂npm、yarn、pnpm之间的区别

2019.1.5

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部