Vant 1.0 發佈：輕量、可靠的移動端 Vue 組件庫

Vant 是有贊前端團隊維護的移動端 Vue 組件庫，提供了一整套 UI 基礎組件和業務組件。經過 Vant 能夠快速搭建出風格統一的頁面，提高開發效率。

1、關於 1.0

距離 Vant 首次發佈恰好過去了半年時間，在這半年時間裏 Vant 團隊普遍吸納社區的反饋和建議，持續對組件進行打磨、優化，使得 Vant 逐漸成長爲一個輕量、可靠的移動端 Vue 組件庫。

在這個時間點上咱們決定發佈 Vant 的 1.0 正式版，但願將來有更多小夥伴可以參與到 Vant 的開發和使用中來。

GitHub 地址：github.com/youzan/vant

2、現有組件

3、開發理念

輕量化

做爲移動端組件庫，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 年嘗試的方向。

4、最後

開源項目的進步離不開社區的貢獻，很是感謝過去對 Vant 提出 PR 和意見的全部人，尤爲感謝社區 @chuangbo、@qianzhaoyan、@GeoffZhu 等同窗的付出。但願將來能有更多的同窗加入到 Vant 的開發中來。若是你對有讚的前端團隊感興趣，也歡迎加入咱們一塊兒玩耍~
簡歷投遞郵箱：chenjiahan@youzan.com ^_^

本文首發於 有贊技術博客。