原文查看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
比較有好感❤️