vue与TypeScript集成配置最简教程

vue与TypeScript集成配置最简教程

前言

Vue的官方文档没有给出与TypeScript集成的具体步骤，网上其他的教程不是存在问题就是与vue-cli建立的项目存在差异，让人无从下手。

下面我就给出vue-cli建立的项目与TypeScript集成的最简配置。

初始化项目

首先用vue-cli建立webpack项目。这里为了演示方便，没有打开router和eslint等，可以根据自身情况打开。

# vue init webpack vue-typescript

? Project name vue-typescript
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

安装TypeScript相关依赖和项目其余依赖，用npm或cnpm

# cd /vue-typescript
# npm install typescript ts-loader --save-dev
# npm install

配置

修改目录下bulid/webpack.base.conf.js文件，在文件内module>rules添加以下规则

{
  test: /\.tsx?$/,
  loader: 'ts-loader',
  exclude: /node_modules/,
  options: {
    appendTsSuffixTo: [/\.vue$/],
  }
},

在src目录下新建一个文件vue-shims.d.ts，用于识别单文件vue内的ts