1.安装：npm install cube-ui -S
2.修改 .babelrc：(添加到plugins中去){ "plugins": [ ["transform-modules", { "cube-ui": { "transform": "cube-ui/lib/${member}", "kebabCase": true, "style": { "ignore": ["create-api", "better-scroll"] } } }] ] }3.在main.js
import Vue from 'vue'
import Cube from 'cube-ui' // 一般直接放在这个位置

Vue.use(Cube)

<template><div class="MemberInfor"><div class="content"><cube-form :model="model" @validate="validateHandler" @submit="submitHandler"><cube-form-group><cube-form-item :field="fields[0]"></cube-form-item><cube-form-item :field="fields[1]"></cube-form-item><cube-form-item :field="fields[2]"></cube-form-item><cube-form-item :field="fields[3]"><cube-button class="btn" @click="showDatePicker">{{model.dateValue || 'Please selectss'}}</cube-button><date-picker ref="datePicker" :min="[2008, 8, 8]" :max="[2020, 10, 20]" @select="dateSelectHandler"></date-picker></cube-form-item><cube-form-item :field="fields[4]"></cube-form-item><cube-form-item class="ss" :field="fields[5]"></cube-form-item></cube-form-group><cube-form-group><cube-button type="submit">Submit</cube-button></cube-form-group></cube-form></div></div></template>

<script>
import { DatePicker } from "cube-ui";
export default {data() {return {validity: {},valid: undefined,model: {inputValue: "kk",inputValues: "",radioValue: "man",dateValue: "",selectValue: "",checkboxGroupValue: ["Phone", "DM", "EDM", "SMS", "Share to LCLG"]},fields: [{type: "input",modelKey: "inputValue",label: "Surname",props: {placeholder: "请输入姓名"},rules: {required: true}},{type: "input",modelKey: "inputValues",label: "Phone",props: {placeholder: "请输入电话"},rules: {required: true}},{type: "radio-group",modelKey: "radioValue",label: "Gemder",props: {options: ["man", "woman"]},rules: {required: true}},{modelKey: "dateValue",label: "Date",rules: {required: true}},{type: "select",modelKey: "selectValue",label: "AgeGroup",props: {options: ["A1", "A2", "A3"]},rules: {required: true}},{type: "checkbox-group",modelKey: "checkboxGroupValue",label: "SharetoLCLG",props: {options: ["Phone", "DM", "EDM", "SMS", "Share to LCLG"]},rules: {required: true}}]};},methods: {submitHandler(e) {alert(this.model.inputValue +"*****" +this.model.inputValues +"***" +this.model.radioValue +"***" +this.model.dateValue +"***" +this.model.selectValue +"***" +this.model.checkboxGroupValue);},validateHandler(result) {this.validity = result.validity;this.valid = result.valid;},showDatePicker() {this.$refs.datePicker.show();},dateSelectHandler(date, selectedVal, selectedText) {this.model.dateValue = selectedVal;}},components: {DatePicker}
};
</script><style lang="stylus">
.MemberInfor {background-color: #FFA07A;width: 100%;height: 1600px;.content {display: inline-block;width: 90%;height: 1500px;background-color: #fff;margin-top: 15px;}.cube-form-item {font-size: 15px;}.btn {background-color: #ffffff;color: #C0C0C0;}.cube-form_standard .cube-validator {padding-right: 90px;}.ss {display: flex;flex-wrap: wrap;flex-direction: row;justify-content: center;}
}
</style>