您当前的位置:首页 > 电脑百科 > 程序开发 > 前端

盘点12个Vue 3的高颜值UI组件库

时间:2022-12-10 16:26:21  来源:今日头条  作者:Echa


 

大家好,我是Echa .

今天给大家盘点12个Vue 3的高颜值UI组件库,凡是用过Vue 框架开发项目的老铁们最少有用过其中一种或者二种以上的UI组件库,用广东话讲:个个都靓。

创作不易,喜欢的老铁们加个关注,点个赞,后面会持续更新干货,速速收藏,谢谢!

全文大纲

  1. Vuetify 是一个纯手工精心打造的 Material 样式的 Vue UI 组件库
  2. Vant 3.0 有赞前端团队开源的移动端组件库
  3. Element Plus 一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库
  4. Ant-design-vue 是 Ant Design 的 Vue 实现,组件的风格与 Ant Design 保持同步
  5. Naive UI 一个 Vue 3 组件库,比较完整,主题可调,使用 TypeScript,不算太慢,有点意思
  6. Quasar 构建高性能的 VueJS 用户界面,开箱即用,支持桌面和移动浏览器(包括 IOS Safari!)
  7. Arco Design Vue 字节跳动基于 Arco Design 开源的 Vue UI 组件
  8. Element3 一套Element风格,为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件
  9. Varlet 基于 Vue3 的 Material design 风格移动端组件库
  10. Vue-devui 基于 DevUI Design 的 Vue3 组件库,使用 pnpm + vite + vue3 + tsx 技术搭建
  11. Idux 一个基于 Vue 3.x 和 TypeScript 开发的开源组件库
  12. NutUI 3 京东风格的 Vue 移动端组件库,开发和服务于移动Web界面的企业级产品
Vuetify

 

官网地址:https://vuetifyjs.com/

Github(36k): https://github.com/vuetifyjs/vuetify

Vuetify 是一个纯手工精心打造的 Material 样式的 Vue UI 组件库。 不需要任何设计技能 — 创建叹为观止的应用程序所需的一切都触手可及。一套完整的开发对接文档,易上手。

截屏:


 


 

Vant 4.0

官网地址:https://vant-ui.github.io/vant/

Github(20.6k): https://github.com/vant-ui/vant

Vant 是一个轻量、可靠的移动端组件库,于 2017 年开源。

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。

特性:

 

  • 性能极佳,组件平均体积小于 1KB(min+gzip)
  • 70+ 个高质量组件,覆盖移动端主流场景
  • 零外部依赖,不依赖三方 npm 包
  • 使用 TypeScript 编写,提供完整的类型定义
  • 单元测试覆盖率超过 90%,提供稳定性保障
  • 提供丰富的中英文文档和组件示例
  • 提供 Sketch 和 Axure 设计资源
  • 支持 Vue 2、Vue 3 和微信小程序
  • 支持主题定制,内置 700+ 个主题变量
  • 支持按需引入和 Tree Shaking
  • 支持无障碍访问(持续改进中)
  • 支持深色模式
  • 支持 Nuxt 3
  • 支持服务器端渲染
  • 支持国际化,内置 20+ 种语言包

 

截屏:


 


 

Element Plus

官网地址:https://element-plus.org/zh-CN/

Github(36k): https://github.com/element-plus/element-plus

Element-plus 一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库。

可以在支持 ES2018 和 ResizeObserver 的浏览器上运行。 如果您确实需要支持旧版本的浏览器,请自行添加 Babel 和相应的 Polyfill 。

截屏:


 


 


 

Ant-design-vue

官网地址:https://antdv.com/

Github(17.5k): https://github.com/vueComponent/ant-design-vue

ant-design-vue 是 Ant Design 的 Vue 实现,组件的风格与 Ant Design 保持同步

截屏


 


 


 

Naive UI

官网地址:https://www.naiveui.com/

Github(11k):https://github.com/tusen-ai/naive-ui

Quasar 构建高性能的 VueJS 用户界面,开箱即用,支持桌面和移动浏览器(包括 iOS Safari!)

截屏


 


 


 

Quasar

官网地址:https://quasar.dev/

Github(22.5k): https://github.com/quasarframework/quasar

Quasar 构建高性能的 VueJS 用户界面,开箱即用,支持桌面和移动浏览器(包括 iOS Safari!)并且通过与我们自己的CLI紧密集成,为每种构建模式(SPA、SSR、PWA、移动应用程序、桌面应用程序和浏览器扩展)提供一流的支持,并提供最佳的开发人员体验

截屏


 


 

Arco Design Vue

官网地址:https://arco.design/

Github(3.6k): https://github.com/arco-design

ArcoDesign 是一套设计系统的简称。

 

  • ArcoDesign 的目标, 即通过通用的设计系统去解决产品中的体验问题, 并为产品设计提供指导原则解决业务问题,同时它能够促进设计部门和研发部门之间协作, 成为开发者之间沟通的语言。
  • ArcoDesign 主要服务于字节跳动旗下中后台产品的体验设计和技术实现,主要由UED设计和开发同学共同构建及维护。

 

截屏


 


 


 

Element3

官网地址:https://e3.shengxinjing.cn/

Github(3.2k): https://github.com/hug-sun/element3

Element3 一套Element风格,为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件

截屏


 


 


 

Varlet

官网地址:https://varlet.gitee.io/varlet-ui/#/en-US/index

Github(3.6k): https://github.com/varletjs/varlet

Varlet 是一个基于 Vue3 开发的 Material 风格移动端组件库,全面拥抱 Vue3 生态,由社区建立起来的组件库团队进行维护。

特性:

 

  • 提供50+个高质量通用组件
  • 组件十分轻量
  • 由国人开发,完善的中英文文档和后勤保障
  • ️ 支持按需引入
  • ️ 支持主题定制
  • 支持国际化
  • 支持 webstorm,vscode 组件属性高亮
  • 支持 SSR
  • 支持 Typescript
  • 确保90%以上单元测试覆盖率,提供稳定性保证
  • ️ 支持暗黑模式

 

截屏


 


 


 

Vue-devui

官网地址:https://vue-devui.github.io/

Github(586): https://github.com/DevCloudFE/vue-devui

vue-devui 是基于 DevUI Design 的 Vue3 组件库,使用 pnpm + vite + vue3 + tsx 技术搭建,包含55个简洁、易用、灵活的组件,支持按需引入,支持主题定制,并内置 追光 / 蜜糖 / 紫罗兰 等 5 种漂亮的主题

截屏


 


 


 

Idux

官网地址:https://idux.site/

Github(365): https://github.com/IDuxFE/idux

@idux 是一套企业级中后台 UI 组件库, 致力于提供高效愉悦的开发体验。

基于 Vue 3.x + TypeScript 开发, 全部代码开源并遵循 MIT 协议,任何企业、组织及个人均可免费使用。

特性:

 

  • 全面拥抱 Composition API,从源码到文档
  • 完全使用 TypeScript 开发,提供完整的类型定义
  • Monorepo 管理模式:cdk, components, pro
  • 开箱即用的高质量组件
  • 灵活的全局配置
  • 深入细节的主题定制能力
  • 国际化语言支持

 

截屏


 


 


 

NutUI 3

官网地址:https://nutui.jd.com/#/

Github(4.9k): https://github.com/jdf2e/nutui

NutUI 3 京东风格的 Vue 移动端组件库,开发和服务于移动Web界面的企业级产品

特性:

 

  • 70+ 高质量组件,覆盖移动端主流场景
  • 支持一套代码同时开发 H5+多端小程序
  • 基于京东App 10.0 视觉规范
  • 支持按需引用
  • 详尽的文档和示例
  • 支持 TypeScript
  • 支持服务端渲染(测试阶段)
  • 支持组件级别定制主题,内置 700+ 个变量
  • 国际化支持,已支持英文,印尼语和繁体中文
  • 单元测试覆盖率超过 80%,保障稳定性
  • 提供 Sketch 设计资源

 

截屏


 


 


 



Tags:Vue   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
大家好,我是Echa .今天给大家盘点12个Vue 3的高颜值UI组件库,凡是用过Vue 框架开发项目的老铁们最少有用过其中一种或者二种以上的UI组件库,用广东话讲:个个都靓。创作不易,喜...【详细内容】
2022-12-10  Tags: Vue  点击:(0)  评论:(0)  加入收藏
一、Node.js1.什么是Node.js?Node(或者说 Node.js,两者是等价的)是 JavaScript 的一种运行环境。在此之前,我们知道 JavaScript 都是在浏览器中执行的,用于给网页添加各种动态效...【详细内容】
2022-11-17  Tags: Vue  点击:(19)  评论:(0)  加入收藏
Java智慧小区管理系统源码 智慧物业管理系统源码开源地址:http://www.ydmdd.com/#/index/goods/28e18c96-741b-48e5-9192-af41012992d4使用SpringBoot+Mybatis+BootStrap+Lay...【详细内容】
2022-11-04  Tags: Vue  点击:(66)  评论:(0)  加入收藏
真正的大师,永远都怀着一颗学徒的心!一、项目简介Vue2/Vue3前后端分离开发框架二、实现功能 支持移动端和pc端 支持自动生成代码 支持各种图表表单 支持树形菜单 支持...【详细内容】
2022-11-02  Tags: Vue  点击:(31)  评论:(0)  加入收藏
在考虑 笔记本 或者 显示器 默认设置125%或者150%缩放,导致布局错乱的解决方法 一、为什么会出现有这个问题? 因为现在很多14寸的笔记本,出厂默认就是150%的显示。导致很多时...【详细内容】
2022-11-01  Tags: Vue  点击:(119)  评论:(0)  加入收藏
Svelte 的优点 代码是根据说明在没有额外运输规格的情况下生成的。 它将指令转换为强大的运行时语言。 它运行代码并优化代码生成,速度相比React、vue的运行资源消耗小很多...【详细内容】
2022-10-29  Tags: Vue  点击:(38)  评论:(0)  加入收藏
说明目前重点放在别的东西上,所以这个插件不再更新,只能用于pc端,移动端自己可以fork进行优化。Installyarn add vue-draggingHow to use普通html<script src="./vue.js"></scr...【详细内容】
2022-10-21  Tags: Vue  点击:(33)  评论:(0)  加入收藏
Vue 基础核心知识点 一、Vue 简介概述:动态构建 用户界面 的 渐进式 框架动态构建:虚拟 DOM用户界面渐进式作者特点 声明式编码、遵循MVVM原则 编码简单、体积小 组件化、复用...【详细内容】
2022-10-18  Tags: Vue  点击:(41)  评论:(0)  加入收藏
TroisJS 是一个基于 Three.js 的 vue3 三维可视化库,TroisJS对桌面和移动端都有良好的支持。使用 TroisJS 可以在网站上添加一个 3D 渲染器,并在你的 vue文件 的部分中使用...【详细内容】
2022-10-08  Tags: Vue  点击:(106)  评论:(0)  加入收藏
如果你在 vue3 开发中使用了 <script setup> 语法的话,对于组件的 name 属性,需要做一番额外的处理。对于 vue@3.2.34 及以上版本,在使用 <script setup> 的单文件组件时,vue 会...【详细内容】
2022-10-08  Tags: Vue  点击:(80)  评论:(0)  加入收藏
▌简易百科推荐
大家好,我是Echa .今天给大家盘点12个Vue 3的高颜值UI组件库,凡是用过Vue 框架开发项目的老铁们最少有用过其中一种或者二种以上的UI组件库,用广东话讲:个个都靓。创作不易,喜...【详细内容】
2022-12-10  Echa  今日头条  Tags:Vue   点击:(0)  评论:(0)  加入收藏
加密,是以某种特殊的算法改变原有的信息数据,使得未授权的用户即使获得了已加密的信息,但因不知解密的方法,仍然无法了解信息的内容。请求路径请求头的加密验证是非常常见的一种...【详细内容】
2022-12-01  爬扒提吧  今日头条  Tags:WEB   点击:(10)  评论:(0)  加入收藏
如今,大多数组织都专注于前端开发,以提高用户参与度,产生投资回报率,网站效率和更好的网站外观。所有这些因素都有助于增强数字平台的业务可见性。目前市场上有很多前端开发工具...【详细内容】
2022-11-28  程序员星仔  搜狐号  Tags:前端   点击:(26)  评论:(0)  加入收藏
Google PageSpeed Insights可以为网站生成性能报告,它在移动设备和桌面设备上都是免费的。并且还给出了影响页面加载速度的原因,并为这些问题提供了解决方案。网站速度按照 100 分进行划分,其中:...【详细内容】
2022-11-27  Echa  今日头条  Tags:前端   点击:(18)  评论:(0)  加入收藏
大家好,我是 Echa。今天来推荐一些值得阅读的前端书籍!想要电子书的老铁们,加关注私信我,回复“前端书”即可。 1. CSS(1)CSS 世界、CSS 新世界CSS世界三部曲中的其中两部,都是关...【详细内容】
2022-11-26  Echa  今日头条  Tags:前端   点击:(17)  评论:(0)  加入收藏
几个常出现的问题:1.网站打开空白2.页面头部出现多余的空白3.网站出现乱码,如“锘�”4.后台登录验证码不显示解决方案:1.选用专业的编辑器,例如notepad++,sublime,editplus这样不会...【详细内容】
2022-11-25  中国西部数码  今日头条  Tags:BOM属性   点击:(11)  评论:(0)  加入收藏
一、Node.js1.什么是Node.js?Node(或者说 Node.js,两者是等价的)是 JavaScript 的一种运行环境。在此之前,我们知道 JavaScript 都是在浏览器中执行的,用于给网页添加各种动态效...【详细内容】
2022-11-17  亿佰特物联网实验室  今日头条  Tags:Node   点击:(19)  评论:(0)  加入收藏
对于互联网公司来说用户就是上帝,做好客户体验一切才有可能。所以互联网公司都会把钱砸向前端,Web前端程序员也越来越受到企业争相聘用。但web前端工程师真的那么值钱吗?1web前...【详细内容】
2022-11-08  小青老师在昌平  搜狐号  Tags:前端   点击:(9)  评论:(0)  加入收藏
前端工程师已经是大家不再陌生的一个软件行业的工种了,尽管这一工种诞生也没几年。前端工程师的英文名&mdash;front-end engineer,简称FE,下文将用FE来代称。前端工程师的首要...【详细内容】
2022-11-07  颜若兮  搜狐号  Tags:前端工程师   点击:(18)  评论:(0)  加入收藏
TroisJS 是一个基于 Three.js 的 vue3 三维可视化库,TroisJS对桌面和移动端都有良好的支持。使用 TroisJS 可以在网站上添加一个 3D 渲染器,并在你的 vue文件 的部分中使用...【详细内容】
2022-10-08  GitHub精选  今日头条  Tags:vue3   点击:(106)  评论:(0)  加入收藏
站内最新
站内热门
站内头条