Vant 是有贊前端團隊維護的移動端 Vue 組件庫，提供了一整套 UI 基礎(chǔ)組件和業(yè)務(wù)組件。通過 Vant 可以快速搭建出風格統(tǒng)一的頁面，提升開發(fā)效率。

Vant

一、關(guān)于 1.0

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

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

GitHub 地址：github.com/youzan/vant

二、現(xiàn)有組件

三、開發(fā)理念

輕量化

作為移動端組件庫，Vant 一直將輕量化作為核心開發(fā)理念。為了平衡日益豐富的功能和輕量化之間的矛盾關(guān)系，我們嘗試了很多的優(yōu)化方式，包括支持組件按需加載、公共模塊復(fù)用、組件編譯流程優(yōu)化等。

在應(yīng)用一系列的優(yōu)化手段之后，目前 Vant 的組件平均體積僅有 8.8KB，Uglify + Gzip 后約 1KB。作為對比，mint-ui 的組件平均體積為 15.2KB，某些組件庫的組件平均體積甚至在 25KB 以上。

Vant 之所以能保持如此小的組件體積，主要歸功于我們獨特的組件編譯方式。目前主流的組件編譯方式是通過 webpack 搭配 vue-loader 對每個組件進行編譯，為每個組件生成一個打包后 JS 文件。這樣的做法會產(chǎn)生大量的冗余代碼，比如 webpack 內(nèi)置的模塊化代碼、vue-loader 內(nèi)置的 normalize 函數(shù)、重復(fù)引入的 babel helper 等等，而我們不希望在組件的編譯結(jié)果中引入這些冗余代碼。

一開始我們嘗試通過使用 rollup 和 rollup-plugin-vue 去解決上述的問題，但很快我們就發(fā)現(xiàn)了更為直接的方式，即通過官方提供的 vue-template-compiler 和 babel 對組件進行編譯，這樣的方式簡單純粹，編譯出的代碼非常干凈，細節(jié)在此不做贅述，有興趣的同學可以看下 Vant 中構(gòu)建部分的源碼。

快速迭代

另外一個很重要的理念是快速迭代。有贊前端團隊幾十個工程師每天都在用的就是現(xiàn)在你看到的 GitHub 上這個版本，我們并沒有一個所謂的“內(nèi)部版”。同時，出于對自己名譽的珍視，我們不是簡單地把它開源了事，而是把它當做一款技術(shù)產(chǎn)品去維護，不單單自己用的爽，也要讓別人好用，因此我們會保持對社區(qū)需求的快速響應(yīng)、對 bug 及時跟進并修復(fù)。

迄今為止項目 commit 總數(shù)超過 1600 次，解決 issue 300 個，合并 Pull Request 400 個，發(fā)布 90 次，基本上保持了一周 1 ~ 2 次的發(fā)布節(jié)奏。這里面包含了很多社區(qū)開發(fā)者的付出，感謝他們對 Vant 作出的貢獻~ 在未來我們也會繼續(xù)保持這樣的開發(fā)節(jié)奏，為社區(qū)輸出更好的開源產(chǎn)品。

生態(tài)化

除了提供組件以外，我們也在為豐富 Vant 的開發(fā)生態(tài)做很多嘗試，希望能覆蓋各個場景下的開發(fā)需求，為大家提供便利。下面是我們現(xiàn)有的一些生態(tài)或能力：

• 基于 vue-cli 的腳手架 vue-cli-template-vant
• 支持 nuxt 服務(wù)器端渲染
• 支持 Typescript 類型檢測
• 支持 i18n 多語言定制
• 支持通過 postcss 插件進行主題定制
• 官方 Demo 倉庫 - vant-demo
• 基于相同視覺規(guī)范的小程序組件庫 - zanui-weapp
• 開源社區(qū)的移動商城示例項目 - vant--mobile-mall

在生態(tài)化方面我們還有很多需要補齊的方面，比如提供對 rem 的支持、vscode 代碼提示插件等，這些將會是我們 18 年嘗試的方向。

四、最后

開源項目的進步離不開社區(qū)的貢獻，非常感謝過去對 Vant 提出 PR 和意見的所有人，尤其感謝社區(qū) @chuangbo、@qianzhaoyan、@GeoffZhu 等同學的付出。希望未來能有更多的同學加入到 Vant 的開發(fā)中來。如果你對有贊的前端團隊感興趣，也歡迎加入我們一起玩耍~
簡歷投遞郵箱：chenjiahan@youzan.com ^_^

本文首發(fā)于有贊技術(shù)博客。

總結(jié)

以上是生活随笔為你收集整理的Vant 1.0 发布：轻量、可靠的移动端 Vue 组件库的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。