CUBE-UI报错make sure to provide the "name" option.

Question

我用vue cli 脚手架

安装的是 CUBE-UI 模板

当我想用CUBE-UI的DatePicker日期选择器

 <template>
  <div class="hello">
    <cube-form
      :model="model"
      :schema="schema"
      :immediate-validate="false"
      :options="options"
      @validate="validateHandler"
      @submit="submitHandler"
      @reset="resetHandler">
      </cube-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      validity: {},
      valid: undefined,
      model: {
        checkboxValue: false,
        checkboxGroupValue: [],
        inputValue: '',
        radioValue: '',
        rateValue: 0,
        dateValue: '',
        selectValue: '挂起3',
        switchValue: true,
        textareaValue: '',
        uploadValue: []
      },
      schema: {
        groups: [
          {
            legend: '运单数据',
            fields: [

              {
                type: 'input',
                modelKey: 'inputValue',
                label: '总运单号:',
                props: {
                  placeholder: '请输入'
                },
                rules: {
                  required: true
                },
                // validating when blur
                trigger: 'blur'
              },
              {
                type: 'DatePicker',
                name: 'dateValue',
                modelKey: 'dateValue',
                label: '日期',
                props: {
                  placeholder: 'MM-DD'
                },
                rules: {
                  required: true
                }
              },
              {
                type: 'input',
                modelKey: 'pointsAwbValue',
                label: '分运单号:',
                props: {
                  placeholder: '请输入'
                },
                rules: {
                  required: true
                },
                // validating when blur
                trigger: 'blur'
              },
              {
                type: 'select',
                modelKey: 'selectValue',
                label: '查验结果',
                props: {
                  options: ['挂起1', '挂起2', '挂起3', '挂起4', '挂起5', '挂起6']
                },
                rules: {
                  required: true
                }
              },
              {
                type: 'input',
                modelKey: 'descriptionValue',
                label: '查验后品名:',
                props: {
                  placeholder: '请输入'
                },
                rules: {
                  required: true
                },
                // validating when blur
                trigger: 'blur'
              },
              {
                type: 'input',
                modelKey: 'quantityValue',
                label: '数量:',
                props: {
                  placeholder: '请输入'
                },
                rules: {
                  required: true
                },
                // validating when blur
                trigger: 'blur'
              },
              {
                type: 'textarea',
                modelKey: 'textareaValue',
                label: '备注',
                props: {
                  placeholder: '请输入'
                },
                rules: {
                  required: true
                },
                // debounce validate
                // if set to true, the default debounce time will be 200(ms)
                debounce: 100
              }
            ]
          },
          {
            legend: '图片上传',
            fields: [
              {
                type: 'upload',
                modelKey: 'uploadValue',
                label: '图片',
                auto: true,
                max: 4,
                events: {
                  'file-removed': (...args) => {
                    console.log('file removed', args)
                  }
                },
                rules: {
                  required: true,
                  uploaded: (val, config) => {
                    return Promise.all(val.map((file, i) => {
                      return new Promise((resolve, reject) => {
                        if (file.uploadedUrl) {
                          return resolve()
                        }
                        // fake request
                        setTimeout(() => {
                          if (i % 2) {
                            reject(new Error())
                          } else {
                            file.uploadedUrl = 'uploaded/url'
                            resolve()
                          }
                        }, 1000)
                      })
                    })).then(() => {
                      return true
                    })
                  }
                },
                messages: {
                  uploaded: '上传失败'
                }
              }
            ]
          },
          {
            fields: [
              {
                type: 'submit',
                label: '提交'
              },
              {
                type: 'reset',
                label: '重置'
              }
            ]
          }
        ]
      },
      options: {
        scrollToInvalidField: true,
        layout: 'standard' // classic fresh
      }
    }
  },
  methods: {
    showDateTimePicker () {
      alert(666)
      this.$createTimePicker({
        showNow: true,
        minuteStep: 5,
        delay: 15,
        onSelect: (selectedTime, selectedText, formatedTime) => {
          this.$createDialog({
            type: 'warn',
            title: `selected time: ${selectedTime}`,
            content: `selected text: ${selectedText}<br>format time: ${formatedTime}`,
            icon: 'cubeic-alert'
          }).show()
        },
        onCancel: () => {
          this.$createToast({
            type: 'correct',
            txt: 'Picker canceled',
            time: 1000
          }).show()
        }
      }).show()
    },
    submitHandler (e) {
      e.preventDefault()
      console.log('submit', e)
    },
    validateHandler (result) {
      this.validity = result.validity
      this.valid = result.valid
      console.log('validity', result.validity, result.valid, result.dirty, result.firstInvalidFieldIndex)
    },
    resetHandler (e) {
      console.log('reset', e)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

然后启动不报错，前端提示错误：

vue.esm.js?f912:628 [Vue warn]: Unknown custom element: <DatePicker> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <CubeFormItem> at node_modules/_cube-ui@1.12.44@cube-ui/src/components/form/form-item.vue
       <CubeFormGroup> at node_modules/_cube-ui@1.12.44@cube-ui/src/components/form/form-group.vue
         <CubeForm> at node_modules/_cube-ui@1.12.44@cube-ui/src/components/form/form.vue
           <HelloWorld> at src/components/HelloWorld.vue
             <App> at src/App.vue
               <Root>

main.js已经注册这个DatePicker日期选择器了：

import 'amfe-flexible'
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'

// By default we import all the components.
// Only reserve the components on demand and remove the rest.
// Style is always required.
import {
  /* eslint-disable no-unused-vars */
  Style,
  // basic
  Button,
  Loading,
  Tip,
  Toolbar,
  TabBar,
  TabPanels,
  // form
  Checkbox,
  CheckboxGroup,
  Checker,
  Radio,
  RadioGroup,
  Input,
  Textarea,
  Select,
  Switch,
  Rate,
  Validator,
  Upload,
  Form,
  // popup
  Popup,
  Toast,
  Picker,
  CascadePicker,
  DatePicker,
  TimePicker,
  SegmentPicker,
  Dialog,
  ActionSheet,
  Drawer,
  ImagePreview,
  // scroll
  Scroll,
  Slide,
  IndexList,
  Swipe,
  Sticky,
  ScrollNav,
  ScrollNavBar,
  RecycleList
} from 'cube-ui'
import App from './App'
import router from './router'

Vue.use(Button)
Vue.use(Loading)
Vue.use(Tip)
Vue.use(Toolbar)
Vue.use(TabBar)
Vue.use(TabPanels)
Vue.use(Checkbox)
Vue.use(CheckboxGroup)
Vue.use(Checker)
Vue.use(Radio)
Vue.use(RadioGroup)
Vue.use(Input)
Vue.use(Textarea)
Vue.use(Select)
Vue.use(Switch)
Vue.use(Rate)
Vue.use(Validator)
Vue.use(Upload)
Vue.use(Form)
Vue.use(Popup)
Vue.use(Toast)
Vue.use(Picker)
Vue.use(CascadePicker)
Vue.use(DatePicker)
Vue.use(TimePicker)
Vue.use(SegmentPicker)
Vue.use(Dialog)
Vue.use(ActionSheet)
Vue.use(Drawer)
Vue.use(ImagePreview)
Vue.use(Scroll)
Vue.use(Slide)
Vue.use(IndexList)
Vue.use(Swipe)
Vue.use(Sticky)
Vue.use(ScrollNav)
Vue.use(ScrollNavBar)
Vue.use(RecycleList)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

请问大家，如何解决呢？谢谢