Vue + Typescript - 使用基于类的装饰器导入错误

Question

我正在尝试使用 TypeScript 和基于类的组件设置 Vue 3。Component但是，我在将装饰器导入构造函数时不断出错Vue：

This expression is not callable. Type 'typeof

import("/Users/*folder*/node_modules/vue-class-component/dist/vue-class-component")'

has no call signatures. Vetur(2349)

我的代码.view:

<script>

import Vue from 'vue'

import Component from 'vue-class-component'

@Component // 1st Error '@Component'

export default class ProdItem extends Vue { // 2nd error 'Vue'

  

}

</script>

Answer 1

您可能会尝试使用官方文档中的示例vue-class-component，但该示例目前适用于 7x 版本，只能与 Vue 2 一起使用。Vue 3 需要vue-class-component 8x，尚未记录，但您可以参考描述更改的vue-class-componentIssue #406 。与您的问题相关的通知：@Component将重命名为@Options.@Options如果您不声明任何选项，则它是可选的。Vue构造函数由包提供vue-class-component。由于您的组件没有选项，您可以@Options从组件中省略装饰器：// BEFORE:import Component from 'vue-class-component'@Componentclass {}// AFTER:/* no options used, so no @Options decorator needed */class {}此外，Vue 3 不再导出 Vue 构造函数，而是vue-class-component导出了，因此您的组件将不得不扩展它：// BEFORE:import Vue from 'vue'// AFTER:import { Vue } from 'vue-class-component'作为参考，您可以使用Vue CLI 生成一个Vue 3 + TypeScript项目来运行一个使用vue-class-component上述最新版本的工作示例。

Answer 2

你可以做的：<script>import {vue} from 'vue-class-component'export default class ProdItem extends Vue {   }</script>

Answer 3

使用装饰器，您不需要({}). 尝试<script>import Vue from 'vue'import Component from 'vue-class-component'@Component&nbsp; // 1st Error '@Component'export default class ProdItem extends Vue { // 2nd error 'Vue'&nbsp;&nbsp;}</script>