由Kumar Harsh撰写 ✏️

Vue 先进且制作精良,是全球 Web 开发人员和设计师最广泛推荐的 JavaScript 库之一。虽然 Vue 包含有助于从头开始构建项目的复杂组件,但它的受欢迎程度和庞大的社区还提供了对第三方包和预构建组件的访问,从而可以减少开发时间。

然而,找到最适合您的应用程序可能是一项艰巨的工作。在本指南中,我们将探索 10 个 UI 库和框架,用于构建美观且实用的仪表板,这是一个越来越常见的 UI 元素,用于为任何项目添加组织。我们将检查每个仪表板的独特优势和劣势,突出权衡和优势。

本文介绍的仪表板范围从免费到高级,大多数都提供这两个版本。让我们开始吧!

1. Vue Notus

[](https://res.cloudinary.com/practicaldev/image/fetch/s--EPzbpWSy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://blog. logrocket.com/wp-content/uploads/2021/10/vue-notus-ui-dashboard.jpeg)

图片来源:Creative Tim

查看演示

Vue Notus是基于 Tailwind CSS 和Vuikit的免费 Vue 管理仪表板。 Vue Notus 拥有一百多个组件,可帮助您加快项目开发,同时仍保留您的个人设计偏好。

如果您喜欢明亮清新的色彩,您会特别喜欢这款仪表板。每个组件都包含您可以使用 Tailwind CSS 类轻松控制的颜色变化。同样,您可以访问和修改每个组件的状态,例如样式、悬停、焦点等。但是,如果您以任何形式添加最初不存在于代码库中的新类,则需要重新编译 Tailwind。

该软件包包括完整的预构建示例集合;如果您的用例与任何示例项目匹配,您只需在上线前更改几个数字。

2\。验证

[](https://res.cloudinary.com/practicaldev/image/fetch/s--b3G_fljo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://blog. logrocket.com/wp-content/uploads/2021/10/vuetify-dashboard-library-ui.jpg)

查看演示

如果您经常使用 Vue,您可能已经熟悉Vuetify,这是一个遵循 Material Design 准则的 UI 组件库。

Vuetify 提供了广泛的选择,包括免费和高级用纯 Vue 编写的预构建仪表板,这意味着您不必担心从长远来看可能会损害应用程序性能的任何 jQuery 依赖项。同样,Vuetify 支持内部性能度量,例如代码拆分和延迟加载,使 Vuetify 仪表板可靠且高性能。

3\。 Muse Vue Ant 仪表板

[](https://res.cloudinary.com/practicaldev/image/fetch/s--xKJhl3a2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://blog. logrocket.com/wp-content/uploads/2021/10/muse-vue-ant-dashboard.jpg)

图片来源:Creative Tim

查看演示

Muse Vue Ant Dashboard建立在 Ant Design 框架之上,是 Vue 应用程序中最时尚、最灵活的仪表板之一。它具有本指南中涵盖的所有选项的最具描述性的文档之一,因此您应该没有任何问题开始。

Ant Design 框架内部使用 SASS 来维护主题并支持自定义,因此,您可以使用 SASS 文件和类来自定义此仪表板的元素。

凭借 70 多个组件和 7 页示例仪表板,您可以依靠 Muse Vue Ant 仪表板立即启动并运行您的管理面板。但是,如果您在免费版本中找不到所需的内容,您可以考虑升级到PRO 版本,它有 300 多个组件和 26 个示例,价格为 69 美元。

4\。 Vue 黑色仪表板

[](https://res.cloudinary.com/practicaldev/image/fetch/s--j639CeW---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://blog. logrocket.com/wp-content/uploads/2021/10/vue-black-dashboard.jpg)

图片来源:Creative Tim

查看演示

基于 Bootstrap v4.0,Vue Black Dashboard是一个华丽的 Vue 框架,它提供了 16 个组件,您可以组合这些组件为您的独特项目创建完美的仪表板。只需 59 美元,PRO 版本就包含 300 多个深色和浅色主题的组件。 Vue Black Dashboard 是少数几个在其界面中同时提供深色和浅色主题的框架之一。您可以使用 SASS 文件和类修改和自定义所有可用组件。

5. Vue 材质仪表板

[](https://res.cloudinary.com/practicaldev/image/fetch/s--Y14h_tZd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://blog. logrocket.com/wp-content/uploads/2021/10/vue-material-dashboard-ui.jpg)

图片来源:Creative Tim

查看演示

Vue Material Dashboard是原始 Material Dashboard 的官方 Vue 版本,是市场上最受欢迎的 Vue 管理仪表板模板之一。它不仅看起来非常时尚时尚,而且还基于 Material UI,这是有史以来最流行的设计库之一。

免费版的 Vue Material Dashboard 包含超过 16 个组件、两个自定义插件和七个示例页面供您入门。另一方面,59 美元的 PRO 版本很丰富。它包含 200 多个组件、15 个自定义插件和 28 个示例页面,涵盖了许多可能的用例。

6\。 ArchitectUI Vue 仪表板

[](https://res.cloudinary.com/practicaldev/image/fetch/s--t-vQqhFm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://blog .logrocket.com/wp-content/uploads/2021/10/architectui-bue-dashboard.png)

查看演示

由 Vue CLI 和 Bootstrap v4.0 提供支持,ArchitectUI 的 DashboardVue PRO包是 150 多个组件的集合。只需 69 美元,它就涵盖了广泛的示例,可帮助您入门。但是,免费版仅提供 15 个组件,因此只有在有预算的情况下才能选择此仪表板。

ArchitectUI 在所有框架和库中使用相同的组件,例如 React。因此,如果您的应用程序分布在不同的平台上,ArchitectUI 可确保您的仪表板外观和感觉统一。同样,ArchitectUI Dashboard 使用简单的代码和 Vue Router 来进行导航链接。

7\。 Vue Now UI 工具包

[](https://res.cloudinary.com/practicaldev/image/fetch/s--_r0GwswF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://blog. logrocket.com/wp-content/uploads/2021/10/vue-now-ui-dashboard.jpg)

图片来源:Creative Tim

查看演示

如果您在主应用程序中碰巧使用了Now UI Kit,您可以在管理应用程序中使用 Now UI 的仪表板版本轻松保持应用程序生态系统设计的统一性。 Vue Now UI Kit 使用 Bootstrap v4.0 和 Vue 构建,非常易于安装和使用。

Vue Now UI PRO Dashboard售价 59 美元,提供 150 个组件和 27 个模板,可帮助您找到下一个管理仪表板设计的灵感。另一方面,免费版包括 50 个元素和三个模板。

8. Vuexy 管理仪表板

[](https://res.cloudinary.com/practicaldev/image/fetch/s--Axp0Zaii--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://blog. logrocket.com/wp-content/uploads/2021/10/vuexy-vue-dashboard-ui.jpg)

查看演示

Vuexy具有令人惊叹的功能,如模糊搜索、书签、日历、聊天等,是一个值得投资的管理仪表板。 Vuexy 售价 35 美元,包括一个 Laravel 入门工具包和一个内置的暗模式,让您可以更好地控制它的外观。 Vuexy Admin 仪表板具有完全响应能力,并建立在Vuesax框架之上。

9\。海鸥仪表板

[](https://res.cloudinary.com/practicaldev/image/fetch/s--xi9GdcKn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://blog.logrocket .com/wp-content/uploads/2021/10/gull-dashboard-ui.png)

图片来源:演示截图

查看演示

如果您正在寻找 Vue 管理仪表板需求的一站式解决方案,Gull Dashboard可能是适合您的产品。 Gull Dashboard 内部管理员使用价格为 24 美元,提供超过 250 个 UI 元素来组合和构建您的管理面板。这些元素中的每一个都具有完整的 RTL 支持,并且可以轻松翻译。

Gull 管理模板支持许多后端和管理用例,从电子商务后端到内容管理系统 (CMS)。该模板还预先构建了一系列各种应用程序,其中包括发票生成器、聊天、数据表等功能。该模板会定期更新,因此您不会错过任何新的发展。

10\。 Nuxt 氩仪表板

[](https://res.cloudinary.com/practicaldev/image/fetch/s--efMJINk9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://blog. logrocket.com/wp-content/uploads/2021/10/nuxt-argon-dashboard-ui.jpg)

查看演示

Nuxt Argon Dashboard提供出色的设计、高代码质量和灵活性,可帮助您快速制作管理应用程序和仪表板的原型。该库基于 Nuxt.js 和 Bootstrap,提供了高可用性和独特而有吸引力的 UI。

售价 99 美元的 Argon Dashboard 使用 200 个预构建的、可重复使用的组件构建而成,您可以结合这些组件来定制适合您个人项目需求的完美组合。

每个组件都使用 SASS 文件接受颜色更改,从而通过快速自定义节省您的时间,而不必从头开始编写代码。

选择合适的仪表板

选择完美的 Vue Admin Dashboard 模板或框架并不总是一件容易的事。市场上有多种选择,每一种都提供自己独特的功能集。

虽然这些仪表板中的大多数都基于流行的设计库,如 Ant Design、Material Design、Bootstrap 等,但也有一些是从头开始设计的。因此,在开始搜索之前确定管理面板的功能和设计要求非常重要。

---

以用户的方式体验您的 Vue 应用程序

调试 Vue.js 应用程序可能很困难,尤其是在用户会话期间有数十个甚至数百个突变时。如果您有兴趣监视和跟踪生产中所有用户的 Vue 突变,试试 LogRocket。

LogRocket就像一个用于 Web 应用程序的 DVR,几乎可以记录 Vue 应用程序中发生的所有事情,包括网络请求、JavaScript 错误、性能问题等等。无需猜测问题发生的原因,您可以汇总并报告问题发生时应用程序所处的状态。

LogRocket Vuex 插件将 Vuex 突变记录到 LogRocket 控制台,为您提供有关导致错误的原因以及发生问题时应用程序处于什么状态的上下文。

现代化调试 Vue 应用程序的方式 -免费开始监控。