Vue常用组件库的比较分析（pc端）

已于 2022-04-29 16:01:30 修改
阅读量9.3k 收藏 35
点赞数 2
分类专栏： 前端开发 文章标签： Element和iView MintUI和Vant 比较分析 pc 端组件库
于 2019-04-30 15:25:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38633659/article/details/89710430
版权

前言：
Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 能完美地驱动复杂的单页应用。

本篇文章就是对pc端的各大组件库进行分析比较 ，以便根据实际情况选择自己需要的组件库，包括pc端和移动端。

目录简介：

1、Element(pc):饿了么前端团队开发的桌面端组件库

介绍： 饿了么前端团队开发的桌面端组件库，当前最新版本：v2.8.2
Star： 37.186k
项目特点：

1.团队维护
2.支持三个版本：vue、react、angular
3.支持 Nuxt.js
4.常规支持：多语言、自定义主题、按需引入、内置过渡动画
5.文档详细，组件齐全
6.支持响应式布局，提供基于断点的隐藏类
7.适合常规 pc 端项目

样式： 类名大量使用计算属性，css 和主文件分离单独一个文件
官网地址
GitHub地址

2、iView(pc):主要服务于 PC 界面的中后台产品

最新版本： v3.4.1
Star： 21.063k
项目特点：

1.团队维护
2.支持： Nuxt.js、TypeScript、Electron
3.常规支持：多语言、自定义主题、按需引入
4.文档详细，组件齐全
5.支持响应式布局
6.UI 比较美观
7.适合常规 pc 端项目，皮肤美观

样式： less 计算属性 前缀嵌套
官网地址
GitHub地址

3、vuetify(pc)：一个试图推动前端开发发展到一个新水平的组件

介绍： Vuetifyjs 根据材料设计规格提供 UI 布局。 V 1.0 Alpha 版本提供了超过 80个 reusbale 组件，其中包含一个易于记忆的语义设计，它基于名称简单明了 type-as-you 的类型属性。在GitHub 上有超过 18K 的 star。
官网地址

4、vue-strap(pc)：基于 Bootstrap 标记和 CSS 的本地 Vue.js 组件

介绍： 基于 Vue.js 的 Bootstrap 组件 该仓库包含一系列基于 Bootstrap 标记和 CSS 的本地 Vue.js 组件。所以不需要 jQuery 和 Bootstrap 的 JavaScript 文件，唯一需要依赖的是: Vue.js Bootstrap CSS ，VueStrap 不依赖某个非常精确的 Bootstrap 版本。如果喜欢bootstrap的小伙伴又不想换jquery的开发方式是不二的选择。
官网地址

5、buefy(pc)：即装即用的轻量级UI组件

**介绍：**Buefy 基于 Bulma 和 Vue.js 的轻量级UI组件，它提供了即装即用的轻量级组件。虽然组件选择有限，但是值得你去尝试。
官网地址

6、Vue-Blu(pc)：全面、灵活且强大的ui组件

介绍： Vue-Blu是基于Vuejs和Bulma开发的开源UI组件库。旨在为PC端的前端开发(特别是中后台产品)提供一个快速且灵活的解决方案。全面、灵活且强大的ui组件，API友好。
官网地址

7、vue-beauty(pc)：漂亮的 vue 组件库

介绍： 基于 ant design 的漂亮的 vue 组件库；vue-beauty 是一套基于 vue.js 和 ant-design样式 的PC端 UI 组件库，旨在帮助开发者提升产品体验和开发效率、降低维护成本。
官网地址

8、at-ui(pc)：一个体面的干净整洁的 UI 组件

介绍： AT-UI 是一个模块化的前端 UI 框架，开发基于Vue.js 的快速和强大的 Web 界面。专门为桌面应用程序构建，AT-UI提供了一套 npm + webpack + babel 前端开发工作流程。全英文的文档对用户来说可能是具有有挑战性的，但它提供了一个体面的干净整洁的 UI 组件。
官网地址

9、Keen UI：纯英文文档

最新版本： v3.7.1
Star： 3.700k
项目特点：
纯英文文档。

官网地址
GitHub地址

10、Vue Material：具有精美动效的组件

最新版本： v1.0.0
Star： 7.831k
项目特点：
1.Material 设计：是一个轻量级的框架， 建立在谷歌的 Material Design 基础上。 设计强大的和美观的web应用并适用于不同的屏幕。
2.全功能应用：可以动态地生成和使用主题，根据自己的需求只用组件，UI元素与组件的优势在于可以更简单的使用API和其他的。
3.兼容性：它的目的是提供一组可重用的组件和一系列的UI元素，使用 Vue 2.0 建立支持 主流的浏览器 的应用。

官网地址
GitHub地址

注：以上最新版本号和Star数量更新于2019/4/30。
参考地址：

瓜子三百克
关注
专栏目录
VuePC端UI组件库
fxbar的博客
07-10 1663
Element Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 中文文档 | github地址 image 2. iView 一套基于 Vue.js 的高质量UI 组件库 中文文档 | github地址 image 3. vue-element-admin vue-element-admin是基于 Vue2.0，配合使用 Element UI 组件库的...
vue组件库(Element UI)
酷爱前端的小陈博客
05-19 1722
目录 1. 什么是 vue 组件库 2. vue 组件库和 bootstrap 的区别 3. 最常用的 vue 组件库 4. Element UI 4.1在 vue2 的项目中安装 element-ui 4.2 引入 element-ui 4.3 完整引入 4.4 按需引入 步骤1，安装babel-plugin-component：​编辑 步骤2，修改根目录下的babel.config.js 配置文件，新增plugins 节点如下：​编辑 步骤3，如果你只希望引入部分...
Vue的组件库大全
我就是我是好孩子的博客
05-07 4619
它是由 Mozilla 团队开发的，建立在 HTML、CSS 和 JavaScript 的基础上，通过简单的标记语言和组件系统，使开发者能够轻松创建和展示交互式的 VR 和 AR 内容。
2024年前端最新Vue常用组件库的比较分析（pc端），2024年最新前端面试录音在线听
最新发布
erhtre的博客
05-13 1473
1、Element(pc):饿了么前端团队开发的桌面端组件库2、iView(pc):主要服务于 PC 界面的中后台产品3、vuetify(pc)：一个试图推动前端开发发展到一个新水平的组件4、vue-strap(pc)：基于 Bootstrap 标记和 CSS 的本地 Vue.js 组件5、buefy(pc)：即装即用的轻量级UI组件6、Vue-Blu(pc)：全面、灵活且强大的ui组件7、vue-beauty(pc)：漂亮的 vue 组件库8、at-ui(pc)：一个体面的干净整洁的 UI 组件。
vue相关的开源项目
aaa333qwe的博客
08-10 8246
awesome-github-vue 是由OpenDigg整理并维护的Vue相关开源项目库集合。我们会定期同步OpenDigg上的项目到这里，也欢迎各位提交项目给我们。 如果收录的项目有错误，可以通过issue反馈给我们。这里的项目Star数不是实时更新的，一般是一周更新一次。 内容 UI组件开发框架实用库服务端辅助工具应用实例Demo示例 UI组件 element 
Vue PC后台系统组件大全
weixin_30808575的博客
03-24 184
1.https://vue.ant.design/ 2.http://element-cn.eleme.io/#/zh-CN 3.https://www.iviewui.com/ 4.https://at-ui.github.io/at-ui/#/zh 5.https://www.heyui.top 6.https:/...
12 个不可错过的 Vue UI 组件库，请查收
BYGFJ的博客
02-12 3121
1. Element UI Element UI 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。它是一个用于 Web 的 UI 组件库 ，除了 Vue 之外，它还具有React 和 Angular的版本。 Element UI 的特性： （1）一致性 Consistency 与现实生活一致： 与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念； 在界面中一致： 所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。 （2）反馈 Fe...
一个适用于PC端的地区选择器组件-Vue
吕大瓜的博客
12-03 2952
简介 这是一个适用于PC端的地区选择组件，可以控制地区选择的范围，适用于Vue2.x项目中，引入和使用都十分简单。 引入 去到该项目Github下，将 areaPicker 整个文件夹下载下来并放到你的项目components目录下做为一个Vue组件，并在需要的页面中引入并注册为一个组件即可！ 如： import areaPicker from '@/components/areaPicker/index' // 文件对应路径 export default { components: {
Vue 常用组件
熊宗的博客
10-16 873
1、Better-scroll （移动端实现页面滚动） 2、less/sass/stylus （CSS预处理） 3、axios（http请求） 4、vuex （实现数据共享） 5、vue-awesome-swiper （轮播图） 6、iconfont （图标字体插件）:https://www.iconfont.cn/ 7、Animate.css （动画效果）:https://daneden.github.io/animate.css/ 8、vue 客服IM聊天： demo1: 链接：https://git
Axure web/PC组件库
12-08
里边包含了大量的原型图所需组件，经过整理的哦，大家可以下载使用
vue组件库
08-10
vue组件库
一款开箱即用的 Vue 中后台管理系统框架，支持多款 UI 组件库，兼容PC、移动端 vue-admin, vue-elemen
04-04
"vue-admin" 是一个针对Vue.js的后台管理系统模板，它可能包含了基础的页面结构、路由配置、权限控制机制以及各种常用的UI组件。开发者可以根据需求进行定制和扩展，以满足特定的业务场景。 "vue-elemen" 指的是...
基于vue3+vite+ts的可视化页面设计器（完整源码+说明）（可在线设计页面表单等，支持引入多种组件库和自定义组件）.zip
03-28
【资源说明】 1、该资源内项目代码都是经过测试运行成功，功能正常的情况下才上传的，请放心下载使用。 2、适用人群：主要针对计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、...
VUE常用组件库
艾米的猫儿的博客
11-19 6447
移动端常用组件库 1.Vant https://youzan.github.io/vant 2.Cube UI https://didi.github.io/cube-ui 3.Mint UI https://mint-ui.github.io pc端常用组件库 1.Element UI https://element.eleme.cn 2.IView UI https://www.iviewui.com ...
Vue----组件库
emmmm.....
04-27 4336
文章目录组件库1. 什么是 vue 组件库2. 最常用的 vue 组件库3. Element UI3.1 在 vue2 的项目中安装 element-ui3.2 引入 element-ui4. 把组件的导入和注册封装为独立的模块 组件库 1. 什么是 vue 组件库 在实际开发中，前端开发者可以把自己封装的 .vue 组件整理、打包、并发布为 npm 的包，从而供其他人下载和使用。 这种可以直接下载并在项目中使用的现成组件，就叫做 vue 组件库。 2. 最常用的 vue 组件库 PC 端 Ele
2024年Web前端最新Vue常用组件库的比较分析（pc端），解锁前端性能优化的五大误区
2401_84619467的博客
05-05 604
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】ue面试题文档，大厂面试题文档**开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】[外链图片转存中…(img-dGnbskkS-1714919953170)][外链图片转存中…(img-0PerDy3f-1714919953171)]
前端组件库（基于PC端和移动端）
m0_74995879的博客
04-09 1808
是一种用于构建应用程序用户界面的工具。它提供了一组可重用的组件，这些组件可以帮助开发者更快地构建出漂亮、功能强大的用户界面。使用前端组件库有很多好处。首先，它可以提高开发效率，因为组件已经被编写好，并且可以直接使用，不需要开发者从头开始编写。其次，它可以提高代码的可维护性，因为组件是可重用的，所以当需要修改某个组件时，只需要修改一个地方，而不需要修改整个应用程序。最后，它可以提高用户体验，因为组件通常经过了精心设计和测试，可以提供更好的用户体验。
vue 移动端组件库
07-28
目前有几个常用的Vue移动端组件库，包括Vux、Mint UI、Vant、cube-ui、MUI、Muse-ui和vonic。其中，Vux是一个类似微信样式的移动端组件库，Mint UI是饿了么前端团队开发的移动端组件库，Vant是有赞团队开发的移动端组件库，cube-ui是滴滴团队开发的移动端组件库，MUI是一个最接近原生APP体验的高性能前端框架，Muse-ui是基于Vue 2.0的优雅的Material Design UI组件库，vonic则是用于快速构建移动端单页应用的组件库。这些组件库都提供了丰富的组件和功能，可以帮助开发者快速构建高质量的移动应用。你可以根据自己的需求选择适合的组件库进行开发。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* [Vue常用组件库的比较分析（移动端）](https://blog.csdn.net/weixin_38633659/article/details/89736656)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [Vue常用的组件库大全【前端工程师必备】【实时更新】【移动端、PC端（web端）、数据可视化组件库（数据大屏...](https://blog.csdn.net/qq_44757034/article/details/128090797)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

瓜子三百克

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值