目录

上节： 手动配置vue-cli下

上节目录：

本节给之前配的vue-cli集成ts，让它支持ts + vue的开发。
首先修改build/webpack.base.js:

const HTMLPlugin = require('html-webpack-plugin');const VueLoaderPlugin = require('vue-loader/lib/plugin');const {resolve} = require('path');module.exports = {  entry: resolve(__dirname, '../src/main.ts'),  resolve: {    // 这里可以配置些文件后缀，用于写路径时可省略后缀（会影响打包速度，不建议配太多）    extensions: [ '.tsx', '.ts', '.js', 'vue', 'less' ]  },  module: {    rules: [{      // 识别.vue文件      test: /\.vue$/,      loader: 'vue-loader'    }, {      // 识别.ts或.tsx文件      test: /\.tsx?$/,      use: 'ts-loader'    }, {      // 用于识别vue文件中的script块      test: /\.js$/,      loader: 'babel-loader',    }, {      test: /\.(gif|jpg|jpeg|png|svg|ttf|woff)$/,      loader: 'url-loader'    }]  },  plugins: [    new HTMLPlugin({      template: resolve(__dirname, '../index.html')    }),    // 将定义过的其它规则复制并应用到 .vue 文件里相应语言的块    new VueLoaderPlugin()  ]};

在rule里加了ts规则后，通过VueLoaderPlugin也能将其用于.vue文件

然后根目录下新建tsconfig.json:

{  "compilerOptions": {    "target": "es5",    "module": "esNext",    // "strict": true,    "strictPropertyInitialization": false,    "strictNullChecks": false,    "noImplicitAny": false,    "jsx": "preserve",    "importHelpers": true,    "moduleResolution": "node",    "experimentalDecorators": true,    "esModuleInterop": true,    "allowSyntheticDefaultImports": true,    "sourceMap": true,    "baseUrl": ".",    /*"types": [      "webpack-env"    ],*/    "paths": {      "@/*": [        "src/*"      ],      "*": [        "src/*"      ]    },    "lib": [      "esNext",      "dom",      "dom.iterable",      "scripthost",      "es2015.promise"    ]  },  "include": [    "src/**/*.ts",    "src/**/*.tsx",    "src/**/*.vue",    "tests/**/*.ts",    "tests/**/*.tsx"  ],  "exclude": [    "node_modules"  ]}

这是ts的配置文件，不熟的话可以复制上面的，具体选项参考官网

然后要给vue写一下类型声明，src下新建shims-vue.d.ts
src/shims-vue.d.ts:

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

如果你要写tsx语法的话再新建shims-tsx.d.ts
src/shims-tsx.d.ts:

import Vue, { VNode } from 'vue'declare global {  namespace JSX {    // tslint:disable no-empty-interface    interface Element extends VNode {}    // tslint:disable no-empty-interface    interface ElementClass extends Vue {}    interface IntrinsicElements {      [elem: string]: any    }  }}

然后改一下App.vue，把ts部分改成外部引入的:
src/App.vue:

<template>  <div class="app">    <h1>hello {{msg}}</h1>  </div></template><script lang="ts" src="./App.ts"></script><style scoped lang="less">.app{  h1{    color: #f60;  }}</style>

src下新建App.ts:

import { Component, Vue } from "vue-property-decorator";  @Component({    name: "App"  })  export default class App extends Vue {    msg = 'webpack4'  }

将src/main.js改成main.ts, 现在目录大致如下：

然后安装依赖：
npm i typescript ts-loader vue-class-component vue-property-decorator -D

然后npm run dev，打开浏览器:

试下npm run build应该也能成功打包：

下节：vue-cli与vue-loader介绍(待更新)