[聚合文章] vue-cli 中使用 TypeScript

学以致用，这篇文章是对在 vue-cli 中使用 TypeScript 的一次小结。

环境

npm

// typescriptnpm install typescript --save-dev// ts-loadernpm install ts-loader --save-dev

webpack.base.conf.js

module.exports = {  // 修改入口文件  entry: './src/main.ts',  // 引入 ts/tsx 文件时不必后缀   resolve: {    extensions: ['.js', '.vue', '.json', '.ts', '.tsx'],    alias: {      'vue$': 'vue/dist/vue.esm.js',      '@': resolve('src'),    }  },  module: {    // 对 ts 使用 ts-loader    {      test: /\.tsx?$/,      exclude: /node_modules/,      use: [        "babel-loader",        {          loader: "ts-loader",          options: { appendTsxSuffixTo: [/\.vue$/] }        }      ]    }    // ...其他  }}

创建一个 .d.ts 文件让 TypeScript 识别 .vue 文件，在此项目中，我放到了 src/typings 文件夹下：

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

根目录下添加 tsconfig.json 配置文件，配置参数参考：https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Compiler%20Options.html ，项目内有一份配置，就不贴出来了。

JavaScript 校验

很遗憾，如果你使用 TypeScript，在vue-cli(2.9.1) 里并不能使用 ESlint 校验 .vue 文件了，很常见的一个报错：

注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。