Vant 1.0 发布:轻量、可靠的移动端 Vue 组件库-阿里云开发者社区

开发者社区> cacao111> 正文

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

简介:
+关注继续查看

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

2c724a85508bed4d66468df886870ca554046a69

Vant

一、关于 1.0

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

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

GitHub 地址:github.com/youzan/vant

二、现有组件

517f9728dfe3349d54c45dd8803007013a691285

三、开发理念

轻量化

作为移动端组件库,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的开发中来。如果你对有赞的前端团队感兴趣,也欢迎加入我们一起玩耍~

原文发布时间:2018年03月

作者:

本文来源:前端外刊  如需转载请联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
NetAdvantage for JSF 2007 Vol.2发布
版权声明:本文为博主chszs的原创文章,未经博主允许不得转载。 https://blog.csdn.net/chszs/article/details/1921139 NetAdvantage for JSF 2007 Vol.2发布 NetAdvantage for JSF 2007是一套丰富的、带AJAX功能的JSF组件,用于建立商业级J2EE应用程序。
659 0
vue兄弟组件通信(非vuex)
实例:点击按钮将组件A的"A数据"传到组件B的方框内 image 实现思路:根据官方文档的教程->使用一个空的 Vue 实例作为事件总线 官方文档 代码展示 组件通讯 .
739 0
【阿里云新品发布·周刊】第4期:快到飞起是怎样的体验?高达100万IOPS的高性能ESSD云盘!
将你想了解的,新产品、新版本、新技术、新功能、价格调整,评论在下方,下期更新!
5988 0
如何在个人博客引擎 Hexo 中添加 Swiftype 搜索组件
在您现在看到的我的博客站点,后台使用的是 Hexo 作为博客引擎,但是默认集成的搜索组件是进行 form 提交到 Google 进行搜索的,为了更好地体验,本文介绍如何在 Hexo 博客中集成 Swiftype 搜索组件。
1280 0
【阿里云新品发布·周刊】第3期:零算法基础快速训练稳定、高效的AI模型
将你想了解的,新产品、新版本、新技术、新功能、价格调整,评论在下方,下期更新!
9031 0
Apache Flink 零基础入门(五):流处理核心组件 Time&Window 深度解析
为什么要有 Window; Window 中的三个核心组件:WindowAssigner、Trigger 和 Evictor;Window 中怎么处理乱序数据,乱序数据是否允许延迟,以及怎么处理迟到的数据;最后我们梳理了整个 Window 的数据流程,以及 Window 中怎么保证 Exactly
3314 0
React源码分析5 -- 组件通信,refs,key,ReactDOM
React源码系列文章,请多支持: [React源码分析1 — 组件和对象的创建(createClass,createElement)](https://www.atatech.org/articles/72905) [React源码分析2 — React组件插入DOM流程](http://www.atatech.org/articles/72908) [React源码分析3 — React
3642 0
一文看清深圳云栖阿里云重磅产品发布
成立九年之后,阿里云不再仅仅是提供计算、存储、网络、安全。 事实上,我们每一天都有新功能在发布。 本文就和大家梳理一下,阿里云此次深圳云栖在云计算、大数据、人工智能、物联网方面的技术产品进展。
3311 0
+关注
72
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载