vue2+ts页面结构

在Vue 2和TypeScript中，页面结构的一般做法是使用单文件组件（Single File Components，SFC）的方式来组织代码。一个单文件组件通常由三个部分组成：模板（template）、脚本（script）和样式（style）。

下面是一个简单的示例：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

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

@Component
export default class MyComponent extends Vue {
  message: string = 'Hello, Vue!';

  changeMessage(): void {
    this.message = 'Message changed!';
  }
}
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

在这个示例中，`<template>` 部分包含了组件的HTML模板，可以使用Vue的模板语法来动态绑定数据和处理事件。`<script>` 部分是组件的脚本部分，使用TypeScript编写，并使用 `@Component` 装饰器来声明组件。`<style>` 部分是组件的样式，使用CSS来定义。

在编写这个示例时，需要安装相应的依赖包。可以使用Vue CLI来创建一个Vue项目，并选择TypeScript作为预设选项，然后就可以开始编写单文件组件了。

另外，需要注意的是，在使用Vue 2和TypeScript时，可以选择使用 `vue-class-component` 和 `vue-property-decorator` 这两个库来简化组件的编写和装饰器的使用。上面示例中的代码就使用了这两个库。