vue系列之vue cli 3引入ts

<h1>插件</h1> <a href="http://www.jqhtml.com/26285.html" target="_blank">Vue2.5+ Typescript 引入全面指南</a> <ol> <li> <a href="https://github.com/vuejs/vue-class-component" rel="nofollow noreferrer">vue-class-component</a><br>强化 Vue 组件，使用 TypeScript/装饰器增强 Vue 组件</li> <li> <a href="https://github.com/kaorun343/vue-property-decorator" rel="nofollow noreferrer">vue-property-decorator</a><br>在 vue-class-component 上增强更多的结合 Vue 特性的装饰器</li> <li> <a href="https://github.com/ktsn/vuex-class" rel="nofollow noreferrer">vuex-class</a><br>基于vue-class-component对Vuex提供的装饰器</li> </ol> <h2>vue-class-component</h2>


&lt;script lang="ts"&gt;
  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)
    }
  }
&lt;/script&gt;

<h1>改造.vue</h1> <ol> <li><script>标签添加lang="ts"声明</li> <li>代码中导入 *.vue 文件的时候，需要写上 .vue 后缀</li> </ol> <blockquote>原因还是因为 TypeScript 默认只识别 <em>.ts 文件，不识别 </em>.vue 文件<br>import Component from 'components/component.vue'</blockquote> <hr> <p>参考链接：<br><a href="https://segmentfault.com/a/1190000011520912">从 JavaScript 到 TypeScript 6 - Vue 引入 TypeScript</a><br><a href="https://segmentfault.com/a/1190000011853167">Vue2.5+ Typescript 引入全面指南</a><br><a href="https://segmentfault.com/a/1190000012486378">可能是最全的Vue-TypeScript教程(附实例代码和一键构建工具)</a></p>

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

来源：oschina

链接：https://my.oschina.net/u/4398168/blog/3712095

标签

typescript

github

vuex

Vue CLI

Vue.js