vue2使用ts vue-class-component

在Vue 2中使用TypeScript和vue-class-component可以让你以类的方式编写Vue组件，这样可以使用TypeScript的装饰器等特性。以下是一个简单的例子：

首先，确保你已经安装了vue-class-component和vue-property-decorator。

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

然后，你可以创建一个使用TypeScript和vue-class-component的Vue组件：

// MyComponent.vue
<template>
  <div>{{ message }}</div>
</template>
 
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
 
// @Component 装饰器将一个Vue组件类转换成一个Vue组件
@Component
export default class MyComponent extends Vue {
  // 定义数据属性
  message: string = 'Hello, Vue!';
 
  // 生命周期钩子可以直接作为方法
  mounted() {
    console.log('Component is mounted!');
  }
}
</script>

在这个例子中，我们定义了一个简单的Vue组件MyComponent，它有一个数据属性message和一个在组件挂载后执行的生命周期钩子。这个组件可以在其他Vue实例中像普通组件一样使用。