移动组件库：Cube UI

Posted 2023-05-04

参考技术A

官网： https://didi.github.io/cube-ui/#/zh-CN
GitHub： https://github.com/didi/cube-ui

1、首先创建一个vue项目

2、安装cube-ui

3、官方推荐使用 babel-plugin-transform-modules 插件，可以更优雅引入组件模块以及对应的样式。

4、配置下这个插件，修改 .babelrc：(添加到plugins中去)

引入方式1：全部引入

一般在入口文件main.js中：

全部引入了后就相当于全局注册了，直接用就可以了。不需要在每个.vue文件中import … （局部引入），以及components … 局部注册了。

引入方式2：按需引入

注意： 按需引入的话，是不会打包基础样式部分的，所以在使用的时候需要引入 style 模块。

注册方式 可选全局注册也可以选择局部注册：

所有的可按需引入的组件：

也可以引入create-api和better-scroll模块：

示例

不使用后编译

注意： cube-ui 搭配 webpack 2+ 默认就会使用后编译，但是后编译需要有一些依赖以及配置（参见本页最后）；如果不想使用后编译的话，可以直接修改 webpack 配置即可

使用后编译

1、修改 package.json

2、修改 .babelrc，依旧依赖babel-plugin-transform-modules

3、修改 webpack.base.conf.js

4、修改 build/utils.js 中的 exports.cssLoaders 函数

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

开源最前线（ID：OpenSourceTop） 猿妹 整编

综合自：https://didi.github.io/cube-ui/

继 6 月份开源 后，滴滴近日又开源了第二个项目 —— 基于 Vue.js 实现的移动端组件库 cube-ui 。 

移动端组件库 cube-ui

授权协议：Apache

开发语言：JavaScript

操作系统：跨平台

开发厂商：滴滴

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

cube-ui 简介

cube-ui 是由滴滴开源的基于 Vue.js 实现的移动端组件库。

cube-ui 具有如下功能特性：

● 质量可靠：由滴滴内部组件库精简提炼而来，历经考验，并且每个组件都有充分单元测试，为后续集成提供保障。

● 体验极致：以迅速响应、动画流畅、接近原生为目标，在交互体验方面追求极致。

● 标准规范：遵循统一的设计交互标准，高度还原设计效果；接口标准化，统一规范使用方式，开发更加简单高效。

● 扩展性强：支持按需引入和后编译，轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发。

cube-ui 基础组件

Button：按钮，提供了各种类型、样子、状态以及图标。

Checkbox 复选框：复选框，可设置其状态、传入特殊 class 以及复选框图标位置。

CheckboxGroup 复选框组：复选框组就是一组复选框，主要用来选择一组可选项；有垂直和水平两种样式。

Loading 加载中：加载，提供了可自定义大小的加载动画。

Tip：提示，用于弹出提示气泡框。通过在 Tip 组件上添加 ref 属性，获得对于组件的引用，然后调用 Tip 组件向外暴露出来的 show、hide 方法来控制组件的显示或隐藏。

cube-ui 弹层组件

Popup 弹层：底层弹层组件，主要用于基于此组件实现上层组件封装，只提供了基础功能：指定类型、是否有背景层、显示内容（HTML）以及是否居中。

内置所有的弹层类组件都是基于此组件实现，包括：Toast、Picker、TimePicker、Dialog、ActionSheet。

Toast：Toast组件主要用于非模态信息提醒，如显示时间设置，无需用户交互。

Picker组件：Picker组件支持多列选择器及数据联动。

TimePicker组件：TimePicker组件提供了常用的日期选择功能。

Dialog：Dialog模态框组件，提供了多种样式及交互形式。

ActionSheet：ActionSheet操作列表提供了两种常见的样式，灵活可控内容。

cube-ui 滚动组件

Scroll 滚动：滚动列表，提供了优质的原生滚动体验，便捷的配置项和事件，是一个基于better-scroll进行封装的组件。

Slide 幻灯片：轮播图，提供了常见的轮播及swipe的功能，也是一个基于better-scroll进行封装的组件。

IndexList 索引列表：索引列表，提供了列表索引的功能，也是一个基于better-scroll进行封装的组件。

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

cube-ui 其他模块

除了组件之外，cube-ui 还有一些特殊的模块。

style：样式部分，如果你是在按需引入使用的场景下，那么建议在入口文件处也要引入这个模块，因为它包含基础的 reset、基础通用样式以及内置 icon。

create-api：有些时候，开发者可能也需要自己封装的组件支持 API 式调用，此时可以通过引入 create-api 模块或者通过全局的 Cube.createAPI 接口来达到封装目的。

better-scroll：组件库依赖的一个库，为了避免重复引入问题，我们暴露出了这个模块。

快速上手

安装

cube-ui 搭配 webpack 2+ 支持后编译和普通编译 2 种构建方式（默认使用后编译），使用前都需要修改应用的依赖和配置。

使用

全部引入，一般在入口文件中：

按需引入：

注意： 按需引入的话，是不会打包基础样式部分的，所以在使用的时候需要引入 style 模块。

示例

---

●本文编号556，以后想阅读这篇文章直接输入556即可

●输入m获取文章目录

↓↓↓ 点击"阅读原文" 进入GitHub详情页