如何正确全局地注册和使用Vue Rangedate Picker组件？

Question

我正在尝试使用VueRangedatePicker ，但似乎无法弄清楚如何在其他vue组件的模板上使用此功能。 我正在使用Webpack。 我已经在main.js文件中注册了组件/插件，如下所示：

import Vue from 'vue'
import App from './App'
import router from './router'
import { store } from './store/store'
import firebase from './firebase-config'
import vuefire from 'vuefire'

//////////////// HERE 
import VueRangedatePicker from 'vue-rangedate-picker' // importing the plugin here
Vue.use(VueRangedatePicker) // using it
Vue.component('VueRangedatePicker', {  }) // creating the component globally (if I don't add this line the app complains the component is not registered
////////////////

Vue.config.productionTip = false
let app;
Vue.use(vuefire)

firebase.auth().onAuthStateChanged(function(user){
  if (!app) {
    /* eslint-disable no-new */
    app = new Vue({
      el: '#app',
      template: '<App/>',
      components: { App, VueRangedatePicker },
      router,
      store,
      VueRangedatePicker
    })
  }
})

然后在我的组件component_A.vue上，我再次以以下方式导入VueRangedatePicker插件：

<template>
  <div>
       <vue-rangedate-picker @selected="onDateSelected" i18n="EN" />
  </div>
</template>
<script>
import firebase,{ itemRef } from '../firebase-config';
import VueRangedatePicker from 'vue-rangedate-picker'

export default {
firebase() { 
    return {
    items: itemsRef,
    }
  },
  name: 'component_A',
  data () {
    return {

    }
  },
created() {  
  console.log(VueRangedatePicker);
},
methods: {
  onDateSelected: function (daterange) {
    this.selectedDate = daterange
  },
}
</script>

我知道插件/组件已注册，因为当我在控制台上登录Vue Rangedate Picker时，我可以看到该对象

但是我收到这样的错误消息

我已经阅读了项目github上的完整readme.md文件，但仍然感到困惑。 什么是Vue_Daterange_picker？ 是插件吗？ 它是组件吗？ 它是允许我构建组件的插件吗？ 我很困惑。 您能为我澄清一下吗？ 我该如何进行这项工作？

Answer 1

这是因为您用空名称注册了该组件。 在main.js中：

Vue.component('DatePicker', VueRangedatePicker)

然后在您的组件中将该组件用作：

<date-picker></date-picker>