cube-ui is a responsive, smoothly animated, lightweight and flexible mobile UI component developed by Didi’s internal UI team based on JavaScript and Vue. cube-ui provides some common components such as buttons, loading boxes, tips, forms, and pop-ups. At present, the project has been quite popular since open source, and there are already 8.8k stars on GitHub, so let’s take a look at how to use it.

Method (this installation section is only for vue-cli version < 3, see the Cube-UI website for vue-cli >= 3):

Installation

NPM

$ npm install cube-ui --save

cube-ui with webpack 2+ supports post-compilation and normal compilation 2 construction methods (post-compilation is used by default), you need to modify the dependencies and configuration of the application before use, here is only the introduction of post-compilation, please refer to the official documentation (there is a link at the end of the article) for ordinary compilation.

Post-compilation

1. Modify package.json and install dependencies

{ // webpack-transform-modules-plugin depends on transformModules “transformModules”: { “cube-ui”: { “transform”: “cube-ui/src/modules/${member}”, “kebabCase”: true } }, “devDependencies”: { // Added stylus-related dependencies “stylus”: “^0.54.5”, “stylus-loader”: “^2.1.1”, “webpack-post-compile-plugin”: “^1.0.0”, “webpack-transform-modules-plugin”: “^0.4.3” }}

2. Modify 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. Modify the exports.cssLoaders function in build/utils.js

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. Modify 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">

use

All introduced
import Vue from ‘vue’import Cube from ‘cube-ui’Vue.use(Cube)
example
<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>
The following is a sample environment, you can scan the code to experience it.