資訊專欄INFORMATION COLUMN
摘要：是有贊前端團(tuán)隊(duì)維護(hù)的移動(dòng)端組件庫(kù)，提供了一整套基礎(chǔ)組件和業(yè)務(wù)組件。一關(guān)于距離首次發(fā)布剛好過去了半年時(shí)間，在這半年時(shí)間里團(tuán)隊(duì)廣泛吸納社區(qū)的反饋和建議，持續(xù)對(duì)組件進(jìn)行打磨優(yōu)化，使得逐漸成長(zhǎng)為一個(gè)輕量可靠的移動(dòng)端組件庫(kù)。
Vant 是有贊前端團(tuán)隊(duì)維護(hù)的移動(dòng)端 Vue 組件庫(kù)，提供了一整套 UI 基礎(chǔ)組件和業(yè)務(wù)組件。通過 Vant 可以快速搭建出風(fēng)格統(tǒng)一的頁(yè)面，提升開發(fā)效率。一、關(guān)于 1.0
距離 Vant 首次發(fā)布剛好過去了半年時(shí)間，在這半年時(shí)間里 Vant 團(tuán)隊(duì)廣泛吸納社區(qū)的反饋和建議，持續(xù)對(duì)組件進(jìn)行打磨、優(yōu)化，使得 Vant 逐漸成長(zhǎng)為一個(gè)輕量、可靠的移動(dòng)端 Vue 組件庫(kù)。
在這個(gè)時(shí)間點(diǎn)上我們決定發(fā)布 Vant 的 1.0 正式版，希望未來有更多小伙伴能夠參與到 Vant 的開發(fā)和使用中來。
GitHub 地址：github.com/youzan/vant
二、現(xiàn)有組件 三、開發(fā)理念 輕量化作為移動(dòng)端組件庫(kù)，Vant 一直將輕量化作為核心開發(fā)理念。為了平衡日益豐富的功能和輕量化之間的矛盾關(guān)系，我們嘗試了很多的優(yōu)化方式，包括支持組件按需加載、公共模塊復(fù)用、組件編譯流程優(yōu)化等。
在應(yīng)用一系列的優(yōu)化手段之后，目前 Vant 的組件平均體積僅有 8.8KB，Uglify + Gzip 后約 1KB。作為對(duì)比，mint-ui 的組件平均體積為 15.2KB，某些組件庫(kù)的組件平均體積甚至在 25KB 以上。
Vant 之所以能保持如此小的組件體積，主要?dú)w功于我們獨(dú)特的組件編譯方式。目前主流的組件編譯方式是通過 webpack 搭配 vue-loader 對(duì)每個(gè)組件進(jìn)行編譯，為每個(gè)組件生成一個(gè)打包后 JS 文件。這樣的做法會(huì)產(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 對(duì)組件進(jìn)行編譯，這樣的方式簡(jiǎn)單純粹，編譯出的代碼非常干凈，細(xì)節(jié)在此不做贅述，有興趣的同學(xué)可以看下 Vant 中構(gòu)建部分的源碼。
快速迭代另外一個(gè)很重要的理念是快速迭代。有贊前端團(tuán)隊(duì)幾十個(gè)工程師每天都在用的就是現(xiàn)在你看到的 GitHub 上這個(gè)版本，我們并沒有一個(gè)所謂的“內(nèi)部版”。同時(shí)，出于對(duì)自己名譽(yù)的珍視，我們不是簡(jiǎn)單地把它開源了事，而是把它當(dāng)做一款技術(shù)產(chǎn)品去維護(hù)，不單單自己用的爽，也要讓別人好用，因此我們會(huì)保持對(duì)社區(qū)需求的快速響應(yīng)、對(duì) bug 及時(shí)跟進(jìn)并修復(fù)。
迄今為止項(xiàng)目 commit 總數(shù)超過 1600 次，解決 issue 300 個(gè)，合并 Pull Request 400 個(gè)，發(fā)布 90 次，基本上保持了一周 1 ~ 2 次的發(fā)布節(jié)奏。這里面包含了很多社區(qū)開發(fā)者的付出，感謝他們對(duì) Vant 作出的貢獻(xiàn)~ 在未來我們也會(huì)繼續(xù)保持這樣的開發(fā)節(jié)奏，為社區(qū)輸出更好的開源產(chǎn)品。
生態(tài)化除了提供組件以外，我們也在為豐富 Vant 的開發(fā)生態(tài)做很多嘗試，希望能覆蓋各個(gè)場(chǎng)景下的開發(fā)需求，為大家提供便利。下面是我們現(xiàn)有的一些生態(tài)或能力：
基于 vue-cli 的腳手架 vue-cli-template-vant
支持 nuxt 服務(wù)器端渲染
支持 Typescript 類型檢測(cè)
支持 i18n 多語(yǔ)言定制
支持通過 postcss 插件進(jìn)行主題定制
官方 Demo 倉(cāng)庫(kù) - vant-demo
基于相同視覺規(guī)范的小程序組件庫(kù) - zanui-weapp
開源社區(qū)的移動(dòng)商城示例項(xiàng)目 - vant--mobile-mall
在生態(tài)化方面我們還有很多需要補(bǔ)齊的方面，比如提供對(duì) rem 的支持、vscode 代碼提示插件等，這些將會(huì)是我們 18 年嘗試的方向。
四、最后開源項(xiàng)目的進(jìn)步離不開社區(qū)的貢獻(xiàn)，非常感謝過去對(duì) Vant 提出 PR 和意見的所有人，尤其感謝社區(qū) @chuangbo、@qianzhaoyan、@GeoffZhu 等同學(xué)的付出。希望未來能有更多的同學(xué)加入到 Vant 的開發(fā)中來。如果你對(duì)有贊的前端團(tuán)隊(duì)感興趣，也歡迎加入我們一起玩耍~
簡(jiǎn)歷投遞郵箱：[email protected] ^_^
本文首發(fā)于有贊技術(shù)博客。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93524.html
摘要：簡(jiǎn)介前端發(fā)展迅速，開發(fā)者富有的創(chuàng)造力不斷的給前端生態(tài)注入新生命，各種庫(kù)框架工程化構(gòu)建工具層出不窮，眼花繚亂，不盲目追求前沿技術(shù)，學(xué)習(xí)框架和庫(kù)在滿足自己開發(fā)需求的基礎(chǔ)上，然后最好可以對(duì)源碼進(jìn)行調(diào)研，了解和深入實(shí)現(xiàn)原理，從中可以獲得更多的收獲隨 showImg(https://segmentfault.com/img/remote/1460000016784101?w=936&h=397)...
摘要：簡(jiǎn)潔直觀強(qiáng)悍的前端開發(fā)框架，讓開發(fā)更迅速簡(jiǎn)單。是一套基于的前端框架。首個(gè)版本發(fā)布于年金秋，她區(qū)別于那些基于底層的框架，卻并非逆道而行，而是信奉返璞歸真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...
摘要：簡(jiǎn)潔直觀強(qiáng)悍的前端開發(fā)框架，讓開發(fā)更迅速簡(jiǎn)單。是一套基于的前端框架。首個(gè)版本發(fā)布于年金秋，她區(qū)別于那些基于底層的框架，卻并非逆道而行，而是信奉返璞歸真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...
摘要：優(yōu)惠券選擇器優(yōu)惠券選擇器提供了優(yōu)惠券單元格和優(yōu)惠券選擇功能。優(yōu)惠券單元格只需傳入優(yōu)惠券列表和當(dāng)前使用的優(yōu)惠券即可正確展示。使用參數(shù)可以控制優(yōu)惠券單元格是否展示右側(cè)箭頭，這個(gè)可以用于提醒用戶能否切換優(yōu)惠券。 Vant ( ?v?nt ) 是有贊前端團(tuán)隊(duì)基于有贊統(tǒng)一的規(guī)范實(shí)現(xiàn)的 Vue 組件庫(kù)，提供了一整套 UI 基礎(chǔ)組件和業(yè)務(wù)組件。通過 Vant，可以快速搭建出風(fēng)格統(tǒng)一的頁(yè)面，提升開發(fā)效...
閱讀 3279·2021-09-22 15:58
閱讀 1741·2019-08-30 14:17
閱讀 1752·2019-08-28 18:05
閱讀 1531·2019-08-26 13:33
閱讀 710·2019-08-26 12:20
閱讀 633·2019-08-26 12:18
閱讀 3212·2019-08-26 11:59
閱讀 1430·2019-08-26 10:36
