快速上手

新手教程项目：cube-application-guide

脚手架

如果你打算用在一个新项目中使用 cube-ui，可以通过我们提供的一套基于 vue-cli 实现的脚手架去初始化 cube-ui 项目的配置和基础代码，这样你就可以忽略安装步骤，直接看使用部分。

vue init cube-ui/cube-template projectname

关于初始化时特殊的配置项，请参考 cube-template WIKI。

如果你打算在现有项目中使用 cube-ui，请先参考安装部分。

安装

NPM

npm install cube-ui --save

cube-ui 搭配 webpack 2+ 支持后编译和普通编译 2 种构建方式（默认使用后编译），使用前都需要修改应用的依赖和配置。

• 后编译

1. 修改 package.json 并安装依赖

{
  // webpack-post-compile-plugin 依赖 compileDependencies
  "compileDependencies": ["cube-ui"],
  // 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": "^0.3.1",
    "webpack-transform-modules-plugin": "^0.3.2"
  }
}

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
  }),
  // ...
}

具体参见 https://github.com/vuejs-templates/webpack/pull/970/files

• 普通编译

1. 修改 package.json 并安装依赖

{
  // webpack-transform-modules-plugin 依赖 transformModules
  "transformModules": {
    "cube-ui": {
      "transform": "cube-ui/lib/- {member}",
      "kebabCase": true,
      "style": {
        "ignore": ["create-api", "better-scroll"]
      }
    }
  },
  "devDependencies": {
    "webpack-transform-modules-plugin": "^0.3.2"
  }
}

2. 修改 webpack 配置：

// webpack.config.js
var TransformModulesPlugin = require('webpack-transform-modules-plugin')
module.exports = {
  // ...
  resolve: {
    // ...
    alias: {
      // ...
      'cube-ui': 'cube-ui/lib'
      // ...
    }
    // ...
  }
  // ...
  plugins: [
    // ...
    new TransformModulesPlugin()
  ]
  // ...
}

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)

按需引入

import {
  /* eslint-disable no-unused-vars */
  Style,
  Button
} from 'cube-ui'

注意： 按需引入的话，是不会打包基础样式部分的，所以在使用的时候需要引入 style 模块。

我们推荐直接全局注册：

// 全局注册
Vue.use(Button)
// ...

所有的可按需引入的组件以及模块：

import {
  // 基础样式
  Style,
  // basic
  Button,
  Loading,
  Tip,
  Toolbar,
  // form
  Checkbox,
  CheckboxGroup,
  Radio,
  Input,
  Textarea,
  Select,
  Switch,
  Rate,
  Validator,
  Upload,
  Form,
  // popup
  Popup,
  Toast,
  Picker,
  CascadePicker,
  DatePicker,
  TimePicker,
  SegmentPicker,
  Dialog,
  ActionSheet,
  Drawer,
  // scroll
  Scroll,
  Slide,
  IndexList,
  Swipe
} from 'cube-ui'

也可以引入create-api和better-scroll模块：

import { createAPI, BetterScroll } from 'cube-ui'

示例

<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://didi.github.io/cube-ui/#/zh-CN/docs/quick-start