vant和uniapp的差別是什麼？-uni-app-PHP中文網

vant和uniapp的差別是什麼？

青灯夜游

發布： 2023-01-13 00:44:15

原創

13410 人瀏覽過

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

vant和uniapp的差別是什麼？

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

相關推薦：《程式設計教學》

#vant

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

特性

建議搭配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，個人覺得很不錯無論是環境還是提示效果都很豐富。