7

基于vue3的后台管理UI框架

 2 years ago
source link: https://www.fly63.com/article/detial/12202
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

对于前端来说，想快速构建一个后台管理系统界面，首先需要选择js框架，然后就要选择相应的UI框架。基于vue3的优秀表现和良好的生态这里我们选择Vue.js作为js框架，下面fly63前端网为大家推荐几款主流的vue3的后台管理UI框架。

Element Plus

Element Plus，由饿了么大前端团队开源出品的一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的组件库，Element Plus是基于Vue3面向设计师和开发者的组件库，提供了配套设计资源，帮助你的网站快速成型。

Element Plus 使用 TypeScript + Composition api 进行了重构，主要有： 

  • 使用 TypeScript 开发，提供完整的类型定义文件
  • 使用 Vue 3.0 Composition API 降低耦合，简化逻辑
  • 使用 Vue 3.0 Teleport 新特性重构挂载类组件
  • 使用 Lerna 维护和管理项目
  • 使用更轻量更通用的时间日期解决方案 Day.js
  • 升级适配 popperjs, async-validator 等核心依赖
  • 完善 52 种国际化语言支持

除此以外，还有：

  • 全新的视觉*
  • 优化的组件 API
  • 更多自定义选项
  • 更加详尽友好的文档
官网地址：http://element-plus.org/zh-CN/
github：https://github.com/element-plus/element-plus

Ant Design Vue

Ant Design Vue 致力于提供给程序员愉悦的开发体验。Ant Design Vue 是一个非常成熟的框架，使用 Ant Design Vue 创建用户界面非常简单，这些组件可以适应各种图标样式、字体和黑色主题。Ant Design Vue 不断改进其60多个组件，基本覆盖项目大部份需求，而且使它们变得更好，更易于访问。

Vue3 上的 Ant Design 包更小，感觉更轻，并且支持 SSR（还包括组合API），Ant Design 拥有成熟的复杂组件，如数据表、统计框、pop确认、模态和弹出窗口。

提炼自企业级中后台产品的交互语言和视觉风格。

开箱即用的高质量 Vue 组件。

共享 Ant Design of react 设计工具体系。

官网地址：https://www.antdv.com/
github：https://github.com/vueComponent/ant-design-vue

BVuestic

Vuestic 是 Vue 最漂亮的开源管理面板之一，擅长编写可维护的 Vue 代码，制作灵活的组件和接口。它包含了流行的 Vuestic Admin UI 和更多的组件。Vuestic 强调它对键盘导航的开箱即用支持，由于它提供的用户体验，这个特性在前端社区很受欢迎。

Vuestic 提供了 50 多个具有独特功能和广泛可配置性的组件，应式设计，这些组件几乎适用于所有屏幕分辨率。Vuestic 在整个框架中提供无缝翻译支持和键盘可访问性。

Vuestic 已经凭借其漂亮的组件目录确立了自己作为最美观的 Vue3 UI 框架之一的地位。他们现在正在加快步伐创建更复杂的组件，例如日期选择器或数据表，它们肯定会像他们当前的产品一样具有创造性。

官网地址：https://vuestic.dev/
github：https://github.com/epicmaxco/vuestic-ui

Naive UI

一个 Vue 3 组件库，比较完整，主题可调，使用 TypeScript，快，有点意思

Naive UI 在 Twitter 上发布，然后被 Vue 的创建者转发，给这个新生的组件库带来了大量流量。现在，Naive UI 在不到三个月的时间里就在 GitHub 上获得了5.1k 颗星。

它提供了70多个制作精良的组件，这些组件可以无缝地融入几乎任何类型的 Vue3应用。Naive的组件性能优异，可定制性极强，并支持 TypeScript，提供了很棒的开发体验。

文档网站易于浏览，并具有完整的自定义输入，可帮助开发人员预览组件在他们自己的主题中的外观。可以使用这些选项来创建自己的带有颜色图案和字体的完整主题。这个定制的主题可以下载并轻松添加到应用程序中以覆盖默认值。

官网地址：https://www.naiveui.com/
github：https://github.com/tusen-ai/naive-ui

PrimeVUE

PrimeVue 是一套非常优秀的 Vue UI 组件库，支持 Vue 3 的 web UI 组件库，组件丰富，定制性很强，官网文档清晰，代码例子充足，而且中文化也做得很不错，是一款可用性很强的 Vue 组件库。

PrimeVUE 也算是最早支持 Vue3 的框架之一，它并没有让人失望。PrimeVUE 拥有 80 多个组件，证明自己是此列表中组件范围最广的框架之一。

组件包括带有仪表、滑块、树、图形、拆分按钮、旋钮、图表等的密码表单。PrimeVUE 甚至还集成了一个表单验证库 Vuelidate。附带了预先制作的主题，并提供了一个成熟的可视化编辑器，帮助开发人员定制自己的主题。

  • 组件丰富。内置 70 多个常用的组件，体验优秀，使用简单
  • 主题丰富。内置大量主题，且提供强大的主题定制工具
  • 高效开发模板。由专业设计师设计并由 Vue 专家精心制作的精致的 Vue-CLI 开发模板
  • 可访问性强。面向所有人的UI组件，全面支持 WCAG（Web内容可访问性指南）标准
  • 专业支持。出色的支持服务，可在1个工作日内做出回应，并可以要求为UI库提供增强功能和新功能
  • 响应式，对移动端的支持友好，包括优化触摸元素
官网地址：https://www.primefaces.org/primevue/
github：https://github.com/primefaces/primevue

Quasar

Quasar 是一个完整的、以性能为中心的框架，可帮助构建 Vue 用户界面（SPA、PWA、SSR、移动和桌面），除了 Vue、Node 和 webpack，Quasar 还包含 Cordova、Capacitor 和 Electron，它们可以帮助构建桌面和移动体验，而无需单独学习。

Quasar 框架似乎是基于 Material Design，但是一旦开始，一切都可以很好地定制以适应自己的设计体系。

对 Vue3 支持也很迅速，而且 Quasar 已经发布了几乎所有的 v1 组件、插件和指令。此外，他们还发布了可组合组件，帮助开发人员更深入地了解 Quasar API。

官网地址：https://quasar.dev/
github：https://github.com/quasarframework/quasar

链接: https://www.fly63.com/article/detial/12202


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK