Vue是先进的、精心制作的,是全世界的网络开发者和设计师最广泛推荐的JavaScript库之一。虽然Vue包括复杂的组件,对从头开始构建项目很有帮助,但它的受欢迎程度和庞大的社区也提供了获得第三方软件包和预构建组件的机会,可以减少开发时间。
然而,找到最适合你的应用的组件可能是一项艰难的工作。在本指南中,我们将探讨用于构建漂亮而实用的仪表盘的十个UI库和框架,这是一个越来越常见的UI元素,可以为任何项目添加组织。我们将研究每个仪表盘的独特优势和劣势,突出其权衡和好处。
本文所涉及的仪表盘从免费到高级不等,大多数都提供两种版本。让我们开始吧!
1.Vue Notus
图片来源。创意蒂姆
Vue Notus是一个基于Tailwind CSS和Vuikit的免费Vue管理仪表板。Vue Notus拥有一百多个组件,可以帮助你加快项目开发速度,同时还能保留你的个人设计偏好。
如果你是一个明亮、清新的色彩爱好者,你会特别喜欢这个仪表盘。每个组件都包括颜色变化,你可以使用Tailwind CSS类轻松控制。同样地,你可以访问和修改每个组件的状态,如样式、悬停、焦点等方面。然而,如果你添加了一个新的类,而这个类原本不以任何形式存在于你的代码库中,你将需要重新编译Tailwind。
这个软件包包括一个完整的预建实例集合;如果你的用例与任何一个实例项目相匹配,你只需要在上线前改变一些数字。
2.Vuetify
如果你经常使用Vue,你可能已经熟悉了Vuetify,这是一个遵循Material Design准则的UI组件库。
Vuetify提供了大量的免费和优质的预置仪表盘,这些仪表盘都是用纯Vue编写的,这意味着你不必担心任何jQuery的依赖性,因为从长远来看,这可能会损害你的应用程序的性能。同样地,Vuetify支持内部性能措施,如代码分割和懒惰加载,使Vuetify仪表盘可靠且性能良好。
3.Muse Vue Ant仪表板
图片来源。创意Tim
构建于Ant Design框架之上的Muse Vue Ant Dashboard是Vue应用程序中最时尚、最灵活的仪表盘之一。在本指南所涉及的所有选项中,它是描述性最强的文档之一,所以你在开始使用时应该不会有任何问题。
Ant Design框架在内部使用SASS来维护主题并支持定制,因此,你可以使用SASS文件和类来定制这个仪表盘的元素。
有了70多个组件和7页仪表盘示例,你可以依靠Muse Vue Ant Dashboard来让你的管理面板迅速运行起来。然而,如果你在免费版本中找不到你想要的东西,你可以考虑升级到专业版本,它有300多个组件和26个例子,价格为69美元。
4.Vue Black Dashboard
图片来源。创意蒂姆
基于Bootstrap v4.0,Vue Black Dashboard是一个华丽的Vue框架,它提供了16个组件,你可以结合起来为你的独特项目创建完美的仪表板。花费59美元,专业版包括300多个暗色和亮色主题的组件。Vue Black Dashboard是少数几个在其界面上同时提供深色和浅色主题的框架之一。你可以使用SASS文件和类来修改和定制所有的可用组件。
5.Vue Material Dashboard
图片来源。创意蒂姆
Vue Material Dashboard是原始Material Dashboard的官方Vue版本,是市场上最受欢迎的Vue管理仪表盘模板之一。它不仅看起来非常时尚,而且还基于Material UI,这是有史以来最流行的设计库之一。
Vue Material Dashboard的免费版本包含超过16个组件、两个自定义插件和七个示例页面,供你开始使用。另一方面,专业版的价格为59美元,内容广泛;它包含200多个组件、15个定制插件和28个示例页面,涵盖了许多可能的使用案例。
6.ArchitectUI Vue仪表板
由Vue CLI和Bootstrap v4.0提供支持,ArchitectUI的Dashboard Vue PRO包集合了150多个组件。以69美元的价格,它涵盖了广泛的例子,以帮助你入门。然而,免费版本只提供了15个组件,所以只有在你有预算的情况下才可能选择这个仪表板。
ArchitectUI在所有框架和库中使用相同的组件,如React。因此,如果你的应用程序分布在不同的平台上,ArchitectUI可以确保你的仪表盘看起来和感觉是统一的。同样,Architecture Dashboard使用直截了当的代码和Vue Router进行导航链接。
7.Vue Now UI Kit
图片来源。创意蒂姆
如果你碰巧在你的主应用程序中使用Now UI Kit,你可以在你的管理应用程序中用Now UI的仪表盘版本轻松地保持你的应用程序生态系统的设计的统一性。Vue Now UI Kit使用Bootstrap v4.0和Vue构建,非常容易安装和使用。
59美元,Vue Now UI PRO仪表盘提供了150个组件,有27个模板,可以帮助你为你的下一个管理仪表盘设计找到灵感。另一方面,免费版本包括50个元素和三个模板。
8.Vuexy管理仪表板
Vuexy具有惊人的功能,如模糊搜索、书签、日历、聊天等,是一个值得投资的管理仪表板。在35美元,Vuexy包括一个Laravel启动包和一个内置的黑暗模式,让你对其外观有更多的控制。Vuexy管理仪表板是完全响应的,并建立在Vuesax框架上。
9.Gull 仪表板
图片来源。演示屏幕截图
如果你正在为你的Vue管理面板需求寻找一个一站式的解决方案,Gull Dashboard 可能是适合你的产品。Gull Dashboard的价格为24美元,供内部管理使用,它提供了超过250个UI元素来组合和建立你的管理面板。这些元素中的每一个都有完整的RTL支持,可以很容易地进行翻译。
Gull管理模板支持许多后台和管理用例,从电子商务后台到内容管理系统(CMS)。该模板还预置了各种应用程序的集合,包括发票生成器、聊天、数据表格等功能。该模板会定期更新,所以你不会错过任何新的发展。
10.Nuxt Argon仪表板
Nuxt Argon Dashboard提供了出色的设计、高代码质量和灵活性,可以帮助你快速建立管理应用程序和仪表盘的原型。基于Nuxt.js和Bootstrap,这个库提供了高可用性和一个独特的、有吸引力的UI。
99美元,Argon Dashboard是用200个预建的、可重用的组件构建的,你可以根据你的个人项目的需要,组合定制完美的组件。
每个组件都可以使用SASS文件接受颜色变化,通过快速定制来节省你的时间,而不是从头开始编码。
选择合适的仪表板
选择完美的Vue管理仪表盘模板或框架并不总是一件容易的事。市场上有各种各样的选择,而且每一种都提供了自己独特的功能集。
虽然这些仪表盘大多是基于流行的设计库,如Ant Design、Material Design、Bootstrap等,但也有少数是从头设计的。因此,在开始搜索之前,你必须要确定你的管理面板的功能和设计要求。
The postTop 10 Vue admin dashboardsappeared first onLogRocket Blog.