安装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