首頁  >  文章  >  web前端  >  vant和uniapp的差別是什麼?

vant和uniapp的差別是什麼?

青灯夜游
青灯夜游原創
2020-12-09 11:41:4913118瀏覽

區別:Vant是一套輕量、可靠的行動端Vue元件庫,可以快速搭建風格統一的頁面,提升開發效率;而uni-app則是使用Vue.js開發跨平台應用的前端框架,可以用來開發出相容多端的應用。

vant和uniapp的差別是什麼?

本文操作環境:windows10系統、vue 2.9、thinkpad t480電腦。

相關推薦:《程式設計教學

#vant

Vant 是一套輕量、可靠的行動端Vue元件庫。透過 Vant,可以快速建置出風格統一的頁面,提升開發效率。

特性

  • 60 高品質元件

  • 95% 單元測試覆蓋率

  • 完善的中英文文件和範例

  • 支援按需引入

  • ##支援主題自訂

  • #支援國際化

  • #支援TS

  • #支援SSR

建議搭配webpack,babel 使用Vant,這樣可以使用webpack 提供的豐富插件和個人化配置。 Vant 支援了 babel-plugin-import,透過 babel 插件使用 Vant,可以優化程式碼體積,提高前端效能。

優缺點
  • 優點:

  • #提供60 多個高品質元件,涵蓋行動端各類場景、效能極佳,組件平均體積不到1kb(min gzip)

  • 單元測試覆蓋率90% ,提供穩定性保障、完善的中英文文件和範例

  • 支援Vue 2 & Vue 3、按需引入、主題自訂、國際化、TypeScript、 SSR

  • 建議搭配webpack,babel 使用Vant,這樣可以使用webpack提供的豐富插件和個人化配置。 Vant 支援 babel-plugin-import,透過 babel 插件使用 Vant,可以優化程式碼體積,提高前端效能。

  • 輕量化:作為行動端元件庫,Vant 一直將輕量化作為核心開發理念。為了平衡日益豐富的功能和輕量化之間的矛盾關係,Vant

  • 內部使用了很多的最佳化方式,包括支援元件按需載入、公用模組複用、元件編譯流程優化等。

  • 豐富實用的業務元件:Vant 不只是提供基礎的UI元件,為了方便開發者快速建立行動商城,Vant

##增加了許多移動商城內常用的業務組件。類似地址管理、優惠券、省市縣選擇等。

缺點:

vant更多情況是適用移動商城的開發,如果項目是其他業務,或者產品的設計風格和vant不一樣,則不太適用vant

uniapp

uni-app 是使用Vue.js 開發跨平台應用的前端框架。

開發者透過編寫 Vue.js 程式碼,uni-app 將其編譯到iOS、Android、微信小程式等多個平台,保證正確運作並達到優秀體驗。

uni-app 繼承自 Vue.js,提供了完整的 Vue.js 開發體驗。

uni-app 元件規格和擴充api與微信小程式基本相同。

有一定 Vue.js 和微信小程式開發經驗的開發者可快速上手 uni-app ,開發出相容多端的應用程式。

uni-app提供了條件編譯最佳化,可以優雅的為某平台寫個人化程式碼、呼叫專有能力而不影響其他平台。

uni-app打包到App時仍然使用了5 引擎,5 的所有能力都可以在uni-app中可以使用。在App端運行效能和微信小程式基本上相同。

對於技術人員:不用學那麼多的平台開發技術、研究那麼多前端框架,學會基於vue的uni-app就夠了。

對公司而言:更低成本,涵蓋更多用戶,uni-app是高效利器。

優缺點:

  • 優點:

  • #開發所有前端應用的框架,開發者編寫一套程式碼,可發佈到iOS、Android、Web(響應式)、以及各種小程式(微信/支付寶/百度/頭條/QQ/釘子/淘寶)、快應用等多個平台。

  • uni-app對前端開發人員比較友好,學習成本比較低,因為uni-app是基於vue.js。而且它的封裝的組件和微信小程式的組件一樣,所以對於現在的主流前端人員來說學習成本幾乎為0。

uni-app使用HbuildX進行開發。使用HBuilderX進行開發可以說是速度槓槓的。開發速度比較快,ps:我是webstom黨(vue很上手),但是對於開發純靜態頁這種會用HBuilderX,個人覺得很不錯無論是環境還是提示效果都很豐富。

  • 缺點:

    ######很多人以為小程式是微信先推出的,其實,DCloud才是這個產業的開創者。所以uni-app問世的時間比較短,有很多地方還不是完善。 ###
  • 快應用程式僅支援vivo 、oppo、華為

  • #360小程式僅windows平台支持,需要在360瀏覽器中開啟

想要查閱更多相關文章,請造訪PHP中文網! !

以上是vant和uniapp的差別是什麼?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn