写点什么

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

  • 2020-03-11
  • 本文字数:1419 字

    阅读完需:约 5 分钟

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

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

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


2020-03-11 22:19870

评论

发布
暂无评论
发现更多内容

职场成长指南:三“靠”三“不靠”

敏捷开发

程序员 管理 职场 成长

2024 年最受欢迎的 5 个 Go 框架

FunTester

从设计到伴飞:数字孪生赋能航空航天新时代

DevOps和数字孪生

8折大优惠!联想企业购助力中小企业轻松迈入智能办公新时代

科技范儿

低代码开发助力数字化转型的战略价值

秃头小帅oi

这几个 IoTDB 分布式调优的关键细节,你一定要知道!

Apache IoTDB

探索 Pencils Swap 的叙事:打造流动性与链上收益枢纽

石头财经

探索 Pencils Swap 的叙事:为 DeFi 的再次爆发蓄力

BlockChain先知

解锁AI潜力:AI在销售领域的应用案例(非Chatbot)

Baihai IDP

程序员 AI chatbot Baihai IDP

ThinkPad X1 Carbon Aura:打破性能与便携悖论,打开AI PC行业新想象

科技范儿

阿里大牛10年苦心终成Java面试突击指南,程序员突击找工作拿高薪offer必备!

程序员高级码农

Java 编程 程序员 java面试 Java面试题

25年国内最牛的Java面试八股文合集,不接受反驳

程序员高级码农

Java 编程 程序员 java面试 Java面试题

AppDelete for Mac(软件清理卸载工具)v4.3.3 中文版

小玖_苹果Mac软件

Tableau Desktop 2019 for Mac(最好用的数据分析工具)v2019.1.0中文激活版

小玖_苹果Mac软件

AnyToISO Pro for Mac(专业级ISO镜像文件制作工具)v3.9.7中文激活版

小玖_苹果Mac软件

Navicat for SQL Server for mac(数据库管理工具)v17.1.8激活版

小玖_苹果Mac软件

深入解析亚马逊API接口:如何高效获取商品评论与商品详情

代码忍者

亚马逊商品详情API

Memcached 可观测性最佳实践

观测云

memcached

如何利用 ClickHouse 实现高级分析:MySQL 到 ClickHouse 实时数据同步指南

tapdata

数据迁移 实时数据复制 Metabase MySQL到ClickHouse 高级分析

一图读懂|《企业级研发管理系统迁移指南》精华速览

万事ONES

项目管理 ONES 企业研发管理

Set A Light 3D Studio Mac版(三维模拟影棚布光软件)激活版

小玖_苹果Mac软件

博世全球裁员 5500人,企业的路究竟通向何方?

敏捷开发

团队管理 个人成长 裁员 互联网裁员 企业经营

混合云网络过于复杂?ENS给你全局一张网的极致体验

不在线第一只蜗牛

网络

“赛博土木工程师”的多面人生:以技术绘制蓝图,分享知识行走江湖

华为云开发者联盟

物联网 IoT 人脸识别 OBS 华为云IoTDA

全球人形机器人赛道:2024年终汇总和2025年行业前瞻

机器人头条

科技 特斯拉 大模型 人形机器人 具身智能

Vant 1.0 正式发布:轻量、可靠的移动端 Vue 组件库_文化 & 方法_有赞技术_InfoQ精选文章