草庐IT

Vue常用的组件库大全【前端工程师必备】

蓝匣子itbluebox 2023-04-03 原文

Vue常用的组件库大全【前端工程师必备】

Vue常用的组件库

(一)移动端 常用组件库

1)Vant ui

🔸有赞移动 UI 组件库,支持 Vue2/3 微信小程序,支付宝小程序
https://vant-contrib.gitee.io/vant/v2/#/zh-CN/col

2)Cube UI

🔸滴滴出行移动端 UI 库
https://didi.github.io/cube-ui/#/zh-CN

3)VUX

🔸移动端 UI 组件库,针对微信强势优化
https://vux.li/

4) NuTUI 3.0

🔸京东移动端 UI 库,面向电商业务场景,支持 Vue2/3
https://nutui.jd.com/#/

6)倒计时组件库

🔸 https://kalacloud.com/blog/best-countdown-component/

7)表格组件库

🔸https://kalacloud.com/blog/best-vue-data-table-grid/

8)富文本编辑器

🔸 https://kalacloud.com/blog/vue-richtext-editor/

9)Loading加载动画组件

🔸加载动画组件
https://loading.io/spinner/

10)Mint ui

🔸 饿了么前端团队开发的移动组件库
http://mint-ui.github.io/#!/zh-cn

11) vonic

🔸 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约。

12) Vux-ydui

🔸是 YDUI Touch 的一个Vue2.x实现版本,专为移动端打造,在追求完美视觉体验的同时也保证了其性能高效。目前由个人维护。

13. Mand-Mobile

🔸面向金融场景的Vue移动端UI组件库,丰富、灵活、实用,快速搭建优质的金融类产品。

(二)PC端(web端)常用组件库

1)Element UI ( Vue2)

🔸饿了么前端团队开发 https://element.eleme.io/#/

2)Element UI PLUS (Vue3)

🔸https://element-plus.org/zh-CN/#/zh-CN

3)Ant Design Vue (2/3)

🔸https://2x.antdv.com/components/overview-cn/

4)Naive UI

🔸https://www.naiveui.com/zh-CN/os-theme

5)Avue(Vue动态组件库)

🔸https://avuejs.com/

6)Vuetify 3

🔸老牌 Vue UI ,基于谷歌的 Material Design 样式开发,支持 Vue3
https://vuetifyjs.com/zh-Hans/

7)iView

🔸一套基于 Vue.js 的高质量UI 组件库 https://www.iviewui.com/

8)Vue Material

🔸 https://madewith.cn/search?q=Vue

9)vue-element-admin

🔸 https://panjiachen.github.io/vue-element-admin-site/zh/

10)VueStrap

🔸http://yuche.github.io/vue-strap/

11)AT-UI

🔸是一款基于 Vue.js 2.0 的前端 UI 组件库,主要用于快速开发 PC 网站中后台产品

12)Vue-Blu

🔸是基于Vuejs和Bulma开发的开源UI组件库。旨在为PC端的前端开发(特别是中后台产品)提供一个快速且灵活的解决方案。

13)Keen UI

14)Buefy

15)Boostrap Vue

https://code.z01.com/bootstrap-vue/

16)Fish-UI

17)Quasar

18)Muse UI

19)Radon ui

20)N3-components

22)Beauty

23)hey UI*

https://www.heyui.top/

(三)其他常用组件库

1)echarts(图表组件库)

🔸 https://echarts.apache.org/examples/zh/index.html#chart-type-candlestick

2)highcharts(图表组件库):

🔸https://www.highcharts.com.cn/

3)swiper(轮播图组件库):

🔸https://www.swiper.com.cn/
🔸https://swiperjs.com/demos

4)ThreeJS (3D组件库):

🔸https://threejs.org/

5)Lingo3D (3D组件库):

🔸https://www.lingo3d.com/

6)Datav

🔸(数据大屏组件库):
【Vue3:https://datav-vue3.netlify.app/
【Vue2:http://datav.jiaminghi.com/

7)v-charts

🔸在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件,只需要统一提供一种对前后端都友好的数据格式设置简单的配置项,便可轻松生成常见的图表

8) Vue baidu map

🔸基于Vue 2.x的百度地图组件
中文文档:https://dafrok.github.io/vue-baidu-map/#/zh/start/installation
在线预览:https://dafrok.github.io/vue-baidu-map/#/zh/guide/painting
🔸基于Vue3.x的百度地图组件
vue-baidu-map-3x
http://map.heifahaizei.com/doc/index.html

有关Vue常用的组件库大全【前端工程师必备】的更多相关文章

  1. ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2

    大约一年前,我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞,我可以在一个地方轻松完成,而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

  2. 7个大一C语言必学的程序 / C语言经典代码大全 - 2

    嗨~大家好,这里是可莉!今天给大家带来的是7个C语言的经典基础代码~那一起往下看下去把【程序一】打印100到200之间的素数#includeintmain(){ inti; for(i=100;i 【程序二】输出乘法口诀表#includeintmain(){inti;for(i=1;i 【程序三】判断1000年---2000年之间的闰年#includeintmain(){intyear;for(year=1000;year 【程序四】给定两个整形变量的值,将两个值的内容进行交换。这里提供两种方法来进行交换,第一种为创建临时变量来进行交换,第二种是不创建临时变量而直接进行交换。1.创建临时变量来

  3. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  4. ruby-on-rails - 在 Rails 3 中进行身份验证最常用的方法是什么? - 2

    我需要在rail3中使用标准注册/登录/忘记密码功能进行身份验证。是否有大多数人为此使用的插件或其他东西? 最佳答案 我不确定最常用的方法是什么-但可以肯定的是,Plataformatec的“Devise”是一个非常流行的方法:http://github.com/plataformatec/devise我已经尝试了一些authgem,对我来说,它是最简单的设置和修改以满足我的需要。它内置了密码恢复、帐户确认(如果需要)和其他一些非常方便的功能。 关于ruby-on-rails-在Rail

  5. ruby-on-rails - 如何在 Rails 中添加禁用的提交按钮 - 2

    我在ruby​​表单中有一个提交按钮f.submitbtn_text,class:"btnbtn-onemgt12mgb12",id:"btn_id"我想在不使用任何javascript的情况下通过ruby​​禁用此按钮 最佳答案 添加disabled:true选项。f.submitbtn_text,class:"btnbtn-onemgt12mgb12",id:"btn_id",disabled:true 关于ruby-on-rails-如何在Rails中添加禁用的提交按钮,我们在St

  6. ruby - 如何保持我不常用的编程语言技能 - 2

    关闭。这个问题是off-topic.它目前不接受答案。想改进这个问题吗?Updatethequestion所以它是on-topic用于堆栈溢出。关闭11年前。Improvethisquestion我不经常使用ruby​​-通常它加起来相当于每两个月或更长时间编写一次脚本。我的大部分编程都是使用C++进行的,这与ruby​​有很大不同。由于我与ruby​​之间的差距如此之大,我总是忘记语言的基本方面(比如解析文本文件和其他简单的东西)。我想每天练习一些基本的东西,我想知道是否有一些我可以订阅的网站,并且会向我发送当天的Ruby问题或类似的东西。有人知道这样的站点/Internet服务吗?

  7. 电脑怎么截图?进来看(8种常用截图方法) - 2

    电脑上可以截取图片吗?如果可以,该如何操作呢?相信很多小伙伴都只知道一两种截图的方式,知道的并不全面。其实,电脑上有多种方式截图的,而且非常方便。电脑怎么截图?今天我们就来教大家如何使用电脑截取图片的8种常用方式!操作环境:演示机型:Delloptiplex7050系统版本:Windows10方法一:系统自带截图具体操作:同时按下电脑的自带截图键【Windows+shift+S】,可以选择其中一种方式来截取图片:截屏有矩形截屏、任意形状截屏、窗口截屏和全屏截图。 方法二:QQ截图具体操作:在电脑登录QQ,然后同时按下【Ctrl+Alt+A】,可以任意截图你需要的界面,可以把截图的页面直接下载,

  8. 玩以太坊链上项目的必备技能(初识智能合约语言-Solidity之旅一) - 2

    前面一篇关于智能合约翻译文讲到了,是一种计算机程序,既然是程序,那就可以使用程序语言去编写智能合约了。而若想玩区块链上的项目,大部分区块链项目都是开源的,能看得懂智能合约代码,或找出其中的漏洞,那么,学习Solidity这门高级的智能合约语言是有必要的,当然,这都得在公链``````以太坊上,毕竟国内的联盟链有些是不兼容Solidity。Solidity是一种面向对象的高级语言,用于实现智能合约。智能合约是管理以太坊状态下的账户行为的程序。Solidity是运行在以太坊(Ethereum)虚拟机(EVM)上,其语法受到了c++、python、javascript影响。Solidity是静态类型

  9. (附源码)vue3.0+.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图:一.整体介绍  介绍SignalR一种通讯模型Hub(中心模型,或者叫集线器模型),调用这个模型写好的方法,去发送消息。  内容有:    ①:Hub模型的方法介绍    ②:服务器端代码介绍    ③:前端vue3安装并调用后端方法    ④:聊天室样例整体流程:1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过,signalR内置方法.invoke()  去请求接口3、监听接受方法(渲染消息)通过new signalR.HubConnectionBuilder().on

  10. ruby-on-rails - 在 Rails 应用程序的前端获取实时日志 - 2

    在Rails3.x应用程序中,我正在使用net::ssh并向远程pc运行一些命令。我想向用户的浏览器显示实时日志。比如,如果两个命令在net中运行::ssh执行即echo"Hello",echo"Bye"被传递然后"Hello"应该在执行后立即显示在浏览器中。这是代码我在ruby​​onrails应用程序中使用ssh连接和运行命令Net::SSH.start(@servers['local'],@machine_name,:password=>@machine_pwd,:timeout=>30)do|ssh|ssh.open_channeldo|channel|channel.requ

随机推荐