京ICP证号 京ICP备号-3京公网安备 00号
北京第二十六维信息技术有限公司（至顶网） 版权所有。|
违法和不良信息举报电话：010-0　举报邮箱:Angular UI 组件
ngx-bootstrap
是一套Bootstrap 组件
官网：https://valor-software.com/ngx-bootstrap/#/
github: https://github.com/valor-software/ngx-bootstrap
NG-bootstrap
bootstrap4组件
官网：https://ng-bootstrap.github.io/#/home
0.5，0.6两个版本分别支持angular4.x和5.x
https://ng.ant.design/#/docs/angular/introduce，
https://cipchk.github.io/ng-alain/#/dashboard/v1
github: https://github.com/cipchk/ng-alain
http://akveo.com/ngx-admin/#/pages/dashboard
一个丰富的组件库，并且有不同的主题可供选择
https://www.primefaces.org/primeng/#/setup
https://www.primefaces.org/serenity/
Vue组建库：
https://www.iviewui.com/docs/guide/introduce
iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。
ElementUI （ 饿了么团队）：
http://element-cn.eleme.io/#/zh-CN/component/quickstart
提供Vue, Angular, React不同版本，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
https://element-angular.faas.ele.me/guide/install
https://eleme.github.io/element-react/#/zh-CN/quick-start
Mint UI （饿了么团队）
中文官网：
描述：基于 Vue.js 的移动端组件库，可按需加载组件
Cube-ui (滴滴内部组件库)
中文官网：https://didi.github.io/cube-ui/#/zh-CN/docs/introduction
描述：cube-ui 是基于 Vue.js 实现的精致移动端组件库。
Vue-ydui ( 的一个Vue2.x实现版本，专为移动端打造)
http://vue.ydui.org/
一只基于的移动端&微信UI。 -YDUI Touch
React组件：
Zent ( \'zent\ ) 是有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件
https://www.youzanyun.com/zanui/zent/zh/guides/install
移动端框架
SUI Mobile（阿里巴巴共享业务事业部UED团队）
官网：描述：一套基于 Framework7 开发的UI库。基于IOS风格。它非常轻量、精美，只需要引入我们的CDN文件就可以使用，并且能兼容到 iOS 6.0+ 和 Android 4.0+，非常适合开发跨平台Web App。基于zeptoIOS风格
基础引入：　　　　CDN:
&link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css"&
&script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'&&/script&
&script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'&&/script&
&Weui（微信官方设计团队）
描述：WeUI 为微信 Web 服务量身设计,是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。GitHub地址：
预览：　　UI组件：
&&&&& JS组件：
基础引入：　　　　CDN：
&link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"&
&script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.1.3/weui.min.js"&&/script&
npm：　　　　　　npm install --save weui
YDUI Touch
官网：描述：一只注重审美，且性能高效的移动端&微信UI。专属于移动，采用 Flex 布局，用 rem 来做响应式开发，自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。基于jQuery 2.0+兼容性：　　兼容绝大多数移动端设备（兼容Android4.0+、IOS6.0+）；　　采用 flexbox 布局，因低版本安卓及部分特殊浏览器不兼容flex-basis、flex-wrap、inline-flex属性，YDUI 将采取其他解决方案；基础引入：　　download：　　　　　　引入YDUI样式：ydui.css　　　　　　引入YDUI自适应解决方案类库：ydui.flexible.js　　　　　　引入jQuery2.0+　　　　　　引入YDUI脚本：ydui.js
GitHub地址：
GMU（百度GMU小组开发）
http://cloudajs.org/ui/brand/gmu
描述：基于zepto的轻量级mobile UI组件库，符合jquery ui使用规范，提供webapp、pad端简单易用的UI组件。兼容iOS3+ / android2.1+，支持国内主流移动端浏览器，如safari, chrome, UC, qq等。GitHub地址：
基础引入：　　　　download　　　　　　引入reset.css：https://github.com/fex-team/GMU/blob/master/dist/reset.css　　　　　　引入gmu.css：https://github.com/fex-team/GMU/blob/master/dist/gmu.css　　　　　　引入zepto.js：https://github.com/fex-team/GMU/blob/master/dist/zepto.js　　　　　　引入gmu.js：https://github.com/fex-team/GMU/blob/master/dist/gmu.js
FrozenUI（QQVIP&FD团队o Alloyteam团队）
官方地址：　　描述：FrozenJS 是针对移动端开发的 js 组件库，其依赖 zepto.js 和 FrozenUI。简单易用，轻量快捷，为移动端服务的前端框架。基于手Q样式规范。应用在腾讯手Q增值业务。兼容android 2.3 +，ios 4.0 + 。　　GitHub地址：
Foundation
中文官网：描述：Foundation是国外最流行的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。GitHub地址：
基础引入：　　　　　　CDN:
&link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" integrity="sha256-itWEYdFWzZPBG78bJOOiQIn06QCgN/F0wMDcC4nOhxY=" crossorigin="anonymous" /&
&script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js" integrity="sha256-Nd2xznOkrE9HkrAMi4xWy/hXkQraXioBg9iYsBrcFrs=" crossorigin="anonymous"&&/script&
　　官方地址：　　描述：中国首个开源 HTML5 跨屏前端框架。Amaze UI 关注中文排版，根据用户代理调整字体，实现更好的中文排版效果。
&&&&&& Amaze UI 以移动优先（Mobile first）为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。　　基于jQuery　　GitHub：
Amaze UI Web 与 Amaze UI Touch
& Amaze UI Web
移动优先、响应式、跨屏 UI 组件库
专属移动（手机）端的 UI 组件库
CSS 预处理
基于 float，12 列响应式
基于 flexbox，6 列流式
兼容主流桌面、移动浏览器（WebView）
有限支持 IE8
完整支持实现 的浏览器（WebView），如 Android 4.4+、IE Mobile 11+、iOS 7.1+
Grid 和 NavBar 对按 09 版 flexbox 实现的浏览器（WebView）支持有待进一步测试
Amaze UI React- 共用 CSS，使用 React 实现交互
响应式或移动网站
熟悉 jQuery
兼容性要求较广
更适合后端渲染架构
针对手机端开发
能够驾驭 React 及相关配套技术
浏览器（WebView）支持 flexbox，如 iOS、腾讯 TBS 2.0 内核的微信 WebView
可用于 SPA 架构
基础引入：　　　　CDN:
http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.css
http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.min.css
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.js
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.min.js
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.ie8polyfill.js
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.ie8polyfill.min.js
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.widgets.helper.js
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.widgets.helper.min.js
　　中文官网：　　描述：纯CSS　　美国雅虎公司出品的一组轻量级、响应式纯css模块，适用于任何Web项目。　　GitHub：
基础引入：　　　　CDN:
&link rel="stylesheet" href="https://unpkg.com/purecss@0.6.1/build/pure-min.css" integrity="sha384-CCTZv2q9I9m3UOxRLaJneXrrqKwUNOzZ6NGEUMwHtShDJ+nCoiXJCAgi05KfkLGY" crossorigin="anonymous"&
PC 端 UI框架
SUI（阿里巴巴国际UED团队-商家业务事业部）
　　官网地址：　　描述：一套基于bootstrap开发的前端组件库，同时她也是一套设计规范。　　基于jquery
基础引入：　　　　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&
　　官方地址：　　描述：轻量级前端框架，简单免费，兼容性好，服务中国网站。　　基于jQuery　　GitHub地址：
官方地址：描述：更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。　　layui 兼容人类正在使用的全部浏览器（IE6/7除外），可作为 PC 端后台系统与前台界面的速成开发方案。经典模块化前端框架
基础引入：　　　　layui.css　　　　layui.js
uiKit（YOOtheme 团队）
官网地址：描述：一款轻量级、模块化的前端框架，可快速构建强大的web前端界面。UIkit 兼容 IE9 以上现代浏览器。在 IE8 及其以下版本中，所有JavaScript 都会失效。　　依赖jQuery
GitHub地址：
基础引入：　　　　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&
　　中文官网：　　描述：简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
基础引入：　　　　CDN：
&!-- 最新版本的 Bootstrap 核心 CSS 文件 --&
&link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&
&!-- 可选的 Bootstrap 主题文件（一般不用引入） --&
&link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"&
&!-- 最新的 Bootstrap 核心 JavaScript 文件 --&
&script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&&/script&
npm:　　　　　　npm install bootstrap@3　　其他基于bootstrap衍生出来的模块：　　　　Ace Admin后台管理系统模板：基于bootstrap3；　　　　Metronic后台管理模板：　　　　H+:　　　　jQuery UI+Bootstrap：
　　官方网址：
其他基于jQuery衍生出来的模板：　　　　BUI：基于jQuery+KISSY UI:　　　　EasyUI:：　　　　　　描述：使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。　　　　DWZ JUI:
混合开发 UI框架
　　官网地址：　　描述：用来构建混合移动端APP的 HTML5 UI 框架,提供AngularJS 1, Angular 2+, React, Vue各种版本　　GitHub地址：
　　中文官网网址：
　　基于AngularJS　　描述：ionic是一个强大的 HTML5应用程序开发框架(HTML5 Hybrid Mobile App Framework)。ionic 主要关注外观和体验，以及和你的应用程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。ionic是一个轻量的手机UI库，具有速度快，界面现代化、美观等特点。
Framework7
　　官网地址：　　描述：Framework7 是一个开源免费的HTML框架可以用来开发混合移动应用（原生和HTML混合）或者开发 iOS & Android 风格的WEB APP。　　也可以用来作为原型开发工具，可以迅速创建一个应用的原型。　　Framework7 并不能兼容所有的设备。她只专注于为 iOS 和 Google Material 设计提供最好的体验。Framework7 是一个针对iOS7的框架。从一开始，她就考虑到如何最方便快捷地实现iOS7上各种惊艳的UI组件，以及复杂的动画和灵活的触摸交互。所以Framework7是你实现像素级精度的iOS7应用的最佳选择。　　GitHub：
APP 框架（拓展）
react-native
　　中文官网地址：　　描述：React Native使你能够在Javascript和React的基础上获得完全一致的开发体验，构建世界一流的原生APP。React Native着力于提高多平台开发的开发效率 —— 仅需学习一次，编写任何平台。(Learn once, write anywhere)　　GitHub地址：
　　官网地址：　　描述：Weex 提供强大的跨平台能力，可以使用相同的 API 开发 Web，Android 和 iOS 应用。同时，我们对接口了丰富的扩展能力。
阅读(...) 评论()基于vue移动端UI框架有哪些？vue移动端UI框架总汇时间: 阅读: 9610标签: vuevue现在使用的人越来越多了，这篇文章主要整理一些比较优秀的移动端ui框架，推荐给大家，例如：mint UI、vux、vonic、vant、cube-ui、Muse-ui、Vue-Carbon、YDUImint UI1.Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。2.真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件，无需再纠结文件体积过大。3.考虑到移动端的性能门槛，Mint UI 采用 CSS3 处理各种动效，避免浏览器进行不必要的重绘和重排，从而使用户获得流畅顺滑的体验。4.依托 Vue.js 高效的组件化方案，Mint UI 做到了轻量化。即使全部引入，压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。// 安装基于vue2.0
npm install mint-ui -S
// 引入全部组件
import Vue from 'vue';
import Mint from 'mint-ui';
Vue.use(Mint);
// 按需引入部分组件
import { Cell, Checklist } from 'minu-ui';
Vue.component(Cell.name, Cell);
Vue.component(Checklist.name, Checklist);官网：http://mint-ui.github.io/#!/zh-cngithub:https://github.com/ElemeFE/mint-ui/vux1.Vux是基于WeUI和Vue(2.x)开发的移动端UI组件库，主要服务于微信页面。
&2.基于webpack+vue-loader+vux可以快速开发移动端页面，配合vux-loader方便你在WeUI的基础上定制需要的样式。vux-loader保证了组件按需使用，因此不用担心最终打包了整个vux的组件库代码。&
3.vux并不完全依赖于WeUI，但是尽量保持整体UI样式接近WeUI的设计规范。最初目标是创建一个易用，实用，美观的移动端UI组件库，现在离理想状态还有不少距离，因此需要大家及时反馈问题及贡献代码。//安装
npm install vux --save
import { AlertPlugin, ToastPlugin } from 'vux'
Vue.use(AlertPlugin)
Vue.use(ToastPlugin)官网：https://vux.li/github:https://github.com/airyland/vuxvonic&1.一个基于 vue.js 和 ionic 样式的 UI 框架，用于快速构建移动端单页应用。
和 ionic没有关系，只是在样式方面以 ionic 的 css 文件为基础（做了一些调整）2.vonic 依赖以下几个库，在创建 vonic 项目之前，请确保引入它们: vue-router,axios (vue.js 官方推荐的 ajax 方案)//安装
npm install vonic --save
//应用挂载点
&von-app&&/von-app&
//启动应用
Vue.use(Vonic.app, {
routes: routes
})官网：https://wangdahoo.github.io/vonic/github: https://github.com/wangdahoo/vonicMuse-ui&1.Muse UI 基本实现了 Material Design 设计规范类的所有组件，另外还开发许多的功能性的组件2.Muse UI 使用less文件，所有的颜色都有一个变量维护，通过编写 less 文件完成自定义主题，另外组件内部也提供一些修改效果的参数3.Muse UI 基于 Vue2.0 开发，Vue2.0是当下最快的前端框架之一，小巧，api友好，可用于开发的复杂单页应用//安装
pm install --save muse-ui
import Vue from 'vue'
import MuseUI from 'muse-ui'
import 'muse-ui/dist/muse-ui.css'
Vue.use(MuseUI)官网：http://www.muse-ui.org/github: https://github.com/museui/muse-uivant1.组件都是来源于有赞的微商城业务，并且经过有赞业务的检验，更靠谱&2.丰富的文档和Demo&3.支持 babel-plugin-import&4.单元测试覆盖率超过90%&5.不仅仅有丰富的基础组件，还有许多的业务组件//安装
npm i -S vant
//按需引入组件
import { Button } from 'vant/lib/button';
import 'vant/lib/vant-css/base.css';
import 'vant/lib/vant-css/button.css';
//导入所有组件
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/vant-css/index.css';
Vue.use(Vant);文档：https://www.youzanyun.com/zanui/vant#/zh-CN/component/quickstartgithub:https://github.com/youzan/vant/cube-ui&1.由滴滴内部组件库精简提炼而来，历经考验，并且每个组件都有充分单元测试，为后续集成提供保障。2.以迅速响应、动画流畅、接近原生为目标，在交互体验方面追求极致。3.遵循统一的设计交互标准，高度还原设计效果；接口标准化，统一规范使用方式，开发更加简单高效。4.支持按需引入和后编译，轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发。//安装使用：
npm install cube-ui --save
import Vue from 'vue'
import Cube from 'cube-ui'
Vue.use(Cube)官网：https://didi.github.io/cube-ui/github:https://github.com/didi/cube-ui/Vue-Carbon&&一个基于 Vue 开发 material design 风格的移动端 UI 库//安装
npm install vue-carbon --save
import Vue from 'vue'
import VueCarbon from 'vue-carbon'
import 'vue-carbon/dist/vue-carbon.css' // 加载文件
Vue.use(VueCarbon)文档：http://www.myronliu.com/vue-carbon/#!/github: https://github.com/myronliu347/vue-carbonYDUI&1.YDUI Touch 专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高。2.使用 Flex 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局。3.实现强大的屏幕适配布局，等比例适配所有屏幕。什么？用得不开心？轻松切换 px。4.自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。&!-- 引入YDUI样式 --&
&link rel="stylesheet" href="path/build/css/ydui.css" /&
&!-- 引入YDUI自适应解决方案类库 --&
&script src="path/build/js/ydui.flexible.js"&&/script&
&!-- 引入jQuery 2.0+ --&
&script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"&&/script&
&!-- 引入YDUI脚本 --&
&script src="path/build/js/ydui.js"&&/script&官网：http://www.ydui.org/github: https://github.com/ydcss/ydui除了上面的这些基于VUE的UI组件外，还有很多其他的暂未整理。请留言补充哦~~~~~~~为了账号安全，请及时绑定邮箱和手机
点击这里，将文章分享到自己的动态
聊聊滴滴开源 Vue 组件库— cube-ui 的技术内幕
是滴滴去年底开源的一款基于 Vue.js 2.0 的移动端组件库，主要核心目标是做到体验极致、灵活性强、易扩展以及提供良好的周边生态—。
自 17 年 11 月开源至今已有 5 个月，在这个过程中 cube-ui 受到了不少的关注，同时从社区中也收到了很多很好的反馈和建议。我们也一直在迭代更新，从最初的 1.0 版本到最近发布的 1.7 的版本，除了对原有组件做一些增强优化，我们也提供了很多新的组件。此外，周边后编译技术生态也做了很多优化，满足于更多场景需求，也做了一次升级。
接下来就重点介绍下 cube-ui 在这个过程中的有哪些成果以及一些设计细节。
cube-ui 的组件数已经从最初的 14 个增长了 28 个，足足翻了一倍，已有的组件生态：
扫码体验：
除了上述的组件外，cube-ui 还对外暴露了三个模块：
而且 cube-ui 也已经支持了如下特性：
此外，cube-ui 的周边生态也有了进一步丰富：
vue-cli 脚手架模板
快速上手教程
后编译 webpack 插件
按需引用 webpack 插件 ，依赖 babel 插件
针对于上边所介绍的关键成果，我们来聊聊具体设计上的细节。
滚动 & Picker 类组件
在移动端，由于手机尺寸以及交互特性，我们需要处理很多滚动类需求：下拉刷新、上拉更多、轮播等以及 Picker 选择等场景。cube-ui 底层滚动类组件以及 Picker 类依赖于我们团队的移动端利器
实现，基于其出色的体验进而保证了我们上层封装的滚动类、Picker 类组件的出色的交互体验。
弹出层类组件
在实际开发中我们会遇到很多弹出层类组件，因为我们设计了一个基础弹出层组件 ，它主要解决移动端最为常见的居中（Tip：文本换行位置也很重要哦）、置底以及是否有蒙层效果，借助于它来实现绝大多数的弹出层组件。
另一个常见的痛点就是由于弹出类组件往往是全屏的状态，如果我们按照 Vue 推荐的声明式的语法在子组件里使用弹出层组件，由于嵌套层级问题，很容易受到父级元素的样式影响。为此我们单独开发了
模块，通过 API 的形式将实例化的弹出层组件动态挂载到 Body 元素下，因此摆脱了父级元素样式的影响，同时会随着使用它的组件的销毁而自动销毁，且为了降低开销成本，根据需要有些弹出层类组件都被设计成了单例模式。它是一个很通用的能力，我们把这样的一个便捷的 API 对外暴露出去，开发者也可以根据实际场景将自己开发的组件通过 createAPI 进行注册，进而也可解决上述痛点。
表单类组件
表单类需求往往特应性比较大，交互也很难做到统一，但是仍然可以有主流的表单设计交互，在 cube-ui 中表单可以设置 layout 来决定样式甚至是交互，满足日常场景需求。在表单设计中有两个很重要的组件： 和 。Validator 成为独立的组件主要基于校验场景不确定性，同时还需要满足各种形式的校验，所以 Validator 就只做了两件核心的事情，对数据源进行校验以及对应的错误信息的展示。考虑到开发者开发表单的便利性，我们参考
的设计，把表单设计成了根据 Schema 配置自动生成表单，这样开发表单的成本就降低了很多；同时为了兼顾灵活性，也支持通过插槽来自定义开发者需要的结构交互。
是 cube-ui 的一个重要的生态，借助于后编译，整个的 web 应用的开发都可以直接基于 ES2015+ 进行开发，而项目依赖的一些 NPM 包也是可以直接使用 ES2015+ 进行开发，并且无需编译可直接发布到 NPM 平台上（也可以是自己 NPM 私服）。这样，这些组件库或者工具就可以有更多的想象空间、可以做更多有意思的事情。
cube-ui 支持的两个特性以及 rem 布局都是基于我们主推的后编译技术实现。
接下来一起来看下这两个特性实现的细节。
自定义主题
一般而言，组件库都是有默认主题的，而往往还会搭配有多套主题（PC 类组件库比较常见）。现在借助于 CSS 预处理器，我们可以给组件定义一些变量（一般都是颜色值），然后在组件对应的样式中使用。
对于自定义主题这种需求，主流的做法有：样式覆盖和修改变量。
样式覆盖是最古老的做法，但是缺点也很明显，第一就是样式冗余问题，默认主题样式是一直存在的；第二就是开发者需要确切的知道样式对应的优先级去覆盖，要么是同级的优先级样式后置，要么就是提升自身覆盖的样式优先级。
当然，样式覆盖的做法也是有优点的，那就是对于多主题同时存在，自由切换场景会比较合适。
现在有很多的 CSS 预处理器可以选择，每一种 CSS 预处理器都提供了变量功能，借助于变量，我们可以很容易创建一个主题文件，里边包含组件依赖的变量定义。要实现自定义主题，开发者需要在自己项目下创建一个单独的样式文件，定义赋值变量，同时引入组件库自身源码下的主题文件。
本质上也是一种后编译做法，这个编译是利用 CSS 预处理器自身的变量能力达到目的。对于 Vue 组件库而言，主流的也是推荐的做法是把样式写在 .vue 文件中，这样便于维护，比较符合组件化开发思维；但是为了方便的使用预处理器实现自定义主题，通常都会把样式单独拿出来，一般的做法是创建一个样式文件夹，里边包含所有组件样式，而在 .vue 文件中则是没有样式的。
cube-ui 做法
核心点就是借助于后编译，我们可以按照原有我们习惯的方式去书写组件，即在 .vue 文件中包含模板、脚本和样式。如果需要自定义主题，就在自己项目下创建一个主题文件，里边定义变量，这个做法和一般的修改变量做法一样，但是不需要引入所有样式入口文件，因为也不存在这样的一个文件；同时借助于 webpack，我们完全可以做到在不侵入源码的情况下，做到主题定制。
接下来就看下具体做法，如果是新创建的项目，那么推荐使用 Vue-cli +
模板生成；而如果是现成的项目，则具体参考 中配置。主要有两个核心点：
创建主题文件 theme.styl，一般放在 src/ 目录下
修改 webpack 中关于 stylus-loader 的配置项：添加 import 字段用于依赖自定义主题文件
接下来就看一个简单项目演示，假设创建了一个 demo 的项目，这个项目默认跑起来是这样的：
如果我们想要把项目中使用的按钮的背景色该换掉，那么可以修改 theme.styl 的文件内容：
// 如果你需要使用 cube-ui 自带的颜色值 需要 require 进来
@require "~cube-ui/src/common/stylus/var/color.styl"
$btn-bgc := #409eff
$btn-bdc := #409eff
$btn-active-bgc := #66b1ff
$btn-active-bdc := #66b1ff
配合我们的 webpack 配置，刷新后的样子为：
这样我们就可以轻松做自己想要的主题定制，所要做的就是修改 cube-ui 已经定义好的变量值即可。对于 cube-ui 组件库自身，则不会有任何修改，且对于应用开发者而言，用不用自定义主题，本身的源代码不用修改，只需要创建一个主题文件（无需手工引入）配合 webpack 插件配置即可。
其实对于主题定制，还可以更进一步，未来 cube-ui 会考虑借助于 CSS 自身支持的达到主题定制的目的，例如可以把处理器变量改为原生的变量，编译的话可以通过
插件把默认变量值做替换，可以实现和现有编译后功能相同的效果，同时在后编译的情况下不失原生 CSS 变量的动态优势。这样，不仅可以做到主题定制，也可以做到多主题的自由切换，因为 CSS 原生变量可以直接修改变量值而不需要通过事先写死然后切换 class 覆盖的方式做多主题切换。
在移动端还是有很多设计师、产品或者开发者偏爱用缩放来达到不同尺寸屏幕适配目的，而缩放的实现一般都是采用 rem 进行布局，业内比较出名的方案就是手机淘宝前端团队开源的 。
现在其实是不推荐使用 rem 进行布局的，如果真的要缩放的效果，可以考虑 vw vh 等 CSS 单位来实现。
rem 布局有两个核心的点：
在运行时动态根据视口宽度更新 rem 的值，即修改根元素 HTML 的 font-size 的值
在编译时（或开发时）需将设计稿的 px 单位转换为 rem 单位
对于组件库而言，如果想要同时做到即支持普适的 px 又支持 rem 这种方式的话，社区貌似还没见到。和后编译搭配，则比较容易实现，在 cube-ui 中，已经提供了 rem 支持，主要采取的方案：
可选的 amfe-flexible, 也就是
动态计算更新 rem 的值（注 2.x 版本）
选择了 postcss 的插件
作为将 px 转换为 rem 的库
这其实是对组件库本身有了一定要求，和尺寸相关的尽量要用样式控制，这样才能通过处理工具
将 px 单位处理成 rem 单位，进而实现动态缩放需求。
来看下 cube-ui 使用 rem 的效果，默认 iPhone 5 尺寸效果：
当尺寸变大，例如为 iPhone 6 Plus 尺寸时效果：
可以看出整体的效果，当尺寸较小时，Button 和 Toast 都是比较小的，而当尺寸比较大时，相对应的都会更大，达到了缩放的目的。
这里上层扩展主要是指基于组件库进行二次封装，例如在滴滴内部，我们的很多业务组件库就是在开源的 cube-ui 组件库之上做增强而来的。
这个能力是非常重要的，因为移动端组件库和 PC 组件库最大的区别是移动端多是 to C 的业务场景，不同的业务场景下的设计是不一样的，所以 cube-ui 专注于通用组件和基础能力的建设，并不会在布局和业务组件方面大做文章；而 PC 组件库一般都是用于 to B 的场景，如内部 MIS 类的系统，对于设计的要求并没有特别苛刻，所以基础的样式，组件都是可以统一的。因此 cube-ui 的定位并不是要提供一个“大而全”的组件库，而是提供了二次扩展的能力，目标是任何移动端的业务场景都可以基于 cube-ui 提供的能力做二次扩展。
以我们的快速上手教程为例，我们要开发如下图的弹窗组件。
我们基于 cube-ui 提供的能力开发它就非常方便了。首先可以基于 Popup 组件开发一个 subscribe-dialog.vue 组件：
&template&
&div class="subscribe-dialog-view"&
&cube-popup ref="popup" @mask-click="hide"&
&div class="subscribe-dialog-wrapper"&
&span class="close" @click="hide"&&i class="cubeic-close"&&/i&&/span&
&div class="title"&开启推送通知&/div&
&img src="./subscribe.png"&
&p class="desc"&第一时间获取最新鲜出炉的新闻攻略、赛事咨询、数据专题、精彩视频&/p&
&cube-button class="button" @click="start"&现在开启&/cube-button&
&/cube-popup&
&/template&
export default {
name: 'subscribe-dialog',
methods: {
this.$refs.popup.show()
this.$emit('show')
this.$refs.popup.hide()
this.$emit('hide')
接着使用 createAPI 模块把它变成一个 API 式的组件：
import SubscribeDialog from './components/subscribe-dialog/subscribe-dialog'
createAPI(Vue, SubscribeDialog, [], true)
然后调用它就非常方便了：
this.subscribeDialog = this.$createSubscribeDialog()
this.subscribeDialog.show()
周边生态有两个核心：后编译 + 按需引入。为此，我们开发了两个 webpack 的插件来帮助我们更好的去使用、开发。
后编译 webpack 插件
按需引用 webpack 插件
webpack-post-compile-plugin
这个插件主要是读取应用 package.json 中的 compileDependencies 字段的值（用于指定应用需要后编译哪些依赖包），而且还能解决嵌套后编译包的问题，因为开发者只需要关注自己依赖需要后编译的包，而不需要关注依赖的依赖包，这样就能构成一条生态链。
为什么不是一个 NPM 包自己声明需不需要后编译，而是由使用者去声明？
主要考虑整个 NPM 生态，例如
并不在我们控制范围之内，为了更好的使用整个 NPM 生态圈的包，我们决定由使用者去声明需要后编译的 NPM 包。
webpack-transform-modules-plugin
这个插件主要解决更方便、友好地使用按需引入的问题，为了更好的统一应用使用后编译和不使用的情况，我们在原本
的基础上做了升级优化产出了
插件，但是和后编译的场景类似，这个是不能解决后编译场景下 NPM 包嵌套按需引入的问题的，为此才开发了 webpack-transform-modules-plugin 这个插件，和 compileDependencies 字段类似，我们新增了 transformModules 字段来声明按需引入的 NPM 包的的转换规则，例如：
"transformModules": {
"cube-ui": {
"transform": "cube-ui/src/modules/${member}",
"kebabCase": true
当然在后编译的场景下，我们借助于 webpack 4 Tree shaking 中新增的
也可以达到目的，这个是未来我们去优化的方向。
脚手架 & 教程
任何的技术都是有成本的，我们新增了 webpack 插件，也有一些需要配合的改动，所以为了降低开发者成本，我们提供了适用于 vue-cli 脚手架的模板 ，当然对应的也会新增一些配置项，感兴趣的可以了解下。
同时为了初次使用 cube-ui 的开发者快速上手，我们还有一个简单的上手教程 。
cube-ui 目前还处于初步的阶段，还缺少很多组件，但是我们一直在努力，希望在很快的未来可以提供更多更好用的组件。不仅如此，我们希望的是除去组件库本身，额外还会丰富周边的整个生态建设，给开发者一个良好的生态环境，进一步提升开发体验，提升应用性能等。当然，我们也希望社区的小伙伴也能参与进来，一块共同建设，共同进步。
未来 cube-ui 会朝着如下方面继续前行：
希望感兴趣的同学可以一起共建或者加入我们团队，一起玩技术！
本文原创发布于慕课网 ，转载请注明出处，谢谢合作
若觉得本文不错，就分享一下吧！
评论加载中...
相关文章推荐
正在加载中
作者相关文章