vue项目使用typescript开发

一、手动配置的方式传送门

二、使用别人已经配置好的模板传送门

三、直接使用别的模板来构建项目

• 1、构建项目

  vue init SimonZhangITer/vue-typescript-template 项目名称

• 2、基本使用

  <template>
    <div>
      <div>{{info}}</div>
    </div>
  </template>
  
  <script lang="ts">
  import Vue from "vue";
  import Component from "vue-class-component";
  
  @Component
  export default class Test1 extends Vue{
    // 定义一个熟悉
    info: String = "hello";
  }
  
  </script>
  
  <style scoped>
  </style>

• 3、vue-ts的使用

  @Component
  export default class App extends Vue {
    name:string = 'Simon Zhang'
  
    // computed
    get MyName():string {
      return `My name is ${this.name}`
    }
  
    // methods
    sayHello():void {
      alert(`Hello ${this.name}`)
    }
  
    mounted() {
      this.sayHello();
    }
  }

• 4、引入组件的方式

  <script lang="ts">
  import Vue from "vue";
  import Component from "vue-class-component";
  
  import test1 from './test1.vue';
  
  @Component({
    components: {
      test1,
    }
  })
  export default class HelloWorld extends Vue {
    msg:string = 'Welcome to Your Vue.js App'
  }

• 5、父子组件传递参数

  <script lang="ts">
  import Vue from "vue";
  import Component from "vue-class-component";
  
  @Component({
    props: {
      msg: {
        type: String,
        default: '',
      }
    }
  })
  export default class Test1 extends Vue{
    info: String = "hello";
  }