Блог

Я пытаюсь создать новый проект с помощью Vue 3 и машинописного текста. Для этого я хочу использовать vue-свойство-декоратор, потому что мне нравится синтаксис класса с декораторами.

Я использовал интерфейс командной строки Vue для создания нового проекта Vue 3 TypeScript.

Теперь, если я попытаюсь добавить импорт vue-свойств-декоратора в компонент 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>
 

Сценарий-это всего лишь первый пример из документации модуля, скопированной в мое приложение.vue. Тогда мой main.ts выглядит так:

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

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

Я не понимаю, откуда в этом маленьком фрагменте кода могла взяться моя ошибка. Никакие другие компоненты, маршрутизатор или что-либо подобное нигде не импортируются.

Решает ли @Component вашу проблему добавление выше части «экспорт класса по умолчанию»?

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

РЕДАКТИРОВАТЬ: Ах, из того, что я вижу, vue-property-декоратор пока официально не поддерживает Vue 3. Однако есть версия-кандидат на выпуск (версия 10), которая его поддерживает.

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