[譯]基於Vue.js的10個最佳UI框架，用於構建移動應用程序

原文查看10 Best Vue.js based UI Frameworks for Building Mobile Apps

若是您期待使用Vue.js構建移動應用程序，那麼您能夠選擇許多可用的UI框架。 在本文中，咱們將介紹一些基於Vue.js的框架，這些框架可用於構建多設備混合（Cordova或Phonegap）應用程序以及Native應用程序。

理論上，您可使用支持移動瀏覽器的任何Web框架（或本身動手），並使其與Vue.js和Cordova一塊兒使用。 可是，擁有專用的UI框架容許您選擇預構建的組件和可重複使用的UI行爲，例如切換按鈕，浮動操做按鈕，滑動窗格，選項卡，滾動到刷新等。

對於Android，咱們可用material design web frameworks，它們具備響應性，能夠與Cordue應用程序中的Vue.js結合使用。 若是您不是特別喜歡使用Vue.js，那麼您可使用像Ionic（基於Angular）這樣的流行框架來構建混合應用程序，這些應用程序能夠爲Android和iOS提供接近原生的UI。 您甚至能夠更進一步使用React Native或NativeScript，它容許您使用JavaScript構建本機應用程序。

在這篇文章中，咱們將堅持與Vue.js集成的框架，並提供與Cordova構建移動應用程序。 最後，咱們還提到了一個框架，容許您使用Vue.js構建本機應用程序。 若是您剛剛開始，那麼這些Vue.js教程將派上用場。 若是您計劃使用管理面板構建Web應用程序，還能夠查看這些Vue.js儀表板模板。

基於Vue.js的移動應用框架

下面列出了支持Vue.js或與Vue.js緊密集成的框架，用於構建移動應用程序。

請注意，其中一些框架仍處於開發的早期階段，所以您可能但願在作出選擇以前評估社區並圍繞框架提供支持。

Quasar Framework

Quasar Framework容許您使用近乎原生的用戶界面構建混合移動應用程序，並在其核心使用VueJS 2。 它是GitHub上提供的麻省理工學院許可的開源項目。

Quasar框架在其網站上提供了很好的文檔集，並提供了大量基於Vue的UI組件，如滑塊，微調器，工具提示，彈出窗口，模型對話框，上下文菜單，視頻嵌入等等。

Quasar入門很簡單，它提供了本身的CLI集，就像Ionic框架同樣，能夠進行開箱即用的設置和預覽。 您可使用此框架構建Cordova以及Electron（跨平臺桌面應用程序）。

您能夠在Android Play商店查看Quasar Play應用，瞭解真實應用中的框架。

Onsen UI for Vue 2

Onsen UI是用於構建HTML5混合和移動Web應用程序的流行框架。 Onsen提供與框架無關的UI組件，它支持AngularJS，Angular2，React，Vue.js，Meteor以及純JavaScript。

Vue 2的Onsen UI將Vue.js與Onsen UI相結合，以建立混合和移動Web應用程序。 查看Onsen樣本以瞭解其產品，並轉到Onsen UI for Vue 2頁面，瞭解有關如何將Onsen與Vue.js集成的更多信息。

Framework7

Framework7是另外一個開源（MIT許可）移動HTML框架，用於開發具備iOS或Android原生外觀的混合移動應用程序。 雖然它不支持任何其餘平臺，但您可使用Material外觀或iOS外觀構建Web應用程序。

Framework7提供了各類相似本機的UI組件和行爲，例如滑動操做，拉動刷新，動態導航欄，頁面動畫，虛擬列表，搜索欄等。它經過基於VueJS的入門應用程序模板爲Vue提供支持。 這些模板以Cordova + webpack模板的形式提供，或者僅做爲webpack或browserify模板提供。

要了解框架，請查看其示例應用程序。

Vuetify.js

Vuetify.js是Vue.js 2的組件框架，它使用Google的Material Design模式做爲UI組件。 它配備了3個Vue CLI模板，預先配置了Vuetify，以幫助您開始使用基於Vue.js的Web項目。

Vuetify提供各類材料設計組件，如麪包屑，卡片，下拉列表，導航欄，側邊欄，標籤等。您能夠在GitHub上跟蹤此開源項目的進度。

Keen UI

Keen UI是使用Vue.js編寫的Material Design UI組件的集合。 它提供了許多Material樣式組件，例如警報，自動完成，FAB，popover，snackbar，tabs等。該項目可在GitHub上得到，而且是MIT Licensed。

Mint UI

Mint UI提供用於構建移動應用程序的CSS和JS組件，例如toast，日期時間選擇器，延遲加載，進度條，操做表等。 因爲Vue.js採用了基於組件的高效方法，Mint UI的重量也很是輕。

您能夠在GitHub上找到這個MIT許可項目。

Bootstrap Vue

Bootstrap Vue爲Vue.js提供基於Bootstrap 4的組件2.雖然許多組件仍處於開發階段，但它已經提供了諸如麪包屑，下拉列表，導航欄，分頁等組件。

Vue Material

Vue Material是一個根據Material Design規範構建的輕量級框架，可幫助您構建響應式Web應用程序。 它提供了許多基於材料設計的組件，如卡片，芯片，零食欄，開關，tabbar等。該庫旨在使用與Angular Material相同的API提供組件。

Vue-Blu

Vue-Blu是一個基於Vue.js 2.x和Bulma CSS框架的UI組件庫。

雖然文檔主要以中文提供，但庫提供了導航，視圖和表單組件。 查看他們的GitHub倉庫瞭解更多詳情。

Ionic Framework 補充

Ionic Framework 是一個完整的開源SDK，適用於混合移動應用程序開發。 Ionic構建於Angular.js和Apache Cordova之上，提供工具和服務，用於使用CSS，HTML5和Sass等Web技術開發混合移動應用程序。應用程序可使用這些Web技術構建，而後經過本機應用程序商店分發，以便經過利用Cordova安裝在設備上。

Ionic Framework是一個100％免費的開源項目，在麻省理工學院得到許可。它將始終無償使用，由龐大的全球社區提供支持。它們具備超過120種本機設備功能，如藍牙，HealthKit，指紋識別等，以及Cordova / PhoneGap插件和TypeScript擴展。您可使用他們的CLI在任何平臺上建立，構建，測試和部署Ionic應用程序。該框架具備Ionicons圖標包，包含數百個最多見的應用程序圖標。麻省理工學院許可，並開箱即用。您能夠經過Live Reload開發您的應用程序，由於在開發的每一個步驟中編譯和從新部署您的應用程序都是爲了笨蛋。還有更多有用的功能，如深層連接，AoT編譯，Ionic Native。

從版本4開始，Ionic框架無關，而且對React，Preact，Angular和Vue以及Web組件提供官方支持。

Jscrambler有一個關於如何保護您的Ionic移動混合應用程序的全面教程。若是您想確保沒有人可以對您的代碼進行反向工程，竊取或篡改，您可能須要在此處查看它！

Kendo UI 補充

Kendo UI是一個HTML5框架，用於建立由Telerik提供支持的跨平臺移動應用程序。

JavaScript UI組件的最終集合，包含用於jQuery，Angular，React和Vue的庫。 不管您的JavaScript框架選擇如何，均可以快速構建引人注目，高性能，響應迅速的Web應用程序。

學習Kendo UI並不困難，由於不少開發人員都熟悉jQuery。 它是一個免費的開源框架，但它在功能方面略有限制，你不會獲得專門的技術支持，一些經常使用的小部件仍然是商業許可。

Kendo UI for Vue：響應式Web應用程序的完整UI組件庫

基於Vue.js的原生開發框架

Weex

您可能已經熟悉Facebook的React Native，它容許您使用React構建本機iOS和Android應用程序。 Weex是阿里巴巴集團的一個相似框架，它與Vue.js合做，容許您構建跨平臺的本機移動應用程序。

雖然仍在開發中，但Weex是一個頗有前途的框架，已經被許多公司使用。 您可使用Apache 2.0許可的GitHub上的項目瞭解最新信息。

基於Vue.js桌面端UI框架

Element

雖然Element是基於Vue 2.0的桌面UI庫，但咱們認爲在本文中提到它是相關的。 它提供了許多適合編寫桌面Web應用程序的組件。 他們來自提供Mint UI的同一個團隊（本文前面已經介紹過）。 若是您使用Electron構建基於Vue.js的應用程序，Element是一個不錯的選擇。

混合或原生應用程序

若是您仍在決定是構建本機應用程序仍是混合應用程序，那麼有一個很好的信息圖能夠幫助您在不一樣的應用程序開發模型之間進行選擇。

若是您決定使用Cordova或Phonegap與Vue.js一塊兒使用混合應用程序方法，那麼請查看Coligo上的本教程，以得到良好的起點。

在您看來，哪一個框架最適合使用Vue.js構建應用程序？ 若是您已在移動應用程序中使用Vue.js並擁有最喜歡的移動框架，請在下面的評論中與咱們分享。

移動開發框架不少，我我的對OnsenUI和Ionic v4比較有好感❤️