vue之typescript配置和使用

目前笔者在找前端工程师工作（vue方向），发现许多公司都要求会使用TypeScript，花了一点时间把TypeScript看完了，今天将介绍vue中typescript使用

第一步，在创建项目时选中typescript，如下： 第二步，在安装装饰器来简化书写

npm install vue-class-component vue-property-decorator

第三步，改写代码，将创建初始项目里面HelloWorld.vue里面写个简单计数器，代码如下：

<template> <div class="hello"> <h1>{{ msg }}</h1> <button @click="decrement"> - </button> {{count}} <button @click="increment"> + </button> </div> </template> <script lang="ts"> import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator"; @Component export default class HelloWorld extends Vue { public count:Number = 0 @Prop() private msg: String | undefined public increment ():void { this.count++ } public decrement ():void { this.count-- } } </script>

第四步，改写Home.vue

<template> <div class="home"> <HelloWorld msg="vue from TypeScript"/> </div> </template> <script lang="ts"> import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator"; import HelloWorld from '@/components/HelloWorld.vue' @Component({ components: { HelloWorld }, beforeRouteLeave(to: any, from: any, next: any) { console.log('beforeRouteLeave'); next(); }, beforeRouteEnter(to: any, from: any, next: any) { console.log('beforeRouteEnter'); next(); } }) export default class Home extends Vue { } </script>

本文章只是简单说明vue中使用typescript，装饰器还有许多用法，可自行查阅