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

时间 2019-11-21

标签 vant 1.0 正式发布轻量可靠移动 vue 组件栏目无线繁體版

原文原文链接

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

1、关于 Vant 1.0

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

在这个时间点上咱们决定发布 Vant 的 1.0 正式版，但愿将来有更多小伙伴可以参与到 Vant 的开发和使用中来。vue

GitHub 地址：github.com/youzan/vantwebpack

2、现有组件

3、开发理念

轻量化

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

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

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

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

快速迭代

另一个很重要的理念是快速迭代。有赞前端团队几十个工程师天天都在用的就是如今你看到的 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 年尝试的方向。

4、最后

开源项目的进步离不开社区的贡献，很是感谢过去对 Vant 提出 PR 和意见的全部人，尤为感谢社区 @chuangbo、@qianzhaoyan、@GeoffZhu 等同窗的付出。但愿将来能有更多的同窗加入到 Vant 的开发中来。若是你对有赞的前端团队感兴趣，也欢迎加入咱们一块儿玩耍~