vue前端UI框架有哪些?

vue前端UI框架有:Element、iview、vuetify、vue-strap、cube-ui、buefy、vue-beauty、at-ui、Vue-Blu、vue-storefront、Vux、Mint UI、Vant等等。



相关推荐:《vue.js教程》

vue前端UI框架

一:Element

官网地址:http://element-cn.eleme.io/#/zh-CN

介绍:element ui框架的按钮组件,这款由饿了么前端开源的UI框架,一经面世,就收获大量程序员的芳心。在github 上更是高达29.8k的star早已说明一切。用于开发PC端的页面还是绰绰有余的。如果说你是用vue开发者,却没用过element UI,那你肯定不是合格的vue开发者。

二:iview

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

介绍:iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。使用单文件的 Vue 组件化开发模式 基于 npm + webpack + babel 开发,支持 ES2015 高质量、功能丰富 友好的 API ,自由灵活地使用空间,由TalkingData开发维护,有很多知名互联网企业都在使用。

三:vuetify

官网地址:https://vuetifyjs.com/zh-Hans/

介绍:Vuetifyjs 根据材料设计规格提供 UI 布局。 V 1.0 Alpha 版本提供了超过 80个 reusbale 组件,其中包含一个易于记忆的语义设计,它基于名称简单明了 type-as-you 的类型属性。在GitHub 上有超过 7K 的 star。

四:vue-strap

官网地址:http://yuche.github.io/vue-strap/

介绍:基于 Vue.js 的 Bootstrap 组件 该仓库包含一系列基于 Bootstrap 标记和 CSS 的本地 Vue.js 组件。所以不需要 jQuery 和 Bootstrap 的 JavaScript 文件,唯一需要依赖的是: Vue.js Bootstrap CSS ,VueStrap 不依赖某个非常精确的 Bootstrap 版本。如果喜欢bootstrap的小伙伴又不想换jquery的开发方式是不二的选择。

五:cube-ui

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

介绍:cube-ui 是滴滴团队开发的基于 Vue.js 实现的精致移动端组件库。支持按需引入和后编译,轻量灵活;扩展性强,可以方便地基于现有组件实现二次开发。

六:buefy

官网地址:https://buefy.github.io/#/

介绍:Buefy 基于 Bulma 和 Vue.js 的轻量级UI组件,它提供了即装即用的轻量级组件。虽然组件选择有限,但是值得你去尝试。

七:vue-beauty

官网地址: https://fe-driver.github.io/vue-beauty/#/components/button

介绍:基于 ant design 的漂亮的 vue 组件库;vue-beauty 是一套基于 vue.js 和 ant-design样式 的PC端 UI 组件库,旨在帮助开发者提升产品体验和开发效率、降低维护成本。

八:at-ui

官网地址: https://at-ui.github.io/at-ui/#/zh

介绍:AT-UI 是一个模块化的前端 UI 框架,开发基于Vue.js 的快速和强大的 Web 界面。专门为桌面应用程序构建,AT-UI提供了一套 npm + webpack + babel 前端开发工作流程。全英文的文档对用户来说可能是具有有挑战性的,但它提供了一个体面的干净整洁的 UI 组件。

九:Vue-Blu

官网地址: https://chenz24.github.io/vue-blu/#/

介绍:Vue-Blu是基于Vuejs和Bulma开发的开源UI组件库。旨在为PC端的前端开发(特别是中后台产品)提供一个快速且灵活的解决方案。全面、灵活且强大的ui组件,API友好。

十:vue-storefront

官网地址:http://vuestorefront.io/

介绍:Vue.js Storefront - 将 PWA 集成到电子商务的框架,支持离线访问

十一:Vux

官网地址:https://vux.li/

介绍:VUX(读音 [v’ju:z],同 views)是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。

十二:Mint UI

官网地址:http://mint-ui.github.io

介绍:Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。通过它,可以快速构建出风格统一的页面,提升开发效率。

十三:Vant

中文文档:https://youzan.github.io/vant/#/zh-CN/intro

介绍:有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件。

十四:Muse-ui

官网地址:https://muse-ui.org/#/zh-CN

Muse UI 基于 Vue2.0 开发,Vue2.0是当下最快的前端框架之一,小巧,api友好,可用于开发的复杂单页应用。

大家可以从中挑选适合自己项目的框架进行使用

相关推荐:

2020年前端vue面试题大汇总(附答案)

vue教程推荐:2020最新的5个vue.js视频教程精选

已标记关键词 清除标记
<p> <span><span style="color:#337FE5;">【为什么前端都要学习Vue<span style="color:#337FE5;">】</span></span></span> </p> <span> </span> <p style="color:#666666;"> <span style="color:#1A1A1A;">这几年Vue.js成为前端框架中最火的一个。越来越多的网站前端开始采用Vue.js开发。是开源世界华人的骄傲,作者是我国的尤雨溪大神。相对于其他前端框架,<span style="color:#1A1A1A;">Vue 更容易上手!正因为它简单易学,很多前端开发工程师可以很快掌握并且应用到实际开发中。如果说你想用最短的时间来学习一个框架,快速上手项目,Vue是不二之选。</span></span> </p> <p style="color:#666666;"> <span style="color:#1A1A1A;"><span style="color:#1A1A1A;"><br /> </span></span> </p> <p style="color:#666666;"> <span style="color:#337FE5;">【学员收益】</span> </p> <p style="color:#666666;"> <span>1)大部分学员想要学习Vue,但是无奈缺少一个好老师,</span><span>董老师将手把手带领你学习,让你彻底掌握Vue框架。</span> </p> <p style="color:#666666;"> <span>2)课程将会长期维护,<span style="color:#666666;">内容更超值,</span>本课程基于最新的版本进行讲解,并且老师会更新升级</span><span>到3.0稳定版本。</span> </p> <p> <span>3)学完该课程后不仅能学到Vue的设计和开发技能,还能培养市场思维、用户思维、设计思维,并能够利用掌握的技术开发Vue项目,获取额外的收益。<br /> </span><span></span> </p> <p> <span><br /> </span> </p> <p style="color:#666666;"> <span><span style="color:#337FE5;">【课程收获】</span></span> </p> <p> <span><span style="color:#666666;">1、</span>从基础知识到项目实战,内容涵盖Vue各个层面的知识和技巧<br /> <span style="color:#666666;">2、</span>学习曲线平缓,前端新人也可以看得懂<br /> 3、贴近企业项目,按照企业级代码标准和工程开发的流程进行讲解<br /> 4、让你能够独立开发高颜值的项目<br /> </span> </p> <p> <span>5、项目涉及14大功能组件,从基础组件到业务组件,一站式全掌握</span> </p> <p> <span><img src="https://img-bss.csdnimg.cn/202007160700105241.png" alt="" /><br /> </span> </p> <p> <img src="https://img-bss.csdnimg.cn/202007160649295686.png" alt="" /> </p> <p style="color:#666666;"> <span><span style="color:#337FE5;">【项目效果】</span></span> </p> <p> 本课程打造的是高颜值的美团外卖项目。不仅界面美观,而且涉及到了众多页面。多说无益,请大家扫码查看课程效果。<img src="https://img-bss.csdnimg.cn/202007081115567138.png" alt="" /> </p> <p> <img src="https://img-bss.csdnimg.cn/202007161118172782.png" alt="" /> </p> <p> <img src="https://img-bss.csdnimg.cn/202007161118403086.png" alt="" /> </p>
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页