17、vue-cli3 js项目中引入ts混用（typeScript）

说明：

vue3.0搭建的项目，不过没有引入ts，后来需要用到一个插件是用ts写的，所以vue要用到ts。。。

一、安装typescript及loader

npm install typescript ts-loader --save-dev

二、安装vue-property-decorator

npm install vue-property-decorator --save-dev

三、配置vue.config.js

configureWebpack: {
resolve: { extensions: [".ts", ".tsx", ".js", ".json"] },
module: {
rules: [
{
test: /.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/.vue$/],
}
}
]
}
}

var path = require('path');
module.exports = {
  outputDir:'vuecli3',
  publicPath: './',
  devServer: {
    // 设置主机地址
    host: 'localhost',
    // 设置默认端口
    // port: '8080',
    // 打开浏览器
    open: true,
    port: 9000,
    // 设置代理
    // proxy: {
    //   '/api': {
    //     target: 'http://localhost:8081',
    //     pathRewrite: {
    //       '^/api': '/mock'
    //     }
    //   }
    // }
  },
  configureWebpack: {
    resolve: { extensions: [".ts", ".tsx", ".js", ".json"] },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: 'ts-loader',
          exclude: /node_modules/,
          options: {
            appendTsSuffixTo: [/\.vue$/],
          }
        }
      ]
    }
  }
}

四、新建tsconfig.json放在项目根目录

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

五、在src目录下新建vue-shim.d.ts文件

不加此文件会报错。。

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

六、运行测试

<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: {
    // TableCom
  },
  data() {
    return {
      msg:'typescript'
    };
  },
  created(){
    console.log('created',this.msg)
  },
  mounted() {
    console.log('mounted')
  },
  computed:{
    // test: {
    //   // 需要标注有 `this` 参与运算的返回值类型
    //   get(): string {
    //     return this.msg
    //   },
    //   set(val: string) {
    //     this.msg = val
    //   }
    // }
    test(): any {
      return this.msg
    }
  },
  watch:{
    msg(val:any){
      console.log('watch',val)
    }
  },
  methods:{
    msgBtn(ev:any){
      this.msg = "点击了typescript"
      console.log('点击事件',ev)
    }
  }
})

</script>