1. 程式人生 > >輕量、可靠的移動端元件庫 Vant 1.0 正式釋出

輕量、可靠的移動端元件庫 Vant 1.0 正式釋出

說實話,最近已經快一年沒有接觸過原生開發了,隨著接觸開發微信小程式,接觸 Vue 等,也越來越喜歡這種 JS 前端開發,感覺特別好玩。不管是 Vue ,還是 React ,還是微信小程式開發,其實都是大同小異,開發方式也都是響應式的開發,餓了麼開源的 Element UI 也挺好的。

所以,每天學習,進步,然後越來越喜歡真的是一種幸福。好了,不感慨了,進入正題。

我最近發現其實有贊技術團隊其實挺強大的。前一段時間我在微信小程式資料的文章中分享過有贊技術團隊開源的 zanui-weapp 微信小程式元件 UI 庫,包含 badge、btn、card、cell、dialog、icon、label、noticebar、panel、popup、switch、tab、toast、toptips 等各種元件或元素,樣式也很美觀。

順便再發一下開源地址和樣例吧,以防止沒看過之前文章的同學學習一下。一切分享不留名和地址的分享都是偽分享。哈哈……

開原地址:

mage-20180325071059

好了,誇完有贊團隊,那就介紹主角吧。有贊技術團隊開源的移動端元件庫 Vant 1.0 正式釋出啦。Vant 是有贊前端團隊維護的移動端 Vue 元件庫,提供了一整套 UI 基礎元件和業務元件。通過 Vant 可以快速搭建出風格統一的頁面,提升開發效率。

作為移動端元件庫,Vant 一直將輕量化作為核心開發理念。為了平衡日益豐富的功能和輕量化之間的矛盾關係,我們嘗試了很多的優化方式,包括支援元件按需載入、公共模組複用、元件編譯流程優化等。

在應用一系列的優化手段之後,目前 Vant

的元件平均體積僅有 8.8KB,Uglify + Gzip 後約 1KB。作為對比,mint-ui 的元件平均體積為 15.2KB,某些元件庫的元件平均體積甚至在 25KB 以上。所以,它很輕量。

除了提供元件以外,他們也在為豐富 Vant 的開發生態做很多嘗試,希望能覆蓋各個場景下的開發需求,為大家提供便利。下面是我們現有的一些生態或能力:

  • 基於 vue-cli 的腳手架 vue-cli-template-vant
  • 支援 nuxt 伺服器端渲染
  • 支援 Typescript 型別檢測
  • 支援 i18n 多語言定製
  • 支援通過 postcss 外掛進行主題定製

在生態化方面他們有贊團隊還有有很多需要補齊的方面,比如提供對 rem 的支援、vscode 程式碼提示外掛等,他們在 2018 年將會在這些方面努力。

既然是移動端的元件庫,那我們就來看看它包含哪些元件呢?

nip20180325_4

最後,大家可以長按掃描下方二維碼,體驗一下這些元件,在手機中的效果和效率,看看怎麼樣?

另外,我最近有點喜歡上 Vue 開發了。

文章首發於微信公眾號:非著名程式設計師,關注我,每天與 10 萬開發者共同進步,你離成功,只差一個關注。