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

我会带着你远行 2021-11-26 12:10 977阅读 0赞

#### 说明： ####

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

### 一、安装typescript及loader ###

> npm install typescript ts-loader --save-dev

![image][]

### 二、安装vue-property-decorator ###

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

![image][image 1]

### 三、配置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$/],
              }
            }
          ]
        }
      }
    }

![image][image 2]

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

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

![image][image 3]

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

不加此文件会报错。。

![image][image 4]

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>

![image][image 5]

![image][image 6]

转载于:https://www.cnblogs.com/zhongchao666/p/11207117.html

[image]: /images/20211126/fc30a74d93ab4bbcac4c551692711ba4.png
[image 1]: /images/20211126/2de8c668d36d4977820f571fde18e02c.png
[image 2]: /images/20211126/8d67c49af32c4d37b73731dffa74a00c.png
[image 3]: /images/20211126/25432a3e2c9e4fb3a8107285e7c94cef.png
[image 4]: /images/20211126/b19fa679a9a0482690d69f366379b3cf.png
[image 5]: /images/20211126/b9f54c5f55474b5fba00a54a5584cc54.png
[image 6]: /images/20211126/895a1c7207054340853434bb797a3524.png