使用vue-property-decorator配置Vue+TS类风格失败，生成脚本不符预期

1. 确保依赖安装到位 #

首先确认项目已安装vue-property-decorator及其依赖vue-class-component，执行以下命令：

npm install vue-property-decorator vue-class-component --save

2. 手动修改现有组件为类风格 #

将已生成的组件脚本替换为预期的类风格写法：

原生成代码 #

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  
})
</script>

修改后的代码 #

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

@Component({
  components: {},
})
export default class App extends Vue {

}
</script>

3. 配置Vue CLI让新建组件默认生成类风格（可选） #

如果使用Vue CLI创建项目，可通过自定义模板实现新建组件自动生成类风格脚本：

• 在项目根目录创建.vue-cli/templates/component/script.ts文件
• 写入以下模板内容：

import { Component, Vue } from 'vue-property-decorator';

@Component({
  components: {},
})
export default class {{ properCase name }} extends Vue {

}

之后使用vue generate component命令新建组件时，就会自动生成符合预期的类风格TS脚本。

4. 检查TypeScript配置 #

确保tsconfig.json中开启装饰器支持，关键配置如下：

{
  "compilerOptions": {
    // 其他配置...
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

内容的提问来源于stack exchange，提问作者Raziyeh Jedari