《GitHub精选》是我们分享Github中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个移动端UI库——cube-ui。

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 --save

cube-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>

下方是示例环境，大家可以扫码来体验一下。

项目地址：https://github.com/didi/cube-ui

网站地址： https://didi.github.io/cube-ui