vue2.0混用ts改造1：基础配置

 基本步骤大差不大，唯一区别是修改vue.config.js 的 configureWebpack 方法

1. 安装依赖

   npm install typescript ts-loader vue-property-decorator --save-dev
   

2. 配置vue.config.js

   // 方案一 module.exports = { configureWebpack: {
   resolve: { extensions: [".ts", ".tsx", ".js", ".json"] },
   module: {
   rules: [
   {
   test: /.tsx?/, loader: 'ts-loader', exclude: /node_modules/, options: { appendTsSuffixTo: [/\.vue/],
   }
   }
   ]
   }
   } } //方案二 module.exports = { configureWebpack: (config) => { // 这里的config 传入的是webpack的整体配置 config.resolve.extensions.push('.ts') config.module.rules.push({ test: /.tsx?/, loader: 'ts-loader', exclude: /node_modules/, options: { appendTsSuffixTo: [/\.vue/],
   }
   }) }, }

3.根目录下新建 tsconfig.json

{  "compilerOptions": {    "target": "es5",    "module": "commonjs",    "strict": true,    "strictNullChecks": true,    "esModuleInterop": true,    "experimentalDecorators": true  }}

4. src 下 新建 vue-shim.d.ts

declare module "*.vue" {  import Vue from "vue";  export default Vue;}

5. 测试代码，新建一个页面，复制下列代码，能展现，恭喜你，你获得了一个ts 和 js 并存的项目雏形

<template>    
    <div>        
        <el-button type="primary" @click="msgBtn">{{msg}}</el-button> 
        <el-card shadow="always"> 
            {{test}}        
        </el-card>    
    </div>
</template>
<script lang='ts'>
import { Component, Vue } from "vue-property-decorator"; 
export default Vue.extend({  
    components: {      },  
    data() {    
        return {      
            msg:'typescript'    
        };  },  
    computed:{    
        test(): any {      
            return this.msg    
        }  
    }, 
    watch:{   
         msg(val:any){
               console.log('watch',val)
            }  
    },  
    methods:{    
        msgBtn(ev:any){      
            this.msg = "更改了typescript"      
            console.log('点击事件',ev)    
        }  
    }
}) 
    
</script>