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

Prasanta 發布于2019-08-22 15:32 / 1123人閱讀

摘要：是有贊前端團隊維護的移動端組件庫，提供了一整套基礎組件和業務組件。一關于距離首次發布剛好過去了半年時間，在這半年時間里團隊廣泛吸納社區的反饋和建議，持續對組件進行打磨優化，使得逐漸成長為一個輕量可靠的移動端組件庫。

Vant 是有贊前端團隊維護的移動端 Vue 組件庫，提供了一整套 UI 基礎組件和業務組件。通過 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 年嘗試的方向。

四、最后

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93524.html

前端相關匯總

摘要：簡介前端發展迅速，開發者富有的創造力不斷的給前端生態注入新生命，各種庫框架工程化構建工具層出不窮，眼花繚亂，不盲目追求前沿技術，學習框架和庫在滿足自己開發需求的基礎上，然后最好可以對源碼進行調研，了解和深入實現原理，從中可以獲得更多的收獲隨 showImg(https://segmentfault.com/img/remote/1460000016784101?w=936&h=397)...

BenCHou 2019-08-23 12:31 評論0 收藏0
UI大全：前端UI框架集合（持續更新，當前32個）

摘要：簡潔直觀強悍的前端開發框架，讓開發更迅速簡單。是一套基于的前端框架。首個版本發布于年金秋，她區別于那些基于底層的框架，卻并非逆道而行，而是信奉返璞歸真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

only_do 2019-08-22 10:47 評論0 收藏0
UI大全：前端UI框架集合（持續更新，當前32個）

摘要：簡潔直觀強悍的前端開發框架，讓開發更迅速簡單。是一套基于的前端框架。首個版本發布于年金秋，她區別于那些基于底層的框架，卻并非逆道而行，而是信奉返璞歸真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

church 2019-08-01 16:03 評論0 收藏0
Vant - 高效的 Vue 組件庫，再造一個有贊移動商城也不在話下

摘要：優惠券選擇器優惠券選擇器提供了優惠券單元格和優惠券選擇功能。優惠券單元格只需傳入優惠券列表和當前使用的優惠券即可正確展示。使用參數可以控制優惠券單元格是否展示右側箭頭，這個可以用于提醒用戶能否切換優惠券。 Vant ( ?v?nt ) 是有贊前端團隊基于有贊統一的規范實現的 Vue 組件庫，提供了一整套 UI 基礎組件和業務組件。通過 Vant，可以快速搭建出風格統一的頁面，提升開發效...

tunny 2019-08-21 16:47 評論0 收藏0