如何在Vue SFC內使用外部模塊？

Question

我是Vue的新手，我正在嘗試構建一個使用Typescript和vue-property-decorator的應用程序。 這是我第一次嘗試在SFC中使用外部模塊。 我想使用v-calendar創建日歷組件並將其呈現在頁面（ schedule.vue ）中。

我完成了yarn add ，然后嘗試遵循文檔中關於使用v-calendar作為組件的說法。 但是到目前為止，當我嘗試渲染頁面時，沒有編譯錯誤，但整個頁面都變成空白。 這是怎么了 任何幫助是極大的贊賞！

// pages/schedule.vue
<template lang="pug">
  VCalendar
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import VCalendar from '../components/calendar.vue';

@Component({
  components: {
    VCalendar
  }
})

export default class Schedule extends Vue {
}

// components/calendar.vue
<template lang="pug">
  <v-calendar :attributes="attrs" />
</template>

<script lang="ts">
import 'v-calendar/lib/v-calendar.min.css';
import { Calendar, setupCalendar } from 'v-calendar';
import { Component, Vue } from 'vue-property-decorator';

@Component({
  components: {
    setupCalendar,
    Calendar
  }
})

export default class VCalendar extends Vue {
  data() {
    return {
      attrs: [
        {
          key: 'today',
          highlight: {
            backgroundColor: '#ff8080',
          },
          dates: new Date(2018, 0, 1)
        }
      ],
    };
  }

  mounted():any {
    setupCalendar({
      firstDayOfWeek: 2,
    });
  }
}
</script>

我檢查了以下問題，但仍然迷路：

• 如何使用外部vue npm組件
• 如何在vue組件中包含外部js

Answer 1

您需要使用Vue.component('v-calendar',Calendar )在全球范圍內進行注冊Vue.component('v-calendar',Calendar )或者在基於類的SFC的情況下，您要導入Calendar的命名導入，則應將其用作<calendar></calendar> @Component({ components: { setupCalendar, 'v-calendar':Calendar } })也可以在基於類的SFC中使用，以為某些導入的組件提供自定義標簽名稱。