Question

我是Vue的新手，我正在尝试构建一个使用Typescript和vue-property-decorator的应用程序。这是我第一次尝试在SFC中使用外部模块。我想使用v-calendar创建日历组件并将其呈现在页面（schedule.vue）中。

我已经完成了yarn add，我正在尝试遵循docs关于使用v日历作为组件的说法。但是到目前为止，当我尝试渲染页面时，没有编译错误，但整个页面都变成空白。这是怎么了任何帮助将不胜感激！

// 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>

我已经检查了这些问题，但我仍然迷路：

Answer 1

您需要使用Vue.component('v-calendar',Calendar )在全球范围内进行注册，或者在基于类的SFC的情况下，您要导入Calendar的命名导入，则应将其用作<calendar></calendar> @Component({ components: { setupCalendar, 'v-calendar':Calendar } })也可以在基于类的SFC中使用，以为某些导入的组件提供自定义标签名称。

如何在Vue SFC内使用外部模块？

1 个答案: