vue组件库设计方案（基于Vue的前端UI组件库的比对和选型）

vue组件库设计方案（基于Vue的前端UI组件库的比对和选型）演示后台GitHub型号Star单测

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

由于录制视频的需要，要做前端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次下载。
• Buefy：这也是一款基于Vue.js的流行库，使用Bulma的设计风格，每周在npm网站上下载45000次。
• PrimeVue：这是一款基于PrimeFaces设计的UI组件库，也可用于React、Angular和JAVA/.NET web应用。
• 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. 官方地址：

• 官网地址
• 组件实例地址

2. vue2.0安装步骤

• 新建：勾选Router和Vuex
• 编译：yarn build
• 安装：vue add vuetify（过程选项默认）

3. vue3.0安装步骤

• 新建：勾选TS、Router和Vuex
• 编译：yarn build
• 安装：vue add vuetify（过程选项默认）

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

4. 安装后的变化：

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

5. 效果展示
   安装并运行后的效果展示：

总结

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