基于Vue前端UI框架比较_antdesignvue和vue的区别-程序员宅基地

技术标签: html5  vue.js  日常闲聊  javascript  

  1. Vue3相对于vue2的优缺点

优点:

  1. 性能提升,主要体现在打包体积(减少了40%左右),渲染速度(快了55%),更新速度(100%)及内存使用(减少了50%)几方面。
  2. 由于增加了composition api更加支持Ts,使得代码相对于Vue2更利于维护。

缺点:

就目前来说用户数量和社区活跃度没有vue2高,有一定的学习成本(包括学习ts)

各个UI框架的比较

根据目前市场常用的框架进行初步筛选,入选了4款框架,分别为element-ui, ant-design-vue, View UI,vuetify  。以下将对着4款框架进行多个维度的比较。

一个专业的开发团队对于一款产品来说至关重要。

开发团队:

Element: 饿了么开发团队。

ant-design-vue: 阿里(但是根据提交纪录,基本还是原作者唐金州在维护)

View UI:北京视图更新科技有限公司

Vuetify: Vuetify公司(国外)

github上的Star数量也在一定程度上反映了市场的占有率

Star数量

Element: 50.8K。

ant-design-vue: 15.2K

View UI: 25.3K   i View (23.9K)   + View Ui(2.4K)

Vuetify: 32K

对浏览器的兼容性问题也是衡量框架适用性的重要指标

浏览器兼容性

element:morden browser and IE10+
element-plus: 官网没有提到兼容性;鉴于element-ui只是为vue3提供的组件库,而vue3目前不支持IE,所以可以理解 element plus的浏览器兼容性和vue3一样:不支持IE

ant-design-vue:morden browser and IE11+

View UI:大部分组件和功能支持 IE9 及以上浏览器,部分组件和功能不支持 IE

Vuetify: ie11+及safari10+

保持框架的持续更新对于框架的使用寿命来说是至关重要的

最后更新时间

Element:2021-09-02

ant-design-vue:2021-08-27

View UI:2021-06-13

Vuetify: May 2021

屏幕自适应

Vuetify是其中做的最好的一个

组件对比

 四个组件库基本都包含了常用的组件,可能再具体功能上有些许不同,View UI有部分组件需要付费使用

下面以后台系统中使用频率最高的数据表格组件举例子

Element:

上手最简单 常见需求都能满足

Antdesign Vue:

 

文档最详细,提供的方法也是最多的,特别是在对复杂表格的处理上,例如可编辑表格等

View UI

个人感觉和element类似,ui较为简洁

vuetify

   页面风格和其他的几个有所不同

总结:

优点

Element Ui:社区活跃度高,更新频率快,上手也容易

Antdesign of vue: 对于复杂表格的处理较好,用过antdesign的开发者使用这个会感到很容易

viewUi: UI风格,api使用简介明了,文档也较为详细

Vuetify:开发者几乎不需要写css代码,基于Material Design开发。屏幕自适应能力好

缺点:

Element Ui:对一些复杂的组件支持上欠缺

Antdesign of vue:除去数据表格及级联下拉框等特定组件,其余组件使用没有其他组件简单

viewUi:部分组件开始收费,github提问解答较慢

Vuetify: 国外团队开发,页面风格与其他几个不同。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44481459/article/details/120154955

智能推荐

Week2实验C题 打牌_第一行输入两个整数,代表牌的数量n和牌面值之和的限制max-程序员宅基地

文章浏览阅读197次。题目:牌局由四个人构成,围成一圈。我们称四个方向为北 东 南 西。对应的英文是North,East,South,West。游戏一共由一副扑克,也就是52张构成。开始,我们指定一位发牌员(东南西北中的一个,用英文首字母标识)开始发牌,发牌顺序为顺时针,发牌员第一个不发自己,而是发他的下一个人(顺时针的下一个人)。这样,每个人都会拿到13张牌。现在我们定义牌的顺序,首先,花色是(梅花)<(方..._第一行输入两个整数,代表牌的数量n和牌面值之和的限制max

mtk 平台 TP 驱动框架对复位和中断的封装_mtk tp gpio-程序员宅基地

文章浏览阅读264次。介绍 mtk 平台 TP 驱动框架对触摸 IC 复位和中断的封装,并以 focaltech IC 为例介绍 TP 驱动对 TP 驱动框架的使用。_mtk tp gpio

从武汉远程医疗方案看,5G战“疫”是噱头还是福音?_武汉中国移动疫情5g远程诊疗-程序员宅基地

文章浏览阅读862次。新型冠状肺炎疫情爆发后,短时间增加数万病患,尤其是湖北地区。这不论是对患者识别、会诊、救治,还是对医院医生护士的检查、消毒、照顾、防护等工作,都带来巨大挑战。如今在抗疫进入攻坚阶段的重要时刻,我们必须尽可能避免接触行为,减少病毒传播,但人们又不能停止沟通,许多工作还要加速开展。所以,国家提倡科技战“疫”。5G这个热门技术,就在此次战“疫”工作的多个环节亮相。值得一提的是,三大运营商以及华为等企业,提供了5G智慧医疗、5G无人车等解决方案,增援湖北火神山医院和雷神山医院。这些方案被认为可以提高医救效率,减轻一_武汉中国移动疫情5g远程诊疗

ceph概述-程序员宅基地

文章浏览阅读313次,点赞9次,收藏7次。ceph可以实现的存储方式:

enq: TX - row lock contention_tx-transaction (row lock contention)-程序员宅基地

文章浏览阅读918次。enq: TX - row lock contention_tx-transaction (row lock contention)

FCPX:快速时尚视频转场Stupid Raisins Fast Pop下载-程序员宅基地

文章浏览阅读2.1k次。今天小编带你了解一款 Stupid Raisins Fast Pop是一个fcpx效果插件,它允许您在Final Cut Pro,Motion,Premiere Pro和After Effects中使用。Fast Pop是快速,时尚的视频过渡,为您的视频项目增添了活力,在几秒钟内为您的视频添加专业的转换。欢迎需要的朋友前来下载体验!!FCPX插件:Stupid Raisins Fast Pop安装方法 (点击️上方链接看详细安装教程)需要搭配final cut pro x视频制作软件一起使用效_fast pop下载

随便推点

块级元素(比如div)显示在同一行的方法_css中如何将两个块级元素显示在同一行-程序员宅基地

文章浏览阅读8.6k次。1 float :left2 display:inline; css中的长和宽显示1 当你设置一个元素的长和宽的时候 用到100% 相对的是父亲元素。2 当一个父元素中有两个元素的显示在两行中的时候这个时候height就不能设置成100%,因为有两个元素,但是width可以这么设置。..._css中如何将两个块级元素显示在同一行

XDP, traffic control/tc/qdisc和netfilter在Linux的网络架构(packet flow in Netfilter and General Network)_packet flow in netfilter and general networking-程序员宅基地

文章浏览阅读799次。packet flow in netfilter and general networking, XDP, netfilter, qdisc, traffic control, linux iproute2, linux tc工具, Linux网络架构_packet flow in netfilter and general networking

C语言中32个关键字详解_ansi c32个关键字的意思-程序员宅基地

文章浏览阅读2.1w次,点赞147次,收藏1.1k次。标准C语言的32个关键字_ansi c32个关键字的意思

Windows程序设计第五版源代码---BEEPER2_vc程序设计 第5版-程序员宅基地

文章浏览阅读171次。源代码如下:#include <windows.h>#define ID_TIMER 1 LRESULT CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);VOID CALLBACK TimerProc(HWND, UINT, UINT, DWORD);int WINAPI WinMain(HINSTANCE hInstance..._vc程序设计 第5版

深度相机工作原理_深度相机原理-程序员宅基地

文章浏览阅读4.1k次。转自:https://blog.csdn.net/electech6/article/details/78707839结构光法:为解决双目匹配问题而生深度图效果:结构光vs.双目投射图案的编码方式 直接编码 ..._深度相机原理

斐讯 N1 降级、刷机及 Armbian 安装 [2019.7.23]_斐讯n1官方降级工具-程序员宅基地

文章浏览阅读1.4w次,点赞2次,收藏19次。最前最近捡垃圾不断,之前购买了斐讯遗产 K2P(真香,最近刷了 OpenWrt)、T1(刷了电视盒子)和蜗牛星际(刷了黑群晖),最近又捡了台斐讯 N1,主要用于做一些简单的爬虫和 Adguard Home 服务。其实原先有过一台树莓派 3B,但是 emmmm 吃灰了一年,然后二手卖了。虽然近期树莓派 4 发布了,性能有较大提升,但由于价格的原因,还是 N1 香。刷机过程由于已有的几篇文章有些内容..._斐讯n1官方降级工具

推荐文章

热门文章

相关标签