ElementUI 组件库之外,供我们选择的 Vue 组件库还有很多!

2024-04-17 05:58

本文主要是介绍ElementUI 组件库之外,供我们选择的 Vue 组件库还有很多!,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

https://juejin.im/post/6864350927768748039

 

ElementUI 组件库之外,供我们选择的 Vue 组件库还有很多!

 

quote

 

 

前文回顾:Vue+Spring Boot 前后端分离的商城项目开源啦!

Vue 组件千千万,只要不行咱就换。

ElementUI 近况

根据我最近的观察,得知一些关于 ElementUI 维护人员都退去的消息,这意味着什么?意味着已经学不动的我们,不用再去学新东西了,开不开心?意不意外?

 

 

 

这里放几个知乎链接:

element-ui 是不是不维护了

如果 ElementUI 不维护了,也不再支持 Vue 3了我们该怎么办呢?

仔细翻阅上述知乎回答,有些比较闲的作者已经 fork 了 ElementUI 的源码,自己改造适配 Vue3,在此我只能说两个字:敬佩。

那么面对这样的情况,作为前端开发的我们应该如何将损失降到最低呢?

我的答案是:耐心等待更新,不要着急不要惊慌,团队核心成员依然在进行项目的更新,下一代 Element Plus github.com/element-plu… 也在持续迭代中。

如何选择一个好的 UI 框架作为项目的组件库

  • 😍好看

    先抛开大不大厂不说,中小厂为了加快开发效率,可能不会对 UI 组件库的样式做太多的改动,这就要求 UI 组件库本身就要自带颜值✨。

  • 🏭大厂加持

    先不说大厂要有多大吧,起码要有独立的团队去维护组件库,若是桃园三结义一般因为某些意气用事,要搞一个组件库,最后公司卖给某宝,撒手框架不管,这就比较尴尬。

  • 💡好的生态

    什么是生态,就是围绕着这个框架的周边设施是否齐全。比方说 Github 上的 Issue 是否能快速给予提问者反馈,是否有论坛社区等网站让使用者可以贡献自己的二次开发的组件(物料库),开源作品多不多,文档写得好不好(特别是中文文档)等等,都将决定这个组件库的发展好坏与否。

以上排名不分先后,每一条都很重要,请根据自己公司业务的实际情况,酌情选择。

市面上现有的组件库分析

说到组件库,React 我先不提了,因为统一标配 Ant Design。

Vue 的组件库可谓是百花齐放、琳琅满目、选不过来,下面我按照个人印象给大家评价一下市面上这些有人用的 Vue 组件库。

以下介绍顺序,分先后,按照 Github 的⭐⭐数。

ElementUI

📖作者:饿了么团队(现已被阿里收购) ⭐Github star:46.8k+ 📌属性:PC 端组件库

简介: 内涵 55+ 个网页开发常用组件,并且组件库结合了 vue-cli 出了相应的插件 Element 插件,你可以用它们快速地搭建一个基于 Element 的项目。引入方式也支持了按需引入,以达到减小项目体积的目的。在主题方面,官方自己提供了一些,并且可以上传自定义主题。

👍相关开源项目:

  • vue-element-admin:一款基于 ElementUI 二次开发的后台开源项目。
  • vue-manage-system:基于 Vue + Element UI 的后台管理系统解决方案。
  • vue2-element-touzi-admin:基于 Vue2.0 + vuex + ElementUI 后台管理系统。
  • element3:慕课网讲师蜗牛老师个人维护的一个 ElementUI + Vue3.0 版本,当然现在可能就是 beta 版本的 Vue3.0。自己平时做项目拿来把玩可以,但是用于公司生产环境需要三思。

🎬总结: 从这几个比较好的开源项目类型可以看出,ElementUI 多数用于后台管理系统的页面开发,业务组件也多用于数据的处理以及表格表单的展示,但是还是那句话没人维护了,要是用的同学请慎重考虑一下后面要更新的 Vue3.0。

Vuetify

📖作者:John Leider、Heather Leider、Kael Watts-Deuchar 等,一群国外开发大佬,详情可以点击上面的 Github 地址查看。 ⭐Github star:27k+ 📌属性:PC 端组件库

简介: Vuetify 是 Vue.js 的头号组件库,自 2016 年以来一直在积极开发。这点可以说相当优秀,从他们的官方文档上整齐的广告可以看出,该组件库受到广大甲方的一致好评,纷纷投来广告。在生态上做的也相当到位,甚至还有付费的主题。相应组件的文档也非常详细,有用例和 API 的解释,在开发的过程中能减少很多不必要的麻烦。

👍相关开源项目:

  • vuetify-material-dashboard:一个基于 vuetify 设计风格的管理系统。
  • adminify:同样是一个集成 vuetify 组件库的开源项目。
  • vue-movie:vuetify + vue 仿豆瓣电影项目。
  • electron-vue-music:electron + vue + vuetify 仿网抑云音乐。

🎬总结: 难道是我的错觉吗?国内的小伙伴们都非常爱国,这个组件库在 Github 几乎找不到什么好的开源项目,不兼容 Edge 和 IE 浏览器让它在我们国内可能不是很吃香。若是公司有对 IE 的支持需求,选它的时候要三思而后行。

Vux

📖作者:airyland 等个人维护项目 ⭐Github star:17.2k+ 📌属性:Mobile 组件库、基于WeUI

简介: 我很欣慰国内有这样优秀的个人开发能开发出这样不错的组件库,集结了一些有志之士一起维护着这个看着并不怎么惊艳的开源项目。作者在官方文档下方就直说了:“体验不佳,维护靠个人。“ 我再看了看主要贡献者的 Github 活跃程度,以及近期的 Issues 解决情况,我敢断言,这个框架只要作者还健在,应该不会歇菜。特别是微信 H5 开发的朋友,这款组件库的 UI 是基于微信官方样式设计的,十分贴合,建议使用。

👍相关开源项目:

  • vux2.5-webapp:一个基于 vux 开发的商城项目。
  • vue2-vux-fitness-project:一个基于 vux 开发的种子项目,同学们可以拿这个项目作为启动项目。
  • vue-music:vux + vue 仿网抑云音乐项目。

🎬总结: 文档好、组件多、还有又拍云的独家赞助。但是是个人维护的项目,并且最新的更新时间也是2019年4月份,个人还是很喜欢这个开源项目的,希望作者能够继续更新,在升级 Vue3 后就不是很推荐使用了。

Vant

📖作者:有赞技术团队 ⭐Github star:14.6k+ 📌属性:Mobile 组件库

简介: Vant 是一个移动端组件库,支持 TS、SSR、按需引入、国际化等等,最重要的是它还支持小程序。官方文档支持中英文,并且文档对开发者也是非常友好,有用例和展示效果。组件丰富,因为有赞团队是做商城类的,所以 Vant 支持了一些商城的特色组件,如地址栏、省市区、商品卡片、优惠券、提交订单、商品规格等等。

👍相关开源项目:

  • newbee-mall-vue-app:新蜂商城 Vue 版本。

 

 

 

  • vant-demo:Vant 官方示例合集,包含了 Vant、Vant Weapp 和 Vant Cli 相关的示例,详细内容请打开各目录查看。

  • vant-weapp:Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。

🎬总结: 看了以下 Github 的 Issue,最近一次更新在前几天,说明框架一直在维护中。有赞目前已经上市,公司内部都是使用 Vant 进行开发,所以开发者们不必担心这个组件库不再被维护,相信 Vue3 出来之后,团队也会对组件库做升级处理。

Ant-design-vue

📖作者:唐金州 ⭐Github star:11.3k+ 📌属性:PC 组件库

简介: 这里是 Ant Design 的 Vue 实现,开发和服务于企业级后台产品。加了 ant 貌似是蚂蚁金服开发的,其实是个人按照 ant-design 做了一对一的临摹。

👍相关开源项目:

  • ant-design-vue-pro:基于 Ant Design of Vue 实现的 Ant Design Pro。
  • vue-alain:使用 Vue-cli 3.0、TypeScript、ant-design-vue 实现的中后台框架。
  • k-form-design:基于 Vue 和 ant-design-vue 实现的表单设计器。

🎬总结: ant-design-vue 也算是国内个人开发者里,临摹比较成功的案例,乘着蚂蚁金服这波流量,迅速涨星星。组件还算看得过去,问题也更新的挺及时的,中规中矩的一个组件库,可用。

Cube-UI

📖作者:滴滴团队 ⭐Github star:8.3k+ 📌属性:Mobile 组件库

简介: 从官方文档一眼就看出它是滴滴团队开发维护的,组件数量不是很多,没有什么特色,最新版本居然是今年4月份的,版本更新也不是很及时。

👍相关开源项目:

  • cube-application-guide:一个快速上手 cube-ui 的教程。

🎬总结: 这里就不做过多介绍了,也只有滴滴内部的人员会去使用了,毕竟 Vue 移动端组件那么多,我为什么要选一个又丑维护又不及时的组件库呢,再见👋。

Mand-Mobile

📖作者:滴滴团队 ⭐Github star:2.7k+ 📌属性:Mobile 组件库

简介: Mand Mobile 是面向金融场景设计的移动端组件库,基于Vue.js实现。目前已实际应用于滴滴四大金融业务板块的10余款产品中。40+ 的实用组件,满足基本的业务需求。

👍相关开源项目:

  • palette:mand-mobile 的视觉主题编辑器。

🎬总结: 这个移动端组件就非常有特点了,就好像 Vant 针对的是电商,Mand 针对的是金融业务。内部有丰富的金融业务相关的组件,如金融数字、票据、验证码、收银台、折线表、刻度尺、数字键盘等等。要是你的公司是做金融业务的,可以尝试使用这套组件库。

NutUI

📖作者:京东团队 ⭐Github star:2.2k+ 📌属性:Mobile 组件库

简介: 2020 年初新出的一个船新组件库。NutUI 是一套京东风格的移动端组件库,开发和服务于移动 Web 界面的企业级产品。50+ 高质量组件,40+ 京东移动端项目正在使用。

👍相关开源项目:

  • nutui-demo:基于 Vue CLI 搭建 NutUI 的相关示例项目。

🎬总结: 刚刚出来,开源项目不是很多,京东这个组件库要是做得好的话,可能会超过 Vant 有赞的,毕竟东哥把我们都当作兄弟,他的技术团队肯定不会坑我们。组件内有几个特色组件,如数字倒计时、图片懒加载、视频、配送时间、转盘抽奖、签名、地址选择等等。说实话,看到转盘抽奖的时候,我都惊了,京东~真有你的!!

还有很多很多默默无闻的个体户,用心的维护着自己的组件库,在这就不一一拿出来介绍了,因为真的很多!!!也希望大家也可以在评论区畅所欲言,说说你们喜欢的组件库,感谢大家的观看。

最后,推荐一下个人写的 Vue 商城项目,感兴趣的同学可以观摩一下,给个 star :

 

 

 

newbee-mall 在 GitHub 和国内的码云都创建了代码仓库,如果有人访问 GitHub 比较慢的话,建议在 Gitee 上查看该项目,两个仓库会保持同步更新。

  • newbee-mall in GitHub : https://github.com/newbee-ltd/newbee-mall-vue-app
  • newbee-mall in Gitee : https://gitee.com/newbee-ltd/newbee-mall-vue-app

iview

https://www.iviewui.com/

这篇关于ElementUI 组件库之外,供我们选择的 Vue 组件库还有很多!的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/910969

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

如何选择适合孤独症兄妹的学校?

在探索适合孤独症儿童教育的道路上,每一位家长都面临着前所未有的挑战与抉择。当这份责任落在拥有孤独症兄妹的家庭肩上时,选择一所能够同时满足两个孩子特殊需求的学校,更显得尤为关键。本文将探讨如何为这样的家庭做出明智的选择,并介绍星贝育园自闭症儿童寄宿制学校作为一个值得考虑的选项。 理解孤独症儿童的独特性 孤独症,这一复杂的神经发育障碍,影响着儿童的社交互动、沟通能力以及行为模式。对于拥有孤独症兄

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca

C#实战|大乐透选号器[6]:实现实时显示已选择的红蓝球数量

哈喽,你好啊,我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记,这是第6篇; 接下来实现实时显示当前选中红球数量,蓝球数量; 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时,在对应的位置显示实时已选择的红球、蓝球的数量; 02 标签名称 分别设置Label标签名称为:lblRedCount、lblBlueCount

透彻!驯服大型语言模型(LLMs)的五种方法,及具体方法选择思路

引言 随着时间的发展,大型语言模型不再停留在演示阶段而是逐步面向生产系统的应用,随着人们期望的不断增加,目标也发生了巨大的变化。在短短的几个月的时间里,人们对大模型的认识已经从对其zero-shot能力感到惊讶,转变为考虑改进模型质量、提高模型可用性。 「大语言模型(LLMs)其实就是利用高容量的模型架构(例如Transformer)对海量的、多种多样的数据分布进行建模得到,它包含了大量的先验

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能