滴滴 cube-ui 教程

11月8号，滴滴在github上开源了Web移动端组件库cube-ui。cube-ui是基于Vue.js 2.0的，目前在github上已获得上千个star。值得一提的是cube-ui和WeUI类似，只不过底层实现不一样罢了，本文将主要介绍cube-ui的使用。

安装

安装的方法很简单，依赖npm。

npm install cube-ui --save

基本用法

安装完成之后，在使用时，引入cube-ui，然后调用use方法即可。

import Vue from 'vue'
import Cube from 'cube-ui'

Vue.use(Cube)

使用模块化的cube-ui

import Vue from 'vue'
import {
  /* www.xttblog.com */
  Style,
  Button,
  ActionSheet
} from 'cube-ui'

Vue.use(Button)
Vue.use(ActionSheet)

cube-ui的特点

• 组件多
• 主题丰富

大家可以直接把官网上的代码clone下来。

git clone git@github.com:didi/cube-ui.git
cd cube-ui
npm install
npm run dev
# or run document development
npm run doc-dev

直接运行就可以看到效果。cube-ui运行后，在手机上查看，效果最佳。

： » 滴滴 cube-ui 教程