• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

基于 Vue.js 的移动端组件库的滴滴 cube-ui 教程

JAVA web前端中文站 2年前 (2018-03-08) 7142次浏览 已收录 0个评论

继 6 月份开源?Android 端插件化框架 VirtualAPK?后,11 月 8 日消息,滴滴出行又开源了第二个项目 —— 基于 Vue.js 实现的移动端组件库 cube-ui ,宣布开源 Web 移动端组件库 cube-ui,该技术拥有质量可靠、体验极致、标准规范和强扩展性这四大特点,并拥有独特的后编译技术方案帮助大幅优化性能。

基于 Vue.js 的移动端组件库的滴滴 cube-ui 教程

滴滴cube-ui 架构图

cube-ui 由滴滴内部组件库精炼而生,旨在让移动端开发更容易,让开发人员更专注于业务逻辑的开发,提升研发效率。具备以下特性:

  • 质量可靠滴滴内部组件库精简提炼而来,经历了业务一年多的考验,并且每个组件都有充分单元测试,为后续集成提供保障。
  • 体验极致以迅速响应、动画流畅、接近原生为目标,在交互体验方面追求极致。
  • 标准规范遵循统一的设计交互标准,高度还原设计效果;接口标准化,统一规范使用方式,开发更加简单高效。
  • 扩展性强支持按需引入和后编译,轻量灵活;扩展性强,可以方便地基于现有组件实现二次开发。

cube-ui 目前包含以下组件:

基础

弹层

滚动

滚动类组件都是基于?better-scroll?实现,而?Scroll?组件就是对 better-scroll 的封装。

具体使用方法可以参考之前发表的一篇文章?滴滴 CUBE-UI 教程

相较于市面上同类技术,该项目独有的后编译技术是滴滴前端团队总结出的一套优化技术方案。由于在一个项目中经常会引用多个经过 ES6 开发、Babel 编译发布的 NPM 模块,而 Babel 编译则会产生多份额外代码,针对该问题,cube-ui 组件库运用了后编译技术方案,可让最终使用方引用 cube-ui 组件库编译产生的代码体积减少,帮助优化性能。滴滴研发同学也呼吁越来越多的 NPM 模块支持后编译,这样应用最终编译后体积才会更小,后编译技术方案效果才会更好。


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:基于 Vue.js 的移动端组件库的滴滴 cube-ui 教程
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址