2018年九个很受欢迎的vue前端UI框架

最近在逛各大网站,论坛,SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,小编自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己的公司项目。

学习的过程之中发现继最热的 React 组件库和 Angular 组件库之后,这里有很多个流行和实用的 Vue.js 组件库完善你的下一个用 Vue.JS 编写 UI 界面的应用程序。Vue.js是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。

 

一: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是基于VuejsBulma开发的开源UI组件库。旨在为PC端的前端开发(特别是中后台产品)提供一个快速且灵活的解决方案。全面、灵活且强大的ui组件,API友好。

  • 关注「编程微刊」公众号 ,在微信后台回复「领取资源」,获取IT资源300G干货大全。

 

<div style="color:#444444;"> 适用人群 <p style="color:#666666;"> 所有的IT从业者,尤其适合快速掌握新技术,快速增长工作经验人群,对教育公平,教育公益,教育爱心公益人士 </p> </div> <p> </p> 课程概述 <p> 该互联网实战项目是基于 Spring Boot 2+ SpringSecurity5+Element UI+Vue Admin Template+蚂蚁可视化AntV 等技术栈开发的项目,采用分布式,多模块,前后端分离开发。包括图形展示、权限管理、用户管理等功能。<br /> 【后端技术】<br /> 技术 说明<br /> Spring Boot2 MVC框架 开发的一站式解决方案<br /> Spring Security5  认证和授权框架<br /> MyBatisPlus3.3.1  基于 MyBatis 框架的快速研发框架<br /> MyBatisCode工具 生成 MyBatis 相关代码<br /> Jackson 提供了处理 JSON 数据的工具<br /> Lombok 简化对象封装工具 <br /> Druid   数据库连接池 <br /> 【前端技术】<br /> Vue        互联网最火的前端框架<br /> Vue Router 路由框架<br /> Vuex 全局状态管理框架<br /> Axios 前端 HTTP 框架<br /> Element UI 前端 UI 框架<br /> Vue Element Admin 前端模板<br /> Antv  蚂蚁金服可视化技术,阿里巴巴可视化技术,天猫,淘宝,支付宝,花呗均使用AntV<br /> 【开发工具】<br /> IntelliJ IDEA 开发 IDE<br /> SQLyog 数据库连接客户端<br /> Postman HTTP 请求工具<br /> 【开发环境】<br /> 工具 版本<br /> JDK 1.8 </p> <p> MySQL 5.7 </p> <p> <img src="https://img-bss.csdn.net/202004100922276928.png" alt="" /><img src="https://img-bss.csdn.net/202004100922434479.png" alt="" /><img src="https://img-bss.csdn.net/202004100922566924.png" alt="" /><img src="https://img-bss.csdn.net/202004100923062693.png" alt="" /></p> <p> <br /></p> <p> <br /></p>
相关推荐
<p style="font-size:16px;"> <span style="color:#333333;">此课程为第一课,学完第一课可以继续学习第二节课的内容</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">对要完成的案例的分析</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">通过脚手架创建Vue框架项目以及模块的划分</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">搭建python语言的Django框架的项目为前端传递所需要的数据</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">创建好首页,商品模块,购物车模块,订单模块,个人中心模块</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">创建各个模块的路由,让各个模块可以正常的运行起来</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">开发首页模块,导入触摸滑动的组件</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">开发商品分类模块,通过axios组件进行前后端的数据通信</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">首页导入触摸滑块插件</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">python端书写要返回前端的商品分类的数据</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">axios通过get请求从后端获取数据</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">通过axios把商品分类的数据从后端获取,并且渲染</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">书写python端返回前端数据的业务代码</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">商品列表部分的数据从后端获取再渲染</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">布局商品列表的组件以及购物车的组件</span> </p> <p style="font-size:16px;"> <span style="color:#333333;"><br /> </span> </p> <p style="font-size:16px;"> <span style="color:#333333;"><br /> </span> </p> <p style="font-size:16px;"> <br /> </p>
<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 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值