Vant 1.0 发布：轻量、可靠的移动端 Vue 组件库

Prasanta 发布于2019-08-22 15:32 / 1115人阅读

摘要：是有赞前端团队维护的移动端组件库，提供了一整套基础组件和业务组件。一关于距离首次发布刚好过去了半年时间，在这半年时间里团队广泛吸纳社区的反馈和建议，持续对组件进行打磨优化，使得逐渐成长为一个轻量可靠的移动端组件库。

Vant 是有赞前端团队维护的移动端 Vue 组件库，提供了一整套 UI 基础组件和业务组件。通过 Vant 可以快速搭建出风格统一的页面，提升开发效率。

一、关于 1.0

距离 Vant 首次发布刚好过去了半年时间，在这半年时间里 Vant 团队广泛吸纳社区的反馈和建议，持续对组件进行打磨、优化，使得 Vant 逐渐成长为一个轻量、可靠的移动端 Vue 组件库。

在这个时间点上我们决定发布 Vant 的 1.0 正式版，希望未来有更多小伙伴能够参与到 Vant 的开发和使用中来。

GitHub 地址：github.com/youzan/vant

二、现有组件

三、开发理念 轻量化

作为移动端组件库，Vant 一直将轻量化作为核心开发理念。为了平衡日益丰富的功能和轻量化之间的矛盾关系，我们尝试了很多的优化方式，包括支持组件按需加载、公共模块复用、组件编译流程优化等。

在应用一系列的优化手段之后，目前 Vant 的组件平均体积仅有 8.8KB，Uglify + Gzip 后约 1KB。作为对比，mint-ui 的组件平均体积为 15.2KB，某些组件库的组件平均体积甚至在 25KB 以上。

Vant 之所以能保持如此小的组件体积，主要归功于我们独特的组件编译方式。目前主流的组件编译方式是通过 webpack 搭配 vue-loader 对每个组件进行编译，为每个组件生成一个打包后 JS 文件。这样的做法会产生大量的冗余代码，比如 webpack 内置的模块化代码、vue-loader 内置的 normalize 函数、重复引入的 babel helper 等等，而我们不希望在组件的编译结果中引入这些冗余代码。

一开始我们尝试通过使用 rollup 和 rollup-plugin-vue 去解决上述的问题，但很快我们就发现了更为直接的方式，即通过官方提供的 vue-template-compiler 和 babel 对组件进行编译，这样的方式简单纯粹，编译出的代码非常干净，细节在此不做赘述，有兴趣的同学可以看下 Vant 中构建部分的源码。

快速迭代

另外一个很重要的理念是快速迭代。有赞前端团队几十个工程师每天都在用的就是现在你看到的 GitHub 上这个版本，我们并没有一个所谓的“内部版”。同时，出于对自己名誉的珍视，我们不是简单地把它开源了事，而是把它当做一款技术产品去维护，不单单自己用的爽，也要让别人好用，因此我们会保持对社区需求的快速响应、对 bug 及时跟进并修复。

迄今为止项目 commit 总数超过 1600 次，解决 issue 300 个，合并 Pull Request 400 个，发布 90 次，基本上保持了一周 1 ~ 2 次的发布节奏。这里面包含了很多社区开发者的付出，感谢他们对 Vant 作出的贡献~ 在未来我们也会继续保持这样的开发节奏，为社区输出更好的开源产品。

生态化

除了提供组件以外，我们也在为丰富 Vant 的开发生态做很多尝试，希望能覆盖各个场景下的开发需求，为大家提供便利。下面是我们现有的一些生态或能力：

基于 vue-cli 的脚手架 vue-cli-template-vant

支持 nuxt 服务器端渲染

支持 Typescript 类型检测

支持 i18n 多语言定制

支持通过 postcss 插件进行主题定制

官方 Demo 仓库 - vant-demo

基于相同视觉规范的小程序组件库 - zanui-weapp

开源社区的移动商城示例项目 - vant--mobile-mall

在生态化方面我们还有很多需要补齐的方面，比如提供对 rem 的支持、vscode 代码提示插件等，这些将会是我们 18 年尝试的方向。

四、最后

开源项目的进步离不开社区的贡献，非常感谢过去对 Vant 提出 PR 和意见的所有人，尤其感谢社区 @chuangbo、@qianzhaoyan、@GeoffZhu 等同学的付出。希望未来能有更多的同学加入到 Vant 的开发中来。如果你对有赞的前端团队感兴趣，也欢迎加入我们一起玩耍~
简历投递邮箱：chenjiahan@youzan.com ^_^

本文首发于有赞技术博客。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93524.html

前端相关汇总

摘要：简介前端发展迅速，开发者富有的创造力不断的给前端生态注入新生命，各种库框架工程化构建工具层出不穷，眼花缭乱，不盲目追求前沿技术，学习框架和库在满足自己开发需求的基础上，然后最好可以对源码进行调研，了解和深入实现原理，从中可以获得更多的收获随 showImg(https://segmentfault.com/img/remote/1460000016784101?w=936&h=397)...

BenCHou 2019-08-23 12:31 评论0 收藏0
UI大全：前端UI框架集合（持续更新，当前32个）

摘要：简洁直观强悍的前端开发框架，让开发更迅速简单。是一套基于的前端框架。首个版本发布于年金秋，她区别于那些基于底层的框架，却并非逆道而行，而是信奉返璞归真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

only_do 2019-08-22 10:47 评论0 收藏0
UI大全：前端UI框架集合（持续更新，当前32个）

摘要：简洁直观强悍的前端开发框架，让开发更迅速简单。是一套基于的前端框架。首个版本发布于年金秋，她区别于那些基于底层的框架，却并非逆道而行，而是信奉返璞归真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

church 2019-08-01 16:03 评论0 收藏0
Vant - 高效的 Vue 组件库，再造一个有赞移动商城也不在话下

摘要：优惠券选择器优惠券选择器提供了优惠券单元格和优惠券选择功能。优惠券单元格只需传入优惠券列表和当前使用的优惠券即可正确展示。使用参数可以控制优惠券单元格是否展示右侧箭头，这个可以用于提醒用户能否切换优惠券。 Vant ( ˈvænt ) 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。通过 Vant，可以快速搭建出风格统一的页面，提升开发效...

tunny 2019-08-21 16:47 评论0 收藏0