如何在vue中使用ts开发

用了这么久的vue，终于踏出第一步使用ts去开发，发现真的是一时用ts一时爽，一直用ts一直爽。所以今天大概说一下怎么用ts简单开发。

1.首先，更改一下webpack配置

需要注意一点的是在导入vue文件的时候，要写上.vue后缀，因为TypeScript默认识别ts文件。

2. 改造一下vue文件

src/app.vue

 [lang="ts"，让webpack把这段代码识别为ts，除了需要改造一下script标签内的内容，其他地方都无需修改]

<template>  
    <div id="app">    
        <router-view></router-view>  
    </div>
</template>

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    @Componentexport 
    default class App extends Vue {  
        private created() {    
            // 不需要保持当前路由，则前往首页    
            if (!location.hash.includes('keepRoute=true')) {      
                this.$router.push({ path: '/' });    
            }  
         }}
</script>

<style>
@import "./assets/css/main.css";
@import "./assets/css/color-dark.css"; /*深色主题*/
</style>复制代码

下面举例一下常用的装饰器使用

<script lang="ts">
import Test from './test.vue';
import { Component, Prop, Provide, Vue, Watch  } from 'vue-property-decorator';
// 引入组件 即使没有使用组件也得书写 @Component，里面为空即可。
@Component({    
    components: {      
        Test    
    },  
})

 export default class Home extends Vue {
  // Prop  
    @Prop({}) private config: object = {};

  // data   
    private side: boolean = false;
    private list: object = {};
  
 //  Watch
    @Watch('config')  
    onConfigChanged(val: any, oldVal: any) {    
        this.init();  
    }}

  // 生命周期
    private created(){
        this.init();
    }

  // 方法
    private init(){
        console.log('halo');
    }
</script>复制代码

其他的文件也是参照方式去修改即可。

最后重新运行就行了。