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

Question

我正在尝试使用 TypeScript 和基于类的组件设置 Vue 3。Component但是，我在将装饰器导入构造函数时不断出错Vue：This expression is not callable. Type 'typeofimport("/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'

@Component

class {}

// 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  // 1st Error '@Component'

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

  

}

</script>