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 年尝试的方向
来源: https://juejin.im/post/5ab208576fb9a028e25d6efc