vuecli3中使用typescript

• 下载安装依赖包

// vue组件中使用ts,以及prop,watch等的使用
npm i vue-class-component vue-property-decorator --save
// ts语法相关,lint代码格式相关
npm i ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev

• vue.config.js的配置（webpack配置）

// module.exports中属性
    configureWebpack: { // webpack 配置
        entry:{  // 改变入口文件
            app:'./src/main.ts'
        },
        resolve:{  // 组件中识别后缀
            extensions:['ts','vue','js','css'],
            alias: {
                '@': path.resolve(__dirname, './src')
            }
        },
        module:{  // 添加loader，解析
            rules: [{
                    test: /\.ts$/,
                    exclude: /node_modules/,
                    enforce: 'pre',
                    loader: 'tslint-loader'
                },
                {
                    test: /\.tsx?$/,
                    loader: 'ts-loader',
                    exclude: /node_modules/,
                    options: {
                        appendTsSuffixTo: [/\.vue$/],
                    }
                }
            ]
        }
    },

• 文件

1. 根目录添加tsconfig.json，自行更改配置

{
  // 编译选项
  "compilerOptions": {
    // 输出目录
    "outDir": "./output",
    // 是否包含可以用于 debug 的 sourceMap
    "sourceMap": true,
    // 以严格模式解析
    "strict": true,
    // 采用的模块系统
    "module": "esnext",
    // 如何处理模块
    "moduleResolution": "node",
    // 编译输出目标 ES 版本
    "target": "es5",
    // 允许从没有设置默认导出的模块中默认导入
    "allowSyntheticDefaultImports": true,
    // 将每个文件作为单独的模块
    "isolatedModules": false,
    // 启用装饰器
    "experimentalDecorators": true,
    // 启用设计类型元数据（用于反射）
    "emitDecoratorMetadata": true,
    // 在表达式和声明上有隐含的any类型时报错
    "noImplicitAny": false,
    // 不是函数的所有返回路径都有返回值时报错。
    "noImplicitReturns": true,
    // 从 tslib 导入外部帮助库: 比如__extends，__rest等
    "importHelpers": true,
    // 编译过程中打印文件名
    "listFiles": true,
    // 移除注释
    "removeComments": true,
    "suppressImplicitAnyIndexErrors": true,
    // 允许编译javascript文件
    "allowJs": true,
    // 解析非相对模块名的基准目录
    "baseUrl": "./",
    // 指定特殊模块的路径
    "paths": {
      "jquery": [
        "node_modules/jquery/dist/jquery"
      ]
    },
    // 编译过程中需要引入的库文件的列表
    "lib": [
      "dom",
      "es2015",
      "es2015.promise"
    ]
  }
}

2. 添加tslint.json

{
  "extends": "tslint-config-standard",
  "globals": {
    "require": true
  }
}

3. 在项目目录（即src）下添加vue-shim.d.ts

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

4. main.js改为main.ts

• 修改vue文件

<template>
    <div class="demo">
        <button @click="btnClick">{{msg}}</button>
        {{msgComp}}
    </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component, Emit, Inject, Model, Prop, Provide, Watch } from 'vue-property-decorator'
@Component
export default class App extends Vue{
    msg:number=1;
    
    @Prop()
    propA:string;

    //监听watch
    @Watch('msg')
    hand(){
        alert(this.msg)
    }

    created(){
        alert(1)
    };

    btnClick(){
        this.msg+=1;
    }
    // 计算属性
    get msgComp():number{
        return this.msg+5
    }

}
</script>

关于vue-property-decorator的相关语法，请参考https://www.npmjs.com/package/vue-property-decorator

--END--