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

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

滴滴cube-ui架构图

滴滴cube-ui架构图

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

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

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

基础

弹层

滚动

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

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

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

0
如无特殊说明,文章均为原作者原创,转载请注明出处

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到