10个用于构建移动应用的Vue.js UI框架

       本文翻译自:https://superdevresources.com/vuejs-mobile-frameworks/,内容是按照笔者自己理解翻译,可能会有表达不准确的地方。

       理论上,您可以使用任何支持移动浏览器的Web框架(或自行开发),并将其与Vue.js和Cordova结合在一起。但是,使用专用的UI框架您可以选择预先构建的组件和可复用的UI交互,例如切换按钮,浮动操作按钮,滑动窗格,选项卡,滚动刷新等等。

       对于Android,我们有许多可用的响应式 material design web框架,这些框架可以在Cordova应用中与Vue.js结合使用。如果你不太喜欢使用Vue.js,那么可以选择像Ionic(基于Angular)这样的流行框架来构建混合应用,它们为Android和iOS提供接近原生的UI。更进一步,还可以选择React NativeNativeScript,这些框架可以使用JavaScript构建原生应用。

      在这篇文章中,我们将关注与Vue.js集成的框架,并介绍使用Cordova构建移动应用程序的框架。最后,我们还介绍了一个可以使用Vue.js构建原生应用程序的框架。如果你是刚接触,这些Vue.js教程应该对你有用。如果您计划使用管理面板构建Web应用程序,可以看下这些Vue.js dashboard模板

Vue.js based Mobile App Frameworks

下面列出的是支持Vue.js或与Vue.js紧密集成以构建移动应用程序的框架。 请注意,其中一些框架仍处于开发的早期阶段,因此您可能希望在做出选择之前了解下社区以及可以获得的支持。

Quasar Framework

quasar vuejs mobile framework

Quasar Framework允许您使用接近原生的用户界面来构建混合移动应用,并以VueJS 2作为核心。 它以MIT协议开源于GitHub上。

Quasar框架在其网站上提供了一系列良好的文档,并提供了一系列基于Vue的UI组件,如滑块,旋钮,工具提示,弹出窗口,模型对话框,上下文菜单,视频嵌入等等。

Quasar入门非常简单,它提供了自己的一套CLI,就像Ionic框架一样,用于开箱即用的配置和预览。 您可以使用此框架构建Cordova以及Electron(跨平台桌面应用程序)。

您可以下载Android 应用商店中的Quasar Play应用,感受下这个框架在真实应用中体验。

Onsen UI for Vue 2

https://superdevresources.com/wp-content/uploads/2017/02/onsen-ui-vue2.png

Onsen用户界面是构建HTML5混合和移动Web应用程序的流行框架。 Onsen提供了支持AngularJS,Angular2,React,Vue.js,Meteor以及普通JavaScript的与框架无关的UI组件。

Vue 2的Onsen用户界面将Vue.js与Onsen用户界面相结合,以创建混合和移动网络应用程序。 查看温泉样本以了解其产品,然后前往Vue 2的Onsen UI页面获取关于如何将Onsen与Vue.js集成的更多信息。

Framework7

https://superdevresources.com/wp-content/uploads/2017/02/framework7.jpg

Framework7是另一个开源(MIT许可)的移动HTML框架,用于开发具有iOS或Android本机外观和感觉的混合移动应用程序。 虽然它不支持任何其他平台,但您可以使用Material外观或iOS外观来构建Web应用程序。

Framework7提供了各种类似本地UI的组件和行为,例如滑动操作,拉动刷新,动态导航栏,页面动画,虚拟列表,搜索栏等。它提供了Vue的基于VueJS的入门应用程序模板的支持。 这些模板可用作Cordova + webpack模板或简单地作为webpack或browserify模板。

要了解该框架,请查看其展示示例的一些应用程序。

Vuetify.js

https://superdevresources.com/wp-content/uploads/2017/02/vuetifyjs.png

Vuetify.js是Vue.js 2的一个组件框架,它将Google的Material Design模式用于UI组件。 它附带3个Vue CLI模板,预先配置Vuetify以帮助您开始使用基于Vue.js的Web项目。

Vuetify提供了广泛的Material Design组件,例如面包屑,卡片,下拉菜单,导航栏,边栏,标签等。您可以在GitHub上跟踪此开源项目的进度。

Keen UI

https://superdevresources.com/wp-content/uploads/2014/11/keenui-vuejs-material.png

Keen UI是用Vue.js编写的Material Design UI组件的集合。 它提供了许多Material风格的组件,如alert,autocomplete,FAB,popover,snackbar,tabs等。该项目在GitHub上提供,并且是MIT授权的。

Mint UI

https://superdevresources.com/wp-content/uploads/2017/02/mint-ui-vuejs.png

Mint UI提供了CSS和JS组件,用于构建移动应用程序,如吐司,日期时间选择器,延迟加载,进度条,动作表等。 由于Vue.js基于组件的高效方法,Mint UI也非常轻量级。 你可以在GitHub上找到这个MIT许可的项目。

Bootstrap Vue

https://superdevresources.com/wp-content/uploads/2017/02/bootstrap-vue.png

Bootstrap Vue为Vue.js提供基于Bootstrap 4的组件。虽然许多组件仍在开发中,但它已经提供了诸如面包屑,下拉菜单,导航栏,分页等组件。

Vue Material

https://superdevresources.com/wp-content/uploads/2017/02/vuematerial.png

Vue Material是根据Material Design规范构建的轻量级框架,可帮助您构建响应式Web应用程序。 它提供许多基于材料设计的组件,如卡片,芯片,小吃棒,开关,tabbar等。该库旨在使用与Angular Material提供的相同的API来提供组件。

Vue-Blu

https://superdevresources.com/wp-content/uploads/2017/02/vue-blu.png

Vue-Blu是基于Vue.js 2.x和Bulma CSS框架的UI组件库。 尽管文档主要以中文提供,但该库提供导航,查看和表单组件。 看看他们的GitHub仓库来查看更多细节。

Vue.js based Native App Development Framework

Weex

https://superdevresources.com/wp-content/uploads/2017/02/weex-native-vuejs.jpg

您可能已经熟悉Facebook的React Native,它允许您使用React构建本机iOS和Android应用程序。 Weex是阿里巴巴集团的一个类似框架,与Vue.js合作,允许您构建跨平台的原生移动应用程序。

虽然仍在开发中,但Weex是一个有前景的框架,并已被许多公司使用。 您可以时刻关注该项目在GitHub上的更新,这个项目使用的Apache 2.0许可。

Vue.js based Desktop UI Library

Element

https://superdevresources.com/wp-content/uploads/2017/02/element-desktop-framework.jpg

虽然Element是基于Vue 2.0的桌面UI库,但我们认为这与本文中提到的内容相关。 它提供了许多适合编写桌面Web应用程序的组件。 他们来自同一个提供Mint UI的团队(本文前面提到)。 如果您使用Electron构建基于Vue.js的应用程序,Element是一个不错的选择。

Hybrid or Native App

如果您仍在犹豫是创建原生应用还是混合应用,那么这里有一个很好的信息图表,可以帮助您在不同的应用开发模型之间进行选择。 如果您决定使用Cordova或Phonegap与Vue.js一起使用混合应用程序方法,那么在Coligo上阅读本教程是一个很好的起点。

您认为哪种框架最适合用Vue.js构建应用程序? 如果您已经在移动应用中使用Vue.js并拥有最偏爱的移动框架,请在下面的评论中与我们分享。

猜你喜欢

转载自my.oschina.net/JasonZhang/blog/1810757