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

Question

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

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

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

<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");

我看不出我的错误可能来自这小段代码的什么地方。没有任何其他组件、路由器或类似组件在任何地方导入。

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