CODE大全
您的位置 : 首页 > 前端技术 >

滴滴 cube-ui 教程

发布时间:『 2018-04-25

11月8号,滴滴在github上开源了Web移动端组件库cube-ui。cube-uhttp://www.bdx-leb.com/051f/51a6f485d3bb.htmli是基于Vue.js 2.0的,目前在github上http://www.bdx-leb.com/eda4/56fd3d2f72cd.html已获得上千个star。值得一提的是cube-ui和WeUI类似,只不过底层实现不一样罢了,本文将主要介绍cube-ui的使用。

安装

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

npm install cubhttp://www.bdx-leb.com/be30/06453908790a.htmle-ui --save

基本用法

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

import Vue frohttp://www.bdx-leb.com/d98d/f873997a4042.htmlm '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'

Vhttp://www.bdx-leb.com/e030/917994dabdf7.htmlue.use(Button)
Vue.http://www.bdx-leb.com/d780/bc1d20d85c04.htmluse(ActionSheet)

cube-ui的特点

组件多 主题丰富

大家可以直接把官网上的代码clone下来http://www.bdx-leb.com/3a32/f97e0f33ac3d.html

git clone git@github.com:didi/cube-ui.git
cd cube-ui
npm install
npm run dev
# or rhttp://www.bdx-leb.com/a9b8/cba348626d85.htmlun document devehttp://www.bdx-leb.com/32a2/4fd49a1877e3.htmllopment
npm run doc-dev

直接运行就可以看到效果。cube-ui运行后,在手机上查看,效果最佳http://www.bdx-leb.com/4f39/3556f864b9ce.html

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!


——— 全文完 ———
Powered by 张鑫旭 | 鄂ICP备14009759号-2 | 网站留言 Copyright © 2014-2016 张鑫旭 版权所有