首页 > 其他分享 >Vue3 常用组件库推荐

Vue3 常用组件库推荐

时间:2023-08-16 22:44:06浏览次数:52  
标签:常用 Vue github UI https Vue3 组件 com

Vue 作为一款深受广大群众喜欢的前端框架,拥有众多优秀的开源 UI 组件库,这里整理了一下供大家参考。

这几套框架主要用于后台管理系统和移动端的制作,方便开发者快速开发。

一、PC 端 UI 库

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

Github: https://github.com/element-plus/element-plus

Element-plus 基于 Vue 3,面向设计师和开发者的组件库。 

 

1.2 Ant-design-vue
官网地址:https://antdv.com/

Github: https://github.com/vueComponent/ant-design-vue

ant-design-vue 是 Ant Design 的 Vue 实现,开发和服务于企业级后台产品。 

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

Github: https://github.com/vuetifyjs/vuetify

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

Vuetify 是世界上最流行的 Vue.js 框架,用于构建功能丰富、快速的应用程序。

 

 

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

Github: https://github.com/vant-ui/vant

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

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

 

1.5 Naive UI
官网地址:https://www.naiveui.com/

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

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

 

1.5 arco.design
字节跳动企业级产品设计系统,支持React和Vue双版本

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

ArcoDesign 基于字节跳动公司内部的 Byte Design 升级而来,在打磨了近 3 年之后,通过字节内部大量业务沉淀和验证,在由掘金举办的《稀土开发者大会2021》上开源了,这不仅仅是一款 UI 组件库,而是一个能力全面的企业级产品设计系统。

ArcoDesign 主要解决在打造中后台应用时,让产品设计和开发无缝连接,提高质量和效率。目前 ArcoDesign 主要服务于字节跳动旗下中后台产品的体验设计和技术实现,主要由 UED 设计和开发同学共同构建及维护。 

 

1.6 TDesign

腾讯业务团队在服务业务过程中沉淀的一套企业级设计体系

官方地址:https://tdesign.tencent.com/

开发文档:https://tdesign.tencent.com/vue-next/overview 

 

1.7 DevUI

华为基于 Vue3 和 DevUI 设计的 UI 组件

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

 

1.8 vuestic-ui

Vue 3 的免费和开源 UI 库 ,UI非常好看,并且有可用后台管理界面。

官方地址:https://vuestic.dev/

Vuestic UI 是一套由 Epicmax 团队开发的一套基于 Vue.js 的 web 开发组件库,最近更新发布了 Vue3 版本,希望用 Vue .js 的专业知识以最佳方式构建一个可用性强且全面的开源工具。Vuestic UI 在发布后不久,便成为使用 Vue 构建的最受欢迎的组件库之一。

 

二、移动端 UI 库

2.1 Vant

Vant 是一个轻量、可靠的移动端组件库。

官方地址:https://vant-contrib.gitee.io/vant/#/zh-CN/

Github:https://github.com/youzan/vant

有赞团队开源的 Vant 3 移动端 UI 组件库,不仅已全面支持 Vue 3 而且还支持微信小程序和支付宝小程序。可以说移动端 UI 组件库王者。Vant 对内承载了有赞所有核心业务,对外服务十多万开发者,是业界主流的移动端组件库之一。 

 

2.2 NutUI

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

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

 

2.3 nutui-bingo

由京东 NutUI 前端团队出品的一款基于 NutUI + Vue 3 的抽奖组件库,用于快速开发营销活动和小游戏场景的抽奖玩法。

官方地址:https://nutui.jd.com/bingo/#/

 

抽奖组件技术特性

一共包含 12 种抽奖组件

UI 设计基于京东 APP 10.0 视觉规范

官网提供详尽的文档和充足的代码示例

基于 Vue 3.0,也支持 TypeScript,支持按需引入

便捷灵活的自定义设置

覆盖12种常见的抽奖组件

TurnTable 大转盘抽奖

Marquee 跑马灯抽奖

SquareNine 九宫格抽奖

ScratchCard 刮刮卡抽奖

GiftBox 神秘大礼盒

LottoRoll 摇奖机

Hiteggs 砸金蛋

GiftRain 红包雨

LuckShake 摇一摇

DollMachine 娃娃机

ShakeDice 摇骰子

GuessGift 你藏我猜

2.4 Varlet

Material 风格移动端组件库 ,文档非常齐全。被尤雨溪推荐了,值得关注。

官方地址:https://varlet.gitee.io/varlet-ui/#/zh-CN/home 

 

2.5 uview-plus
uview-plus3.0是基于uView2.x修改的vue3版本

官方地址:https://uiadmin.net/uview-plus/ 

 

2.6 Cube UI 
滴滴团队开源的 Cube UI 移动端 Vue UI 组件库,轻巧趁手。

官网:https://didi.github.io/cube-ui/#/zh-CN

Github:https://github.com/didi/cube-ui

Cube UI 质量可靠,由滴滴内部组件库精简提炼而来,经历了业务一年多的考验,并且每个组件都有充分单元测试,为后续集成提供保障。体验极致,以迅速响应、动画流畅、接近原生为目标,在交互体验方面追求极致。 

 

标签:常用,Vue,github,UI,https,Vue3,组件,com
From: https://www.cnblogs.com/Im-Victor/p/17636416.html

相关文章

  • 深入探秘 Python 类的常用魔术方法
    魔术方法(MagicMethods),也称为特殊方法或双下划线方法,是Python中一类特殊命名的方法,其名称以双下划线__开头和结尾。这些方法在类的定义中具有特殊的用途,用于控制类的行为,与内置操作符和函数交互,以及实现一些特定的功能。魔术方法使得自定义的类可以模拟内置类型的行为,使其更加强......
  • 常用协议的格式--主要是传输层及以下
    以太帧IPv4IPv6ARPICMPTCPUDPDHCPDNSSNMPSNMP协议工作方式利用SNMP协议可以更好地管理和监控网络。管理工作站可以远程管理所有支持该协议的网络设备,如监视网络状态、修改网络设备配置、接收网络事件警告等。下面介绍SNMP协议的作用、构成、工作原理及通信方......
  • Echart图表 之 tooltip提示框组件配置项大全
    axisPointer:坐标轴指示器配置项label:坐标轴指示器的文本标签lineStyle:axisPointer.type为line时有效shadowStyle:axisPointer.type为shadow时有效crossStyle:axisPointer.type为cross时有效。textStyle:提示框浮层的文本样式其中也会含有很多属性,具体使用请参考一下内容1tooltip......
  • Linux-shell常用命令
    1.$的使用echo"$0"打印当前文件名称echo"$1"打印当前文件后的第一个字符串echo"$2"打印当前文件后的第二个字符串echo"$*"打印当前文件后的所有字符串echo"$#"打印当前文件后的字符串个数2.""/''/``的区别""会识别$[]或者$(())中的内容并输出''直......
  • 父子组件传值
    1.父传子利用refhttps://www.cnblogs.com/lwx11111/p/17629539.html2.子传父2.1父组件<HiddenDangerListv-on:setHiddenId="setHiddenId"></HiddenDangerList>setHiddenId(hiddenId){this.item.hiddenId=hiddenId;},2.2子组件fun(){this.$......
  • 引入element-ui组件
    element-ui文档:https://element.eleme.io/#/zh-CN/component/quickstart 1、完整引入,按照如下红框中的引入即可,引入后即可使用element-ui中的各组件 2、按需引入,按照文档中引入即可 ......
  • docker常用命令
    一、docker的启停、状态查看:systemctlstatusdockersystemctlstartdockersystemctlstopdockersystemctlrestartdocker 二、docker内部命令#查看容器运行情况dockerstats#搜索镜像dockersearchxxx#拉取镜像   dockerpullxxx#查看所有镜像(包括隐藏......
  • elementUI使用el-upload组件上传图片
    <el-form-itemlabel="上传图片":rules="[{required:true,message:'必须要上传图片',trigger:'blur'}]"prop="image"><el-upload:action=webSite......
  • 七大常用编程范式!看看你知道几个?
    一、编程范式是什么?编程范式是程序设计的一种基本方法和规范,它代表了特定编程语言的独特风格和方法。作为一种策略,编程范式帮助程序员解决各种计算问题,其选择可以优化代码的可读性、可维护性和可扩展性。常见的编程范式包括面向对象、函数式和逻辑式等,每种范式都有其独特的理念和......
  • git 常用命令
     正文1、常用命令-还原到指定提交后的版本:gitreset--hard日志版本号 (-soft软还原,本地的代码还是最新的,通常用于合并小的提交)-还原后强制提交:gitpushoriginmaster-f -还原错误的commit:gitreset--softHEAD~1 --hard:删除工作空间改动代码,撤销commit,撤......