HTML5移动开发UI框架

Mr.Chen大约 9 分钟约 2551 字

Vue.js 生态圈

Element 和 iView 是两个最受欢迎的 UI 组件工具包，专注于左面端 UI 界面的快速开发。
而 MintUI 与 vux 则相反，是移动端最受欢迎的 UI 工具包。
Vuetify 是一款功能最完善的能同时适用于移动端和桌面端的框架，内置了服务端渲染、PWA、CLI 模板支持等诸多特性。
Nuxt 则是一款基于 Vue.js 的更高级的框架，它能让我们流程地开发具备服务器端渲染能力的 Vue.js 应用，而它的通用使我们使用用同样的代码库来构建单页引用，甚至生成静态网站。

1.Element UI（饿了么团队）

官方地址：http://element-cn.eleme.io/#/zh-CN
描述：基于 Vue 2.0 的桌面端组件库
GitHub：https://github.com/ElemeFE/element
组件库：
基础引入：
CDN:

　　　

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

npm：npm i element-ui -S

2 vue-beautify

vue-beauty 是一套基于 vue.js 和 ant-design 样式的 PC 端 UI 组件库，
网址:https://fe-driver.github.io/vue-beauty/#/components/start

3 Ant Design of Vue

基于 Vue 实现，开发和服务于企业级后台产品。
官网:http://tangjinzhou.gitee.io/ant-design/docs/vue/introduce-cn/

4.iView

官网地址：https://www.iviewui.com/
描述：一套基于 Vue.js 的高质量 UI 组件库。iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。
GitHub 地址：https://github.com/iview/iview
基础引入：
CDN：

<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
<!-- import iView -->
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
npm：npm install iview --save

5.Mouse-Ui

中文官网网址:https://muse-ui.org/#/zh-CN
基于 Vue2.0
描述:小巧，api 友好，可用于开发的复杂单页应用

6.WeUI

微信官方为微信 Web 服务量身设计
精而美适合简单公众号开发使用
vue-weui
网址 https://github.com/aidenZou/vue-weui

7.Radon UI

基于 Vue 开发的高质量 UI 组件
基于 npm + webpack + ES6 + postcss 开发
数据驱动，简单易使用网址open in new window

8.N3

官网:https://n3-components.github.io/N3-components/ 中文文档:https://n3-components.github.io/N3-components/component.html 英文文档:https://github.com/N3-components/N3-components

React.js UI 库

1.Ant Design of React

现代浏览器和 IE9 及以上（需要 polyfills）
基于 react 开发和服务于企业级后台产品，适用于 pc 端。
网址 https://ant.design/docs/react/introduce-cn

2 ant design mobile

一个基于 Preact / React / React Native 的 UI 组件库
适合于中大型产品应用
适合于基于 react / preact / react-native 的多终端应用
适合不同 UI 风格的高度定制需求的应用
官网:https://mobile.ant.design/index-cn

3.WeUI

微信官方为微信 Web 服务量身设计
精而美适合简单公众号开发使用
react-weui
网址 https://github.com/weui/react-weui/

Angular.js UI 库

1.Mobile Angular UI 框架

Mobile Angular UI 是使用 bootstrap 3 和 AngularJS 的响应式移动开发 HTML5 框架。官网open in new window

Html5 UI 库

1.jquery mobile 框架

jQuery Mobile 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来 jQuery 核心库，而且会发布一个完整统一的 jQuery 移动 UI 框架。支持全球主流的移动平台。

2.bootstrap 框架

官网open in new window 实例open in new window

3.ionic 框架

Ionic 是一个强大的 HTML5 应用程序开发框架，可以帮助您使用 Web 技术，比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。Ionic 主要关注外观和体验，以及和你的应用程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。

官网open in new window

4.mui 框架

最接近原生 APP 体验的高性能前端框架，具有以下特点：轻量　　追求性能体验，是我们开始启动 MUI 项目的首要目标，轻量必然是重要特征; 　　 MUI 不依赖任何第三方 JS 库，压缩后的 JS 和 CSS 文件仅有 100+K 和 60+K HBuilder 团队 githubopen in new window 官网open in new window

5.H-ui

官方地址：http://www.h-ui.net/
描述：轻量级前端框架，简单免费，兼容性好，服务中国网站。基于 jQuery
GitHub 地址：https://github.com/jackying/h-ui
组件库：
观点：无亮点,借鉴第三方插件完成

6.layui

官方地址：http://www.layui.com/
描述：更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。
layui 兼容人类正在使用的全部浏览器（IE6/7 除外），可作为 PC 端后台系统与前台界面的速成开发方案。经典模块化前端框架
组件库：
- GitHub：https://github.com/sentsin/layui/
- 基础引入：layui.css layui.js

7.uiKit（YOOtheme 团队）

官网地址：http://www.getuikit.net/
描述：一款轻量级、模块化的前端框架，可快速构建强大的 web 前端界面。
UIkit 兼容 IE9 以上现代浏览器。在 IE8 及其以下版本中，所有 JavaScript 都会失效。依赖 jQuery
组件库：
- GitHub 地址：https://github.com/uikit/uikit
- 基础引入：

　　　　//CDN:
<link rel="stylesheet" href="//cdn.bootcss.com/uikit/2.25.0/css/uikit.css" />
<script src="//cdn.bootcss.com/uikit/2.25.0/js/uikit.js"></script>

8.jQuery UI

官方网址：http://jqueryui.com/
组件库：其他基于 jQuery 衍生出来的模板：
BUI：基于 jQuery+KISSY UI:http://www.builive.com/ 　　　　 EasyUI:：http://www.jeasyui.net/
描述：使用 easyui 你不需要写很多代码，你只需要通过编写一些简单 HTML 标记，就可以定义用户界面。
DWZ JUI:http://jui.org/

9.WeUI

微信官方为微信 Web 服务量身设计
精而美适合简单公众号开发使用
网址:https://weui.io

安卓 IOS 原生

1.Intel XDK 框架

基于 web 的编程工具，可帮助开发者为 Android 和 iOS 开发移动应用。这款免费的软件名为 Intel XDK，实际上这是今年 2 月份 Intel 收购的 AppMobi 软件的重新包装后的版本，所以并非新鲜事物。开发者可用此软件开发基于 HTML5 的应用，并用于移动设备中。

2.Appcelerator Titanium 框架

Titanium 是一个跟手机平台无关的开发框架，用来开发具有本地应用效果的 Web 应用。当前主要支持 iPhone 和 Android 手机。

3.PhoneGap 框架

跨平台开发工具，从 iOS、Android、BB10、Windows Phone 到 Amazon Fire OS、Tizen 等，各大主流移动平台一应俱全，还能让开发者充分利用地理位置、加速器、联系人、声音等手机核心功能。业界很多主流的移动开发框架均源于 PhoneGap。较著名的有 Worklight、appMobi、WeX5 等。其中 WeX5 为国内打造，完全 Apache 开源，在融合 Phonegap 的基础上，做了深度优化，具备接近 Native app 的性能，同时开发便捷性也较好。

App 框架

1.react-native

描述：React Native 使你能够在 Javascript 和 React 的基础上获得完全一致的开发体验，构建世界一流的原生 APP。

React Native 着力于提高多平台开发的开发效率 —— 仅需学习一次，编写任何平台。(Learn once, write anywhere)

GitHub 地址：https://github.com/facebook/react-native

2.weex

描述：Weex 提供强大的跨平台能力，可以使用相同的 API 开发 Web，Android 和 iOS 应用。

同时，我们对接口了丰富的扩展能力。

3.vux

中文官网网址:https://doc.vux.li/zh-CN/
基于 Vue2.0
描述:移动端 UI 组件库，主要服务于微信页面。

4.design-rn

Ant Design Mobile RN of React
适合于中大型产品应用
适合于基于 react / preact / react-native 的多终端应用
适合不同 UI 风格的高度定制需求的应用官网地址open in new window

混合开发 UI 框架

1.ionic

中文官网网址：http://www.ionic-china.com/
基于 angular
描述：ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework)。

ionic 主要关注外观和体验，以及和你的应用程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。 ionic 是一个轻量的手机 UI 库，具有速度快，界面现代化、美观等特点。

2.OnsenUI

官网地址：https://onsen.io/
描述：用来构建混合移动端 APP 的 HTML5 UI 框架
GitHub 地址：https://github.com/OnsenUI/OnsenUI

3.Sencha Touch 框架

Sencha Touch 框架是世界上第一个基于 HTML5 的 Mobile App 框架。Sencha Touch 可以让你的 Web App 看起来像 Native App。美丽的用户界面组件和丰富的数据管理，全部基于最新的 HTML5 和 CSS3 的 WEB 标准，全面兼容 Android 和 Apple iOS 设备。提供了丰富的 WEB UI 组件，可以快速的开发出运行于移动终端的应用程序。官网open in new window

4.Framework7(阿里巴巴)

Framework7 并不能兼容所有的设备。她只专注于为 iOS 和 Google Material 设计提供最好的体验。
如果你想开发 iOS 或者 Android 混合应用（Phonegap）或者你想开发 iOS 和 Google Material 风格的 WEB APP，那么 Framework7 将会是你的首选。阿里巴巴旗下 http://framework7.taobao.org/ http://framework7.io/ Framework7 Vueopen in new window

5.SUI mobile（淘宝）

SUI Mobile 是一套基于 Framework7 开发的 UI 库。它非常轻量、精美，只需要引入我们的 CDN 文件就可以使用，并且能兼容到 iOS 6.0+ 和 Android 4.0+，非常适合开发跨平台 Web App。
描述：一套基于 bootstrap 开发的前端组件库，同时她也是一套设计规范。基于 jquery
组件库：
GitHub：https://github.com/sdc-alibaba/sui
基础引入：

　　　　//CDN:

<link href="http://g.alicdn.com/sj/dpl/1.5.1/css/sui.min.css" rel="stylesheet">
<script type="text/javascript" src="http://g.alicdn.com/sj/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="http://g.alicdn.com/sj/dpl/1.5.1/js/sui.min.js"></script>

观点：偏向设计规范，组件库相对简单。

6.Frozen UI

专注于移动 web 的 UI 框架，基于腾讯手机 QQ 规范。目前 QQ 会员前端开发组所用的通用样式库有很多酷炫好玩的案例秀 http://frozenui.github.io/

7.Amaze UI Touch

http://t.amazeui.org/#/?_k=mxysvs Amaze UI Touch 专为移动打造，在技术实现、交互设计上只考虑主流移动设备，保证代码轻、性能高。跨屏前端框架 http://amazeui.org/

8.GMU

GMU 是基于 zepto 的 mobile UI 组件库，提供 webapp、pad 端简单易用的 UI 组件! 百度团队出品。但是好久没更新了 http://cloudajs.org/ 推荐手机 H5 应用快速开发 UI 库

Framework7、 Amaze UI 强大
SUI、MUI、WeUI、Frozen UI 简单实用 PC 端 UI 框架

HTML5移动开发UI框架

# Vue.js 生态圈

# 1.Element UI（饿了么团队）

# 2 vue-beautify

# 3 Ant Design of Vue

# 4.iView

# 5.Mouse-Ui

# 6.WeUI

# 7.Radon UI

# 8.N3

# React.js UI 库

# 1.Ant Design of React

# 2 ant design mobile

# 3.WeUI

# Angular.js UI 库

# 1.Mobile Angular UI 框架

# Html5 UI 库

# 1.jquery mobile 框架

# 2.bootstrap 框架

# 3.ionic 框架

# 4.mui 框架

# 5.H-ui

# 6.layui

# 7.uiKit（YOOtheme 团队）

# 8.jQuery UI

# 9.WeUI

# 安卓 IOS 原生

# 1.Intel XDK 框架

# 2.Appcelerator Titanium 框架

# 3.PhoneGap 框架

# App 框架

# 1.react-native

# 2.weex

# 3.vux

# 4.design-rn

# 混合开发 UI 框架

# 1.ionic

# 2.OnsenUI

# 3.Sencha Touch 框架

# 4.Framework7(阿里巴巴)

# 5.SUI mobile（淘宝）

# 6.Frozen UI

# 7.Amaze UI Touch

# 8.GMU