vue-cli中引用ts

安装typescript及loader

• npm 安装包依赖

npm install typescript ts-loader --save-dev

• 修改extensions
  位置 build/webpack.base.conf.js
  自动补全的扩展名

extensions: ['.js', '.vue', '.json', '.ts'],

修改rules
位置 build/webpack.base.conf.js
loader

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

声明vue模块

为每个文件声明全局模块.vue，这样每个单文件组件就可以被自动被声明了。
在src目录下新建文件 typings/vue.d.ts：

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

新建tsconfig.json

位置 根目录

{
  "compilerOptions": {
    "jsx": "preserve",
    "lib": [
      "dom",
      "es5",
      "es2015",
      "es2015.promise"
    ],
    "allowJs": false,
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "isolatedModules": false,
    "declaration": false,
    "noImplicitAny": true,
    "removeComments": true,
    "strictNullChecks": true,
  },
  "compileOnSave": false
}

将js改为ts

将.js后缀改为.ts
.vue单文件组间中 script lang ='ts'
修改入口文件

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