vue系列之vue cli 3引入ts

插件

Vue2.5+ Typescript 引入全面指南

1. vue-class-component
   強化 Vue 組件，使用 TypeScript/裝飾器 增強 Vue 組件
2. vue-property-decorator
   在 vue-class-component 上增強更多的結合 Vue 特性的裝飾器
3. vuex-class
   基於vue-class-component對Vuex提供的裝飾器

vue-class-component

<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'

  @Component
  export default class App extends Vue {
    // 初始化數據
    msg = 123

    // 聲明周期鈎子
    mounted () {
      this.greet()
    }

    // 計算屬性
    get computedMsg () {
      return 'computed ' + this.msg
    }

    // 方法
    greet () {
      alert('greeting: ' + this.msg)
    }
  }
</script>

改造.vue

1. <script>標簽添加lang="ts"聲明
2. 代碼中導入 *.vue 文件的時候，需要寫上 .vue 后綴

原因還是因為 TypeScript 默認只識別 .ts 文件，不識別 .vue 文件
import Component from 'components/component.vue'

---

參考鏈接：
從 JavaScript 到 TypeScript 6 - Vue 引入 TypeScript
Vue2.5+ Typescript 引入全面指南
可能是最全的Vue-TypeScript教程(附實例代碼和一鍵構建工具)

原文地址：https://segmentfault.com/a/1190000016954894