Vue进阶(幺肆柒):前端UI框架介绍

Vue2 专栏收录该内容
197 篇文章 171 订阅


前言

在前端WebMobile APP 项目开发过程中,总是会引入一些UI框架,很多大公司都有自己的一套UI框架,下面就是最近经常使用并且很流行的UI框架。

一、 ElementUI

在这里插入图片描述

Element是饿了么前端开源维护的Vue UI组件库,组件齐全,基本涵盖后台所需的所有组件,文档讲解详细,示例丰富。 主要用于开发PC端的页面,是一个质量比较高的Vue UI组件库。

官网地址

Github

二、iView UI

在这里插入图片描述

iview ui是一个强大的基于vue的ui库,有很多实用的基础组件,比elementui的组件更丰富,主要服务于 PC 界面的中后台产品。使用单文件的 Vue 组件化开发模式,基于 npm + webpack + babel 开发,支持 ES2015 高质量、功能丰富、友好的 API ,自由灵活地使用空间。

官网地址

Github

三、Ant-design-vue

在这里插入图片描述
ant-design-vue是蚂蚁金服集团使用 Vue 实现的遵循 Ant Design 设计规范的高质量 UI 组件库,用于开发和服务于企业级中后台产品。

  • 提炼自企业级中后台产品的交互语言和视觉风格。
  • 开箱即用的高质量 Vue 组件。
  • 共享Ant Design of React设计工具体系。

官网地址

Github

四、at-ui

在这里插入图片描述

at-ui 是一款阿里团队创建的基于 Vue 2.x 的前端 UI 组件库,主要用于快速开发 PC 网站产品。 它提供了一套 npm + webpack + babel 前端开发工作流程,CSS 样式独立,即使采用不同的框架实现都能保持统一的 UI 风格。

官网

Github

五、Mint UI

在这里插入图片描述

Mint UI是 饿了么团队开发基于vue.js的移动端UI框架,它包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。

官网

Github

六、WeUI

在这里插入图片描述

WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。

官网地址

Github

七、cube-ui

在这里插入图片描述

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

官网地址

Github

八、amaze UI

在这里插入图片描述

Amaze UI 是一个移动优先的跨屏前端框架。提供基础样式,网格,表格、表单、按钮及常用组件样式。是一个轻量级(所有 CSS 和 JS gzip 后 100 kB 左右)、 Mobile first 的前端框架。

官网地址

Github

九、Flutter

在这里插入图片描述

Flutter 是谷歌的移动端 UI 框架,可在极短的时间内构建 Android 和 iOS 上高质量的原生级应用。 Flutter 可与现有代码一起工作, 它被世界各地的开发者和组织使用, 并且 Flutter 是免费和开源的.

官网

Github

十、ionic

Ionic既是一个CSS框架也是一个Javascript UI库,Ionic 是一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用。它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选择。

官网

十一、Vant UI

在这里插入图片描述
Vant 是有赞前端团队开源的移动端组件库,于 2017 年开源,已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务,对外服务十多万开发者,是业界主流的移动端组件库之一。

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本。

其定位于轻量、可靠的移动端 Vue 组件库,采用 MIT 开源协议, 目前github star 数9k+,是有赞的一套开源组件库。通过 Vant,可以快速搭建出风格统一的页面,提升开发效率。目前已有近 60+ 个组件,这些组件被广泛使用于有赞的各个移动端业务中。

  • 1
    点赞
  • 2
    评论
  • 5
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值