安裝ts依賴
添加ts配置
配置webpack
改造.vue
改造Vue-router

安裝ts依賴

npm install ts-loader typescript --save-dev

npm vue-class-component --save

• ts-loader: typescript for webpack, 讓webpack識別.ts,.tsx文件;
• typescript: intalling for using typescript;
• vue-class-component: Typescript decorator for class-style Vue components

添加ts配置

在項目根目錄添加tsconfig.json配置文件，來指定ts編譯的一些參數信息,ts給出其定義文件。

{
  "compilerOptions": {
    "lib": ["dom", "es5", "es2015", "es7", "es2015.promise"],
    "target": "es5",
    // "module": "es2015",
    "module": "esnext",
    "moduleResolution": "node",
    "sourceMap": true,
    "experimentalDecorators": true,
  },
  "include": [
      "src/**/*.ts",
      "src/**/*.vue"
  ],
  "exclude": [
      "node_modules",
      "./dist",
      "./static"
  ]
}

include: 編譯時所包含的文件

exclude: 編譯時所排除的文件

compilerOptions: 指定typesctipt編譯器如何編譯.ts文件

• module: 指定模塊代碼的生成方式：'none', 'commonjs', 'amd', 'system', 'umd', 'es2015' or 'esnext'。
  vue-router懶加載使用到了動態加載模塊，為es6以后版本的特性（TODO:查明是哪個版本）,所以本配置為：esnext;
• experimentalDecorators: Enables experimental support for ES7 decorators。我們上文用了typescript decorator,所以本配置設置為：true;
• target: 編譯后ECMAScript的目標版本，與vue的瀏覽器支持保持一致;

webpack配置

找到webpack.base.conf.js，更改其中的配置。

entry配置

將入口文件改為'./src/main.ts',同時將main.js的擴展名改為.ts

  entry: {
    app: './src/main.ts'
  },

resolve.extension配置

在resolve.extensions數組中添加.ts，從而在引入ts文件時可以不寫.ts后綴名

  resolve: {
    extensions: ['.ts','.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

module配置

References

• https://cn.vuejs.org/v2/guide/typescript.html