Vue大神路(三):超实用的前端UI框架

常用

• Ant－Design：阿里巴巴出品，基于React的UI框架
• ElementUI,iview,ice:饿了么出品,基于Vue的UI框架
• Bootstrap:Twitter推出的一个用于前端开发的开源工具包
• AmazeUI:又叫"妹子UI",一款HTML5跨屏前端框架
• Layui:轻量级框架(Layer)

iview

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

• [官网地址] https://www.iviewui.com/
• [Github] https://github.com/TalkingData/iview-weapp
• [iview-admin] https://github.com/iview/iview-admin

备注:属于前端主流框架,选型时可考虑使用,主要特点时移动端支持较多

ElementUI

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

• [官网地址] http://element-cn.eleme.io/#/zh-CN
• [Github] https://github.com/ElementUI/element-starter
• [vue-element-admin] https://github.com/PanJiaChen/vue-element-admin

备注：属于前端主流框架，选型时可考虑使用，主要特点是桌面端支持较多

ICE

飞冰是阿里巴巴团队基于 React/Angular/Vue 的中后台应用解决方案，在阿里巴巴内部，已经有 270 多个来自几乎所有 BU 的项目在使用。飞冰包含了一条从设计端到开发端的完整链路，帮助用户快速搭建属于自己的中后台应用。

• [官网地址] https://alibaba.github.io/ice
• [Github] https://github.com/alibaba/ice

备注：主要组件还是以 React 为主，截止 2019 年 02 月 17 日更新博客前对 Vue 的支持还不太完善，目前尚处于观望阶段

VantUI

Vant UI 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。

• [官网地址] https://youzan.github.io/vant/#/zh-CN/intro
• [Github] https://github.com/y

AtUI

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

• [官网地址] https://at-ui.github.io/at-ui/#/zh
• [Github] https://github.com/at-ui/at-ui

CubeUI

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

• [官网地址] https://didi.github.io/cube-ui/#/zh-CN
• [Github] https://github.com/didi/cube-ui/

Flutter

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

• [官网地址] https://flutter.dev/docs
• [Github] https://github.com/flutter/flutter

备注：Google 出品，主要特点是快速构建原生 APP 应用程序，如做混合应用该框架为必选框架

Ionic

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

• [官网地址] https://ionicframework.com/
• [官网文档] https://ionicframework.com/docs/
• [Github] https://github.com/ionic-team/ionic

mpvue

mpvue 是美团开发的一个使用 Vue.js 开发小程序的前端框架，目前支持 微信小程序、百度智能小程序，头条小程序 和 支付宝小程序。 框架基于 Vue.js，修改了的运行时框架 runtime 和代码编译器compiler 实现，使其可运行在小程序环境中，从而为小程序开发引入了 Vue.js 开发体验。

• [官网地址] http://mpvue.com/
• [Github] https://github.com/Meituan-Dianping/mpvue

备注：完备的 Vue 开发体验，并且支持多平台的小程序开发，推荐使用

WeUI

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

• [官网地址] https://weui.io/
• [Github] https://github.com/weui/weui.git

SemanticUI

Semantic UI—完全语义化的前端界面响应式开发框架，跟 Bootstrap 和 Foundation 比起来，还是有些不同的，在功能特性上、布局设计上、用户体验上均存在很多差异。

• [官网地址] https://semantic-ui.com/
• [Github] https://github.com/semantic-org/semantic-ui

Semantic UI 特点：

• 文档和演示非常完善
• 易于学习和使用
• 配备网格布局
• 支持 Sass 和 LESS 动态样式语言
• 有一些非常实用的附加配置，例如inverted类。
• 对于社区贡献来说是比较开放的。
• 有一个非常好的按钮实现，情态动词，和进度条。
• 在许多功能上使用图标字体。

Semantic UI 对浏览器的支持：

• Last 2 Versions FF, Chrome, IE (aka 10+)
• Safari 6
• IE 9+ (Browser prefix only)
• Android 4
• Blackberry 10

MUI

最接近原生APP体验的高性能前端框架

• [官网地址] https://dev.dcloud.net.cn/mui/
• [Github地址] https://github.com/dcloudio/mui