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

一、關於1.0

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

在這個時間點上我們決定發布Vant 的1.0 正式版，希望未來有更多小伙伴能夠參與到Vant 的開發和使用中來。

GitHub 地址：

二、現有組件

三、開發理念

輕量化

作為移動端組件庫， 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的開發中來。如果你對有讚的前端團隊感興趣，也歡迎加入我們一起玩耍~

簡歷投遞郵箱：[email protected] ^_^