带有Vue 3+ vue-property-decorator的“超级表达式必须是null或函数”

Question

我正在尝试使用Vue 3和TypeScript创建一个新项目。为此，我想使用vue-property-decorator，因为我喜欢带有Decorators的类语法。

我使用Vue CLI创建了一个新的Vue 3+ TypeScript项目。

现在，如果我尝试将vue-property-decorator导入添加到Vue组件中，在浏览器控制台中会得到错误消息“超级表达式必须为null或函数”。我的组件如下所示：

<template>
   <div>Hi</div>
</template>

<script lang="ts">
import { Vue, Prop } from "vue-property-decorator";

export default class App extends Vue {
   @Prop(Number) readonly propA: number | undefined;
   @Prop({ default: "default value" }) readonly propB!: string;
   @Prop([String, Boolean]) readonly propC: string | boolean | undefined;
}
</script>

该脚本只是模块文档中的第一个示例，将其复制粘贴到我的App.vue中。然后我的main.ts看起来像这样：

import { createApp } from "vue";
import App from "./App.vue";

createApp(App).mount("#app");

我不知道这小段代码中我的bug可能来自哪里。任何地方都不会导入任何其他组件、路由器或类似组件。

Answer 1

在“导出默认类”部分上添加@Component可以解决您的问题吗？

import { Vue, Prop, Component } from "vue-property-decorator";
@Component
export default class App extends Vue {

编辑:啊，据我所知，vue-property-decorator还没有正式支持Vue 3。不过，有一个发布候选版本(版本10)支持它。

https://github.com/kaorun343/vue-property-decorator/blob/next/CHANGELOG.md