vue系列之vue cli 3引入ts

插件

  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教程(附实例代码和一键构建工具)

    原文作者:zhouzhou
    原文地址: https://segmentfault.com/a/1190000016954894
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞