[译]基于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比较有好感❤️

转载于:https://www.cnblogs.com/iPing9/p/10930488.html