ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

基于Vue的前端UI组件库的比对和选型

2022-09-02 13:30:08  阅读:235  来源: 互联网

标签:vue js 选型 Vue UI 组件


大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享学习心得,希望我的文章能成为你成长路上的垫脚石,让我们一起精进。

由于录制视频的需要,要做前端UI组件库的选型。平时国内外也见了不少基于Vue的UI组件,积累了一些素材,现在分享给大家。

本文讨论的主题包括:

  • 为什么使用第三方组件库
  • 第三方UI库比对
  • 选型的依据
  • 我选的选型

为什么使用第三方组件库

现在这个年代,好像问这么一个问题很傻,谁会自己造轮子呢?确实是这样。但是对于刚毕业的同学,或者从Ext.js年代过来的同学可能不会觉得奇怪。因为在前端组件库百花齐放的今天,谁会想到会出现选择困难症,这是其一。其二,对于刚毕业的同学或者坚持技术优先,有技术控的程序员来说,往往会缺少整体思维,他们会忽略商业、市场、成本效率等因素。技术和业务互为因果,螺旋向上。我们不应该放弃下面这些重要的理由:

  • 省时:如果创建一个具有大量配置、很少错误和跨浏览器支持的健壮的日期组件需要几周时间,而使用第三方UI组件库可能你只需要不到4分钟的时间。
  • 省钱:由于UI组件库为您节省了无数的时间,它间接地为你节省了开发成本。
  • 可靠:顶级UI组件库有专业的人员提供维护,并拥有强大的社区来提供改进。
  • 快速:如果你能够比竞争对手提前几个月发布应用,这对公司的成功是很有帮助的。

第三方UI组件库比对

国内

型号 Star 单测 GitHub 演示后台 背景 原型设计
Element UI 52.6k 81% vue-element-admin(社区) 78.2k 跳转 饿了么 Axure,Sketch
Ant Design Vue 17k 87% Pro(社区) 9.6k 跳转 社区主导,蚂蚁金服技术支持 Axure,Sketch
iView 24k iView-admin 16.2k 跳转 TalkingData

大家可以看到,我这里从流行度,性能,背景等维度进行对比,我觉得大差不差。如果从流行程度来看,你选择饿了么肯定没错,生态活跃得不要不要的。
虽然Ant官方宣传的单测试性能更高,但是仅为参考。
从背景看现在都归于阿里系了,后台确实硬实。而且他们都有社区主导的Admin管理后台,你可以跳入进去看看。相信对国内的前端同学,没有不进去串门过的,甚至都有点审美疲劳了。
所以,这次我在视频录制的时候,刻意避开国产,具体那一款,我在后面揭晓。
另外,还有一个维度我觉得也很重要,就是升级的频率。虽然Vue3出来有将近2年的时间了,但是生态其实并不完善,有些框架会适配快一点,有些则比较乌龟。所以,你如果想要尝鲜,务必考虑好。不管你选的是什么版本,组件库的选择并不影响Vue3的学习,而且学习先进技术必须提倡,因为这是趋势。但是Vue2不能放弃,大量的项目还跑在它上面呢(目前我知道的Element-plus支持Vue 3.0)。

国外

如果你对国产的那么几款Vue组件库麻木了,接下来我给你介绍几款舶来品。

  • BootstrapVue:这是一款基于Vue.js的流行库,它使用Bootstrap设计系统。它在npm网站上每周有近250000次下载。
    image

  • Buefy:这也是一款基于Vue.js的流行库,使用Bulma的设计风格,每周在npm网站上下载45000次。
    image

  • PrimeVue:这是一款基于PrimeFaces设计的UI组件库,也可用于React、Angular和Java/.NET web应用。
    image

  • Quasar:从技术上讲,这不是一个库,而是基于Vue.js之上的一个框架。基于Material设计,有自己的CLI,可编译为支持Electron和iOS创建桌面应用程序,支持使用Cordova或Stencil创建Android应用程序。如果您计划在跨平台开发中重用代码库,我推荐使用。Quasar框架还提供服务器端渲染,这有助于搜索引擎对Vue的页面和内容进行索引。

  • Vuetify:Vuetify是谷歌创建的一款UI组件库,基于Material 的设计风格,支持移动和Web应用。它npm 250000下载/周。它是如此流行,以至于它也被移植到Angular,React,Svelte, Ember.js和其他JavaScript框架。

选型的依据

我刚才在前面叨叨过了,每个人的考察维度都会有所侧重。但是我坚持社区活跃程度、后台背书厂家、性能、版本迭代频率应该不会出现大的问题,如果你有更好的理由,希望您帮我补充下,不胜感谢。
为什么我没有在这里把颜值列进来,主要是现在大伙都在互相抄作业,导致我五色有点目盲。我确信我的审美确实受到了影响。
你可能会觉得代码优雅,简洁度什么的。我也不觉得这个很重要。JAVA的代码简洁吗,没有!这里没有武断的意思,人家走的是早起的鸟儿有虫吃,把生态建设起来了,然后圈粉无数,随之又催生出许多杀手级别的应用。

我选的选型:Vuetify组件库

我选谷歌的这款组件库,符合我刚才提到的选型标准。另外,和饿了么相处到麻木了,想呼吸一下新鲜的空气。

  1. 官方地址:
  1. vue2.0安装步骤
  • 新建:勾选Router和Vuex
  • 编译:yarn build
  • 安装:vue add vuetify(过程选项默认)
  1. vue3.0安装步骤
  • 新建:勾选TS、Router和Vuex
  • 编译:yarn build
  • 安装:vue add vuetify(过程选项默认)

image
如果你在安装过程遇到上面的问题,可以在main.js中添加如下代码,重新执行上一步操作。不建议3.0,官方还在开发中,让子弹飞一会儿吧。
new Vue({ render: h => h(App), }).$mount('#app');

  1. 安装后的变化:

image
Vue CLI创建了一个Vue.config.js配置文件(用于转化Vuetify),还有一个Vuetifiy.js文件(为应用添加Vuetify的全局功能)。Vue CLI还会更新package.json,index.html, App.vue, main.js, logo.svg和HelloWorld.vue。

  1. 效果展示
    安装并运行后的效果展示。
    image

总结

好就介绍这么多吧,希望您有所收获,感谢您的捧场。

标签:vue,js,选型,Vue,UI,组件
来源: https://www.cnblogs.com/jackyfei/p/16649450.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有