关于cube-ui学习

前言：

针对滴滴开源 Vue 组件库— cube-ui，我花了些时间尝试了一下，感觉这个组件库很赞，可以解决我们开发中遇到的一些问题；大家有时间可以补充相互学习一下；

相关传送门：

1、官网文档

2、gitHub

3、相关文章（慕课网）

主要功能：

安装配置一些看文档就可以，我主要尝试了下快速上手教程 ，资源借用该github上的，实践了下这个教程小功能：

Clipboard Image.png

除了一些一般的组件cube-ui最大的特点模块：

1、style:

构建项目后添加了reset.css、base.css ；就是从一开始就处理一些常见问题以及规范；比如：reset.css对body属性的重新定义、base.css对1px显示问题的处理；

2、create-api:

我们之前的弹框组件覆盖屏幕基本上都是用 position:fixed 这个属性来脱离文本流；而create-api是在vue 的prototype上添加 Clipboard Image.png

方法；上收教程这个例子中在弹出层触动，底层还是会滚动；这个就看产品定义做出调整了；

3、better-scroll: https://github.com/ustbhuangyi/better-scroll

处理滚动的第三方插件，很早之前就想引用这个插件一直没来的及用，cube-ui直接已经包装好这个插件配合Scroll使用：

Clipboard Image.png

后编译以及主题：

后编译还没有深入的看；项目的 src/ 目录下创建一个 theme.styl的文件；这个当我们要修改各个组件的样式在这个文件就可以修改；

为我们所用：

1、问题·：我们使用rem适配、但是输入框在安卓上点击时，软键盘弹出，页面涉及rem的会自动缩小；我在做移动端活动页的时候引入转换rem的文件也出现了这个问题；

使用：这个问题最好用px为单位解决。在cube-ui上使用rem，还是会存在此问题，引入模块style是否会有影响？如果我们摈弃rem，用px布局可能我们用的精力会更大。所以在布局时候提前处理好这些问题；

3、我们的弹框层也可以用create-api模块做；

2、模块better-scroll解决我们项目中滚动问题；