vue引入ts文件并监听

1. 安装依赖：

npm install --save-dev typescript ts-loader

2. 在项目根目录下创建 `tsconfig.json` 文件：

{
  "compilerOptions": {
    "outDir": "./dist/",
    "module": "es6",
    "target": "es5",
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

3. 在 `vue.config.js` 中添加配置：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('ts')
      .test(/\.tsx?$/)
      .use('ts-loader')
      .loader('ts-loader')
      .options({
        appendTsSuffixTo: [/\.vue$/]
      })
  }
}

4. 在 `.vue` 文件中引入 `ts` 文件：

<template>
  <div>{{ message }}</div>
</template>

<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator'
  import HelloWorld from '@/components/HelloWorld.vue'

  @Component({
    components: {
      HelloWorld
    }
  })
  export default class App extends Vue {
    message: string = 'Hello World!'
  }
</script>

5. 运行 `npm run serve` 即可。