基于vue3的后台管理UI框架

更新日期: 2022-10-17阅读: 1.6k标签: 管理

对于前端来说,想快速构建一个后台管理系统界面,首先需要选择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

程序员的思考:一年管理成富翁,三年市场路路通,十年技术一场空

程序员的思考:在中国,做技术的出路非常有限。首先做技术需要跟对老板,其次做技术的要和老板有共同的价值观,再有最最重要的是需要有一个好的身体。

IIS和ASP的标题广告管理系统的详细介绍与使用

标题广告是Web上最常见的广告形式。本文介绍了一个基于IIS和ASP的标题广告管理系统,该系统支持广告客户和广告的管理,能够随机选择广告并生成显示广告的HTML代码

缺这项能力,做不了技术管理工作

大部分开发者工作三五年后,都能掌握所在岗位必须的知识、经验和技能,然而很多人接下来就陷入困境,左冲右突,无法加薪升职,一直停在第1层,三年五年过去了,八年十年过去了,可能都还停在1层的位置。

到底什么才是后台?

我们整天说着前端,客户端,后台。到底什么才是后台?前台(前端)后台,在英语中即:Front-End,Back-End。广义上的前端包括客户端(PC、Android、IOS等),后台即通常意义上的Server。

团队管理上的一点思考

团队的成长离不开成员的成长,一个稳定的学习环境对于成员的成长有很大的帮助,也有不少的成员是以这样的心态在工作的,特别是还没有太多工作经验的毕业生。满足成员成长的需求,会让团队富有激情

JavaScript进度管理

我们写程序的时候会经常遇到显示进度的需求,如加载进度、上传进度等。最常见的实现方式是通过记录 已完成数量(loadedCount) 和 总数量(totalCount),然后算一下就能得到进度了。

brew 安装详解

MacOS上的包管理工具。类似RHEL/CentOS上的yum或者Ubuntu上的apt-get一样。 前置条件:brew是ruby开发的,需要确认ruby是否已安装,缺省状况下是已经安装的。默认不安装cask 有需要的可以替换

组织和管理CSS

在项目开发的过程中,基于有限的时间内保质保量的完成开发任务无疑是一场挑战。在这场挑战中我们不但要快速处理自己的问题,还需要与别人协同合作,以避免两者之间的冲突。

如何统一前端项目的 Node 版本和包管理器?

成员机器 Node.js 版本不统一: 守旧派用 12.x、保守用 14.x、激进用 17.x。项目能否正常跑起来全凭天意,在没有 CICD 流水线加持本地 npm run build 的场景下线上风险可想而知。

React状态管理器Rematch的使用

Rematch是没有样板文件的Redux的最佳实践,没有action types、 action creators, 状态转换或thunks。Redux 是一个了不起的状态管理工具,由良好的中间件生态系统和优秀的开发工具支持。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!