基于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次下载。
    基于Vue的前端UI组件库的比对和选型插图
  • Buefy:这也是一款基于Vue.js的流行库,使用Bulma的设计风格,每周在npm网站上下载45000次。
    基于Vue的前端UI组件库的比对和选型插图1
  • PrimeVue:这是一款基于PrimeFaces设计的UI组件库,也可用于React、Angular和Java/.NET web应用。
    基于Vue的前端UI组件库的比对和选型插图2
  • Quasar:从技术上讲,这不是一个库,而是基于Vue.js之上的一个框架。基于Material设计,有自己的CLI,可编译为支持Electron和iOS创建桌面应用程序,支持使用Cordova或Stencil创建Android应用程序。如果您计划在跨平台开发中重用代码库,我推荐使用。Quasar框架还提供服务器端渲染,这有助于搜索引擎对Vue的页面和内容进行索引。
    基于Vue的前端UI组件库的比对和选型插图3
  • Vuetify:Vuetify是谷歌创建的一款UI组件库,基于Material 的设计风格,支持移动和Web应用。它npm 250000下载/周。它是如此流行,以至于它也被移植到Angular,React,Svelte, Ember.js和其他JavaScript框架。
    基于Vue的前端UI组件库的比对和选型插图4

选型的依据

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

我选的选型:Vuetify组件库

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

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

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

  1. 安装后的变化:

基于Vue的前端UI组件库的比对和选型插图6
Vue CLI创建了一个Vue.config.js配置文件(用于转化Vuetify),还有一个Vuetifiy.js文件(为应用添加Vuetify的全局功能)。Vue CLI还会更新package.json,index.html, App.vue, main.js, logo.svg和HelloWorld.vue。

  1. 效果展示
    安装并运行后的效果展示。
    基于Vue的前端UI组件库的比对和选型插图7

总结

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

文章来源于互联网:基于Vue的前端UI组件库的比对和选型

THE END
分享
二维码