我们今天分享的是滴滴公司开源出来的一套移动端组件库，他的名字叫 Cube UI。

项目简介

Cube UI 是基于 Vue.js 实现的精致移动端组件库。

最新版本发布时间
代码仓库许可证
最新贡献人员总数
仓库语言总数
NPM 总下载数
GitHub 衍生总数
GitHub 收藏总数
GitHub 关注者总数

功能特性

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

安装使用

• 使用 npm 安装

npm install cube-ui --save

• 修改 webpack 配置

// webpack.config.js
var TransformModulesPlugin = require('webpack-transform-modules-plugin')
module.exports = {
  // ...
  resolve: {
    // ...
    alias: {
      // ...
      'cube-ui': 'cube-ui/lib'
      // ...
    }
    // ...
  }
  // ...
  plugins: [
    // ...
    new TransformModulesPlugin()
  ]
  // ...
}

• 注册使用

官方推荐直接全局注册，并按需引用。

import { Style, Button } from 'cube-ui'

// 全局注册
Vue.use(Button)
// ...

更多使用方式可参考 快速上手

支持组件

•  基础

  •  Button 按钮
  •  Loading 加载中
  •  Tip 提示
  •  Toolbar 工具条
  •  TabBar 选项卡

•  表单

  •  Checkbox 复选框
  •  CheckboxGroup 复选框组
  •  Radio 单选框
  •  Input 输入框
  •  Textarea
  •  Select 选择
  •  Switch 开关切换
  •  Rate 评级
  •  Validator 校验器
  •  Upload 上传
  •  Form 表单

•  弹层

  •  Popup
  •  Toast 提醒
  •  Picker 选择器
  •  CascadePicker 级联选择器
  •  DatePicker 日期选择器
  •  TimePicker 时间选择器
  •  SegmentPicker 段选择器
  •  Dialog 弹框
  •  ActionSheet 操作菜单
  •  Drawer 抽屉
  •  ImagePreview 图片预览

项目截图

由于是前端项目包含各种组件我们不再这里添加多余截图，建议有兴趣的小伙伴们自行体验。

文档地址：

https://didi.github.io/cube-ui/

源码地址：

https://github.com/didi/cube-ui