Vant 1.0 发布:轻量、可靠的移动端 Vue 组件库
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 ^_^
本文首发于有赞技术博客。
Vant 1.0 发布:轻量、可靠的移动端 Vue 组件库相关推荐
- Vant 1.6.11 发布,有赞轻量级移动端 Vue 组件库
开发四年只会写业务代码,分布式高并发都不会还做程序员? Vant 1.6.11 发布了.Vant 是有赞开源的一套基于 Vue 2.0 的 Mobile 组件库.通过 Vant,可以快速搭建出风格 ...
- vant官网-vant ui 首页-移动端Vue组件库
Vant 是有赞前端团队开源的移动端vue组件库,适用于手机端h5页面. 鉴于百度搜索不到vant官方网址,分享一下vant组件库官网地址,方便新手使用 vant官网地址https://vant-co ...
- 使用vue加svg实现流程图代码_京东风格的移动端Vue组件库NutUI2.0来啦
移动端 Vue 组件库 NutUI 自发布以来受到了广泛的关注.据不完全统计,目前至少有30多个京东的 web 项目正在使用 NutUI . 经过一段时间紧锣密鼓的开发,近期,京东正式发布了 NutU ...
- vant 1.6.6 发布,轻量级移动端 Vue 组件库
开发四年只会写业务代码,分布式高并发都不会还做程序员? >>> vant 1.6.6 已发布.Vant 是有赞开源的一套基于 Vue 2.0 的 Mobile 组件库.通过 Va ...
- Vant 2 - 移动端 Vue 组件库 _ 问题记录
目录 Popup 弹出层 DatetimePicker 时间选择 Field 输入框 Picker 选择器 List 列表 Tab 标签页 发布初衷 : 记录在移动端项目中使用 Vant 2 组件库 ...
- 京东Vue组件库NutUI 2.0发布:将支持跨平台!
NutUI 是一套来自京东用户体验设计部(JDC)前端开发部的移动端 Vue 组件库,NutUI 1.0 版本于 2018 年发布.据不完全统计,目前在京东至少有30多个 web 项目正在使用 Nut ...
- 31款轻量高效的开源 JavaScript 插件和库
31款轻量高效的开源 JavaScript 插件和库 目前有很多网站设计师和开发者喜欢使用由[url=http://www.kubiji.cn/forum-id261.html]JavaScript[ ...
- 如何从0开始搭建Vue组件库
前言: 组件设计是通过对功能及视觉表达中元素的拆解.归纳.重组,并基于可被复用的目的,形成规范化的组件,通过多维度组合来构建整个设计方案,將这些组件整理在一起,便形成组件库.本文我们主要讲述基于 Va ...
- vue 组件库发布_如何创建和发布Vue组件库
vue 组件库发布 Component libraries are all the rage these days. They make it easy to maintain a consisten ...
最新文章
- Fiddler (三) Composer创建和发送HTTP Request
- MinGW问题解决:gcc: installation problem, cannot exec `cc1'
- Oracle 维护数据的完整性 一 索引
- 异步socket优雅的关闭-CancelIO和SO_LINGER
- 机器学习之朴素贝叶斯法
- 朝鲜红星操作系统落后当今水准约10年
- 关于RCP引用jar包的几个问题。
- ironpython使用方法_IronPython连接MySQL的方法步骤
- mybatis 为什么每次插入的时候总会创建一个SqlSession?
- 《跟我学Shiro》——张开涛(链接)
- iOS 修改app名称
- 百度C++研发工程师面试题(最新整理)
- MySQL字符集是什么
- 通过Nginx反向代理实现IP访问分流
- 栈与队列的相同点和不同点
- 如何可以快速创作思维导图?好用的mac思维导图软件推荐
- 故障案例:连接服务器失败/服务器无法上网
- 【米思米工业产品知识分享】- 轴承的分类与主要用途
- wpf TextBox日志文本框
- Linux man 命令后面的数字含义及作用