推荐21个顶级的Vue UI库! – TalkingData‘s Blog

推荐21个顶级的Vue UI库!

最近,随着“星球大战”(指 GitHub 的 Star 数量大比拼)的爆发,Vue.js 在 GitHub 上的 Star 数超过了 React。虽然 NPM 的下载量仍然落后于 React,但 Vue.js 的受欢迎程度似乎在持续增长。

1、Vuetify

Star 数为 11K,提供了 80 多个 Vue.js 组件,这些组件是根据谷歌 Material Design 指南实现的。Vuetify 支持所有平台上的浏览器,包括 IE11 和 Safari 9+(使用 polyfill),并提供了 8 个 vue-cli 模板。

地址: https://github.com/vuetifyjs/vuetify

2、Quasar

Star 数超过 6K,是构建 Vue.js 响应式网站、PWA、混合移动应用和 Electron 应用的流行框架。Quasar 还支持诸如 HTML/CSS/JS 压缩、缓存清除、摇树优化(tree shaking)、源映射、代码分割和延迟加载、ES6 转码等功能。

地址:https://github.com/quasarframework/quasar

3、Element

Star 数将近 28K,是一款面向 Web 的 Vue.js 2.0 UI 工具包。它拥有一个强大的社区和 350 个贡献者,提供了丰富的可定制组件,以及完整的样式指南和更多的资源。 地址:https://github.com/ElemeFE/element

4、Vue Material

Star 数差不多 6K,是一个实了谷歌 Material Design 的简单库。该库还提供了一个 webpack 样板、用于 Nuxt.js 的 SSR 模板和一个单独的 HTML 文件(通过这个文件开始使用框架)。这里有一些入门的例子https://codesandbox.io/s/github/vuematerial/examples/tree/master/examples/quick-start。

地址: https://github.com/vuematerial/vue-material

5、Keen-UI

Star 数将近 3.5 K,一组 Vue 组件的集合,在设计上受到了谷歌 Material Design 的启发。Keen-UI 并不是一个 CSS 框架,它不包含网格系统、排版样式等。相反,它关注的是基于 Javascript 的交互式组件。

地址:https://github.com/JosephusPaye/Keen-UI

6、Buefy

Star 数 3K 左右,基于 Bulma(https://bulma.io)提供了一组轻量级的 UI 组件。Vue.js 和 Bulma 是这个库唯一的两个内部依赖。它的大小约为 60KB(压缩后的大小,并且包含了 Bulma)。你可以查看实时文档网站(https://buefy.github.io/#/documentation/start)并在 Codepen 上运行代码。

地址: https://github.com/buefy/buefy

7、Bootstrap Vue

Star 数超过 5K,为 Vue.js 提供了 Bootstrap 4 组件和网格系统的实现,并提供了自动 WAI-ARIA 可访问性标记。

地址: https://github.com/bootstrap-vue/bootstrap-vue

8、Muse-UI

Star 数超过 6K,是另一个 Vue 2.0 MD 库,提供了 40 多个 UI 组件和可定制主题。文档主要使用中文撰写,不过大多数组件是自解释的,文档只起到辅助作用。该项目在积极的开发和维护当中。 地址:https://github.com/museui/muse-ui

9、AT-UI

Star 数接近 1.5 K,一个模块化的前端 UI 框架,用于开发基于 Vue.js 的 Web 界面,适用于桌面应用程序。它提供了 NPM+Webpack+Babel 的前端开发工作流和独立的 CSS 样式,值得一试。

地址: https://github.com/at-ui/at-ui

10、Vux

Star 数超过 13K,是一个流行的社区库,基于 WeUI 和 Vue 2.0。该库还支持 webpack+vue-loader+vux 的工作流。它的文档也是中文的。

地址: https://github.com/airyland/vux

11、iView

Star 数将近 16K,提供了数十种用 Vue.js 构建的 UI 组件和小部件,并采用了干净而优雅的设计。iView 被广泛采用,社区也在积极维护,并提供了 CLI 工具用于以可视化的方式创建项目。这个也值得一试。

地址: https://github.com/iview/iview

12、Uiv

Star 数“仅”550 左右,用于 Vue 2 的 Bootstrap 3 组件库。所有组件加起来差不多 20KB,唯一的外部依赖是 Vue 和 Bootstrap CSS,支持基于 Webpack 的工作流。 地址:https://github.com/wxsms/uiv

13、Vuikit

Star 数 1K 左右,一个用于网站界面的响应式的 Vue UI 库,设计风格干净而统一。该库作为由 Yarn 工作区管理的“monorepo”而构建,但图标和主题可作为单独的包发布。

地址: https://github.com/vuikit/vuikit

14、Onsen UI+Vue

基于流行的 Onsen-UI 框架,封装了核心 Web 组件并暴露了 Vue 风格的 API。Onsen UI 组件也被设计为能够主动对 prop 做出反应。

地址: https://onsen.io/v2/guide/vue/

15、Semantic UI+Vue

这个项目基本上是 Semantic-UI 框架与 Vue.js 的集成。该库仍在开发当中,提供了一个类似于 Semantic-UI 的 API 以及一组可定制的主题。

地址: https://semantic-ui-vue.github.io/

16、Fish-UI

Star 数“仅”为 500 左右,贡献者也只有 3 个,但 fish-ui 提供了一个基于 Vue 的 Web 工具包,其中包含整洁干净的组件。该库支持 ES2015+Webpack 工作流。它的文档不是很全,但它的设计不容忽视。

地址: https://github.com/myliang/fish-ui

17、Mint UI

Star 数超过 11K,为 Vue.js 提供 UI 元素,提供了用于构建移动应用程序的 CSS 和 JS 组件。当全部导入时,压缩后的代码只有月 30KB(JS+CSS),当然它也支持单个组件的导入。

地址: https://github.com/ElemeFE/mint-ui/

18、Framework7 Vue

这个集成提供了几乎所有的 Framework7 元素和组件,并集成了 Framework7 Router,按照 Vue 的方式来渲染页面。该库正处于积极的开发和维护当中。 地址:https://framework7.io/vue/

19、Cube UI

Star 数超过 3K,是用于 Vue.js 移动应用程序的 UI 组件库。所有组件都经过了单元测试,并且该库还支持按需进行后期编译和组件导入。这个库仍在积极开发中。

地址: https://github.com/didi/cube-ui

20、Vueblu

Star 数约 1.5K,是基于 Vue 2.0 和 Bulma 的 UI 组件库,用于构建中台和后台办公产品。它支持 ES2015 和 NPM+Webpack+Babel 工作流,并提供可自定义主题。

地址: https://github.com/chenz24/vue-blu

21、Ant Design Vue

Star 数约 1.5K,用于开发具有数十个 Ant Design 实现组件的企业级后端产品,并支持基于 Webpack 调试的构建解决方案(支持 ES6)。请注意,它的开发已经停止了一段时间。

地址: https://github.com/okoala/vue-antd

特别推荐

n3-components :

https://github.com/N3-components/N3-components

vuikit:

https://vuikit.js.org/

Kendu UI Vue

https://www.telerik.com/kendo-vue-ui

Office Fabric-Vue

https://github.com/aidewoode/office-ui-fabric-vue

vuestrap

http://kzima.github.io/vuestrap-base-components/#/

vueboot

http://morgul.github.io/vueboot/

framevuerk

http://framevuerk.com/

Vue WeUI

http://aidenzou.github.io/vue-weui/#!/

Vue-MDC

https://github.com/posva/vue-mdc

重磅发布预告

排名11位的iView是由TalkingData数据可视化团队开源的UI组件库,也是一个充满情怀的开源项目。 在过去的一年里,iView共迭代了27个版本,还在近期发布了针对微信小程序开发的UI组件库——《iView Weapp》。 7.28是iView的两周年生日,iView团队也将在这一天举办发布会,正式发布iView 3.0以及5款与iView相关的神秘产品。点击文末阅读原文,就有机会亲临发布会现场。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/248884.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2019河北省大学生程序设计竞赛(重现赛)B 题 -Icebound and Sequence ( 等比数列求和的快速幂取模)...

题目链接:https://ac.nowcoder.com/acm/contest/903/B 题意: 给你 q,n,p,求 q1q2...qn 的和 模 p。 思路:一开始不会做,后面查了下发现有个等比数列求和的快速幂公式,附上链接https://www.cnblogs.com/yuiffy/p/380917…

nodejs服务后台持续运行

forever.jpeg 我用本地mac连接阿里云服务器,启动nodejs服务,客户端掉线,服务也会终止。如何在客户端掉线的情况下,node服务正常运行? forever介绍 forever是一个nodejs守护进程,完全由命令行操控。forev…

Node.js+Koa开发微信公众号个人笔记(一)准备工作 - ZhangCui - 博客园

本人也是在学习过程中,所以文章只作为学习笔记,如果能帮到你,那就更好啦~当然也难免会有错误,请不吝指出~ 一、准备工作 1、本人学习教程:慕课网Scott老师的《Node.js七天搞定微信公众号》 ,但是有点小贵…

【vue-router①】router-link跳转页面传递参数 - 进击的前端之路(偶尔爬坑java小路) - SegmentFault 思否

在vue项目中,往往会遇到这样的情况,就是要实现在一个循环列表中,点击其中一条跳转到下个页面,然后将这一条的相关数据带到下个页面中显示,这是个循环列表,无论点哪一条都是跳到相同的页面,只是填…

Jmeter-【JSON Extractor】-响应结果中三级key取值

一、请求返回样式 二、取第三个option 三、查看结果 转载于:https://www.cnblogs.com/Nancy-Lee/p/10938758.html

手摸手,带你用vue撸后台 系列一(基础篇) - 掘金

完整项目地址:vue-element-admin 系列文章: 手摸手,带你用 vue 撸后台 系列一(基础篇)手摸手,带你用 vue 撸后台 系列二(登录权限篇)手摸手,带你用 vue 撸后台 系列三 (实战篇)手摸手&#xf…

webpack+vue+mui学习心得

引入mui 1.不需要npm安装; 直接从官方下载丢进来 2.那就是全局引用了; 没错,就是index.html里直接引入,当然也可以main.js引入,随意啦! so easy 3.找到webpack.base.conf.js,在module与plugins之间插入以下代码: 4.这样就可以在项目里面直接用了.然就是mui与vue-router及点…

【ARTS】01_04_左耳听风-20181203~1209

ARTS: Algrothm: leetcode算法题目Review: 阅读并且点评一篇英文技术文章Tip/Techni: 学习一个技术技巧Share: 分享一篇有观点和思考的技术文章Algorithm Single Number https://leetcode.com/problems/single-number/ 1)problem Given a non-empty arra…

vue项目(webpack+mintui),使用hbuilder打包app - 小小人儿大大梦想 - 博客园

一、配置config/index.js 本人没有配置index.js文件,就开始进行了打包,结果最终效果是页面空白,解决了空白,接着底部图标(我是用的阿里巴巴图片)资源找不到。所以配置这步比较重要。 (1&#…

caffe介绍

转载于:https://www.cnblogs.com/Artimis-fightting/p/10945099.html

微服务之consul(一) - 诗码者 - 博客园

一、概述 consul是google开源的一个使用go语言开发的服务发现、配置管理中心服务。内置了服务注册与发现框 架、分布一致性协议实现、健康检查、Key/Value存储、多数据中心方案,不再需要依赖其他工具(比如ZooKeeper等)。服务部署简单&#x…

图解基于 Node.js 实现前后端分离 - CSDN博客

因为会上出了个意外,ppt图片全部丢失,只好对着白板跟大家交流了半个多小时。由于我做演讲不喜欢写太多的文字,没有图片的情况下讲漏了一些内容。这篇文章是我在会上分享内容对照ppt进行地整理。 基本介绍 首先从一个重要的概念“模板”说起…

CF176E Archaeology(set用法提示)

题目大意: 给一棵树,每次激活或熄灭一个点,每次问这些点都联通起来所需的最小总边权 分析: 若根据dfs序给所有点排序,为$v1,v2,v3....vk$,那么答案就是$(dis(v1,v2)dis(v2,v3)...dis(vk-1,vk)dis(vk,v1))/2…

网上整理的对于Rest和Restful api的理解 - 那啥快看 - 博客园

一、什么是Rest? REST不是"rest"这个单词,而是几个单词缩写 -- REpresentational State Transfer 直接翻译:表现层状态转移,但这个翻译正常人根本看不懂,找到的一种最好理解的说法是,URL定位资源&#xff…

企业级rancher搭建Kubernetes(采用rancher管理平台搭建k8s)

一、简介 Rancher简介 来源官方:https://www.cnrancher.com/ Rancher是一个开源的企业级容器管理平台。通过Rancher,企业再也不必自己使用一系列的开源软件去从头搭建容器服务平台。Rancher提供了在生产环境中使用的管理Docker和Kubernetes的全栈化容器部…

[工具]java_sublime的快速使用

目录 使用 : 怎么运行: 调整字体: 使用 : 新建--->写好代码后-->另存为尾缀是.java的文件 怎么运行: 在你另存为的目录下cmd调用控制台输入dos指令--->执行javac 文件名.java(有.java尾缀)(编译为.class文件)--->java 文件名(没有.class尾缀设计者认为执行的是…

基于SOA的银行系统架构

Part-1 【简述】 1.通过引入面向服务架构(SOA),企业服务总线(ESB),适配器(Adapter)及面向构件等技术,尝试打造一个统一业务流程服务平台,实现面向流程的服务…

一次前后端分离的实践

前后端分离该如何做? 这个问题,不同的技术人员,由于所处的岗位不一样,给出的答案都不一样。 前后端分离的问题,不仅仅是技术上的选型问题,还涉及到整个团队在认知、职责、流程上面重新定义的问题,这也是为…

C++解析-外传篇(1):异常处理深度解析

0.目录 1.异常的最终处理 2.结束函数terminate() 3.小结 1.异常的最终处理 问题: 如果在main函数中抛出异常会发生什么? 如果异常不处理,最后会传到哪里? 下面的代码的输出什么? 示例——异常的最终处理?&a…

springboot快速集成swagger

今天技术总监说:小明,我们本次3.0改造,使用swagger2.0作为前后端分离的接口规范,它可以一键生成前后端的API,一劳永逸……小明:??? Spring Boot 框架是目前非常流行的微服务框架&…