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 Native或NativeScript，这些框架可以使用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 Framework允许您使用接近原生的用户界面来构建混合移动应用，并以VueJS 2作为核心。 它以MIT协议开源于GitHub上。

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

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

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

Onsen UI for Vue 2

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

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

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

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

Vuetify.js

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

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

Keen UI

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

Mint UI

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

Bootstrap Vue

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

Vue Material

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

Vue-Blu

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

Vue.js based Native App Development Framework

Weex

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

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

Vue.js based Desktop UI Library

Element

虽然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并拥有最偏爱的移动框架，请在下面的评论中与我们分享。