vue2项目改造成Ts

ps：研究阶段

你如果没问题的，直接vue create一个不是默认版本的吧，还方便

一代版本：一口气设置完

（无法修改main.js因为，main.js是vue-cli的启动文件，需要修改配置了）

1、主要注意Ts的版本，install一下

 "ts-loader": "^4.4.2",
 "tslint": "^6.1.3",
 "tslint-config-standard": "^9.0.0",
 "tslint-loader": "^3.5.4",
 "typescript": "^3.5.2",
 "vue-property-decorator": "^9.1.2",
 "vue-class-component": "^7.2.6",
 "vue-template-compiler": "^2.6.11"

2、在src下，创建一个vue-shim.d.ts 文件，因为要在vue文件中使用，所以把vue的lang=“ts”交出去

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

3、vue.config.js中设置

var path = require('path');
module.exports = {

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

4、和vue.config.js同级，创建tsconfig.json，这个应该是为了，

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["*", "src/*"]
    },
    "jsx": "preserve",
    "jsxFactory": "h",
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "module": "esnext",
    "target": "es5",
    "moduleResolution": "node",
    "isolatedModules": true,
    "lib": ["dom", "es5", "es6", "es7", "es2015.promise"],
    "sourceMap": true,
    "pretty": true,
    "typeRoots": ["src/types"]
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

5、App.vue中就可以用了

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

</script >

二代版本：

在改造中，如果有问题可以私信我，每天早晨我都会看私信，共同学习，共同进步呀