cube-ui 是由滴滴内部UI团队基于JavaScript和Vue开发的响应迅速、动画流畅、轻量灵活的移动端UI组件。cube-ui提供了按钮、加载框、Tip、表单和弹窗等一些常用组件。目前该项目自开源以来颇受欢迎，在GitHub上已经有8.8k的Star，下面来看一下它的使用方法。
方法（此安装部分只针对于 vue-cli 版本< 3 的情况，vue-cli >= 3的请参考Cube-UI网站说明）：
安装
NPM
$ npm install cube-ui --savecube-ui 搭配 webpack 2+ 支持后编译和普通编译 2 种构建方式（默认使用后编译），使用前都需要修改应用的依赖和配置，这里只介绍后编译，普通编译请参考官方文档（文末有链接）。
后编译
1.修改 package.json 并安装依赖
{ // webpack-transform-modules-plugin 依赖 transformModules "transformModules": { "cube-ui": { "transform": "cube-ui/src/modules/${member}", "kebabCase": true } }, "devDependencies": { // 新增 stylus 相关依赖 "stylus": "^0.54.5", "stylus-loader": "^2.1.1", "webpack-post-compile-plugin": "^1.0.0", "webpack-transform-modules-plugin": "^0.4.3" }}2.修改 webpack.base.conf.js
var PostCompilePlugin = require('webpack-post-compile-plugin')var TransformModulesPlugin = require('webpack-transform-modules-plugin')module.exports = { // ... plugins: [ // ... new PostCompilePlugin(), new TransformModulesPlugin() ] // ...}3.修改 build/utils.js 中的 exports.cssLoaders 函数
exports.cssLoaders = function (options) { // ... const stylusOptions = { 'resolve url': true } // https://vue-loader.vuejs.org/en/configurations/extract-css.html return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less'), sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass'), stylus: generateLoaders('stylus', stylusOptions), styl: generateLoaders('stylus', stylusOptions) }}4.修改 vue-loader.conf.js
module.exports = { loaders: utils.cssLoaders({ sourceMap: sourceMapEnabled, extract: false }), // ...}CDN
<script src="https://unpkg.com/cube-ui/lib/cube.min.js"></script><link rel="stylesheet" href="https://unpkg.com/cube-ui/lib/cube.min.css">使用
全部引入
import Vue from 'vue'import Cube from 'cube-ui'Vue.use(Cube)示例
<template> <cube-button @click="showDialog">show dialog</cube-button></template><script> export default { methods: { showDialog() { this.$createDialog({ type: 'alert', title: 'Alert', content: 'dialog content' }).show() } } }</script>下方是示例环境，大家可以扫码来体验一下。
