总结|vue项目接入TS

背景：vue2项目接入ts落地

安装包

npm install typescript --save-dev  // 4.1.3
npm install ts-loader --save-dev // 8.0.14
npm install tslint --save-dev  // 6.1.3
npm install tslint-loader --save-dev // 3.5.4
npm install tslint-config-standard --save-dev // 9.0.0
npm install vue-property-decorator --save-dev // 9.1.2

修改配置文件
添加ts加载器
base.js

entry: {
  app： './src/mian.ts' // 入口文件， 旧main.js
}
reslove: {
  extensions: ['.js', 'ts', '.vue', '.json'] // 引入模块时不带扩展
}
module: {
  rules: [
    {
      test: /\.ts$/,
      exclude: /node_modules/,
      enforce: 'pre',
      loader: 'tslint-loader'
    },
    {
      test: /\.tsx?$/,
      loader: 'ts-loader',
      exclude: /node_modules/,
      options: {
        appendTsSuffixTo: [/\.vue$/]
      }
    },
  ]
}

main.ts

错误Cannot read property ‘install’ of undefined at Function.Vue.use

ts配置文件

tslint 配置文件

声明全局变量、class、module、function、命名空间

shims-vue.d.ts

declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}
declare module 'vue/types/vue' {
  interface Vue {
    $notify:  any
  }
}
declare var window: any

shims-tsx.d.ts

import Vue, { VNode } from 'vue';
declare global {
  namespace JSX {
    // tslint:disable no-empty-interface
    interface Element extends VNode {}
    // tslint:disable no-empty-interface
    interface ElementClass extends Vue {}
    interface IntrinsicElements {
      [elem: string]: any;
    }
  }
}

参考：
转转vue接入ts