2020年流行的vue的ui框架

亦凉 2023-02-13 11:38 103阅读 0赞

在做vue项目开发的时候遇到了一个问题，如何选择自己的技术栈？随着vue的开发者越来越多，各种框架也渐渐多起来，面对众多的框架，如何选择一款适合自己业务的框架，还是一件比较纠结的事情，今天总结了一下2020年GitHub上面比较受欢迎，star较高的几个UI框架。

1：饿了么ElementUI

推荐指数：star:45.2k  
适用：PC端

官网地址：[http://element-cn.eleme.io/\#/zh-CN][http_element-cn.eleme.io_zh-CN]  
GitHub地址：[https://github.com/ElemeFE/element][https_github.com_ElemeFE_element]

介绍：  
element-ui中规中矩，上手挺快，大多数vue开发应该都是选择element,因为社区做的比较完整，不懂的可以在网上找到很多解答，PC端开发，请选择ElementUI，是真的好用！各种组件功能考虑的很周到且便于扩展。最重要的一点，引入方便！可以快速成型，对后端工程师比较友好。

![format_png][]

2：vuetify

推荐指数：star:25.4k  
适用：移动PC多端支持

GitHub地址：[https://github.com/vuetifyjs/vuetify][https_github.com_vuetifyjs_vuetify]  
官网地址：[https://vuetifyjs.com/zh-Hans/][https_vuetifyjs.com_zh-Hans]

Vuetify确实是一款非常精致的UI框架，它提供了很多常用的组件，依靠Material Design的设计优势，让你无需编写一行css代码就可以得到非常美观的界面功能。响应式做的不错，移动PC多端支持，配置灵活，组件也挺多的，足够现代，功能全面vuetify，一直用一直爽，强烈推荐vuetify。

![format_png 1][]

3：iView

推荐指数：star:23.2k  
适用：PC 界面的中后台产品。

官网地址：[http://v1.iviewui.com/][http_v1.iviewui.com]  
GitHub地址：[https://github.com/iview/iview][https_github.com_iview_iview]

描述：iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。功能丰富，友好的 API ，自由灵活地使用空间细致、漂亮的 UI，最主要的是文档特别详细，强烈安利哟~

![format_png 2][]

4：vux

推荐指数：star:17k  
适用：移动端  
官网地址：[https://vux.li/][https_vux.li]  
GitHub地址：[https://github.com/airyland/vux][https_github.com_airyland_vux]

介绍：VUX 是基于 WeUI 和 Vue.js 的 移动端 UI 组件库,提供丰富的组件满足移动端(微信)页面常用业务需求。

![format_png 3][]

图片.png

5：mintui

星星指数：star:15.7k  
适用：移动端

官网地址：[http://mint-ui.github.io/\#!/zh-cn][http_mint-ui.github.io_zh-cn]  
GitHub地址：[https://github.com/ElemeFE/mint-ui][https_github.com_ElemeFE_mint-ui]

mintui两三年没更新了。个人感觉还是不用吧，因为星星有15.7k，就先记录一下

![format_png 4][]

6:有赞vant

推荐指数：star:13.7k  
适用：移动端

网站地址:[https://youzan.github.io/vant][https_youzan.github.io_vant]  
GitHub地址：:[https://github.com/youzan/vant][https_github.com_youzan_vant]

Vant 是有赞开源的一套基于 Vue 2.0 的 Mobile 组件库。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。目前已有近 50 个组件，这些组件被广泛使用于有赞的各个移动端业务中。 Vant 旨在更快、更简单地开发基于 Vue 的美观易用的移动站点。

![format_png 5][]

7： ant-design-vue

推荐指数：star:10.3k  
适用：PC端

文档地址：[https://antdv.com/docs/vue/getting-started-cn/][https_antdv.com_docs_vue_getting-started-cn]  
GitHub地址：[https://github.com/vueComponent/ant-design-vue][https_github.com_vueComponent_ant-design-vue]  
介绍：  
一个网友维护的ant design vue版本， 致力于提供给程序员愉悦的开发体验。

![format_png 6][]

8：滴滴cube-ui

推荐指数：star:8k  
适用：移动端  
网站地址:[https://didi.github.io/cube-ui/][https_didi.github.io_cube-ui]  
GitHub:[https://github.com/didi/cube-ui][https_github.com_didi_cube-ui]  
介绍：基于 Vue.js 实现的精致移动端组件库

![format_png 7][]

以上仅代表个人观点，还有没总结到的vue的UI框架框架，大家可以在评论区留言补充哦。

![format_png 8][]

[http_element-cn.eleme.io_zh-CN]: https://links.jianshu.com/go?to=http%3A%2F%2Felement-cn.eleme.io%2F%23%2Fzh-CN
[https_github.com_ElemeFE_element]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FElemeFE%2Felement
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTUyYWRhNDEyYzcwNGYwMjkucG5n?x-oss-process=image/format,png
[https_github.com_vuetifyjs_vuetify]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fvuetifyjs%2Fvuetify
[https_vuetifyjs.com_zh-Hans]: https://links.jianshu.com/go?to=https%3A%2F%2Fvuetifyjs.com%2Fzh-Hans%2F
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTNlMDkwMGE5MmNlNjI2M2EucG5n?x-oss-process=image/format,png
[http_v1.iviewui.com]: https://links.jianshu.com/go?to=http%3A%2F%2Fv1.iviewui.com%2F
[https_github.com_iview_iview]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fiview%2Fiview
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTdlM2RjZWMwMjJhYzQ4NTYucG5n?x-oss-process=image/format,png
[https_vux.li]: https://links.jianshu.com/go?to=https%3A%2F%2Fvux.li%2F
[https_github.com_airyland_vux]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fairyland%2Fvux
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LWM3NzFjY2FlOGMyMDBlOGYucG5n?x-oss-process=image/format,png
[http_mint-ui.github.io_zh-cn]: https://links.jianshu.com/go?to=http%3A%2F%2Fmint-ui.github.io%2F%23%21%2Fzh-cn
[https_github.com_ElemeFE_mint-ui]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FElemeFE%2Fmint-ui
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTlmZDI3NjI0NjU1NWM1MDkucG5n?x-oss-process=image/format,png
[https_youzan.github.io_vant]: https://links.jianshu.com/go?to=https%3A%2F%2Fyouzan.github.io%2Fvant
[https_github.com_youzan_vant]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fyouzan%2Fvant
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTNmODMxMTZmZGJmNjkwMzcucG5n?x-oss-process=image/format,png
[https_antdv.com_docs_vue_getting-started-cn]: https://links.jianshu.com/go?to=https%3A%2F%2Fantdv.com%2Fdocs%2Fvue%2Fgetting-started-cn%2F
[https_github.com_vueComponent_ant-design-vue]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FvueComponent%2Fant-design-vue
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTUxZmFmMmE0ZjFkNTIzNDQucG5n?x-oss-process=image/format,png
[https_didi.github.io_cube-ui]: https://links.jianshu.com/go?to=https%3A%2F%2Fdidi.github.io%2Fcube-ui%2F
[https_github.com_didi_cube-ui]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fdidi%2Fcube-ui
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTljZWNkMWU5YjU0MmYzYmYucG5n?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTA2NTQzZTJmYzgwMTA5Y2QucG5n?x-oss-process=image/format,png