vue|vue + typescript（一）配置篇 vue+typescript（一）配置篇

1：引入Typescript

npm install vue-class-component vue-property-decorator --save

【vue|vue + typescript（一）配置篇】安装ts-loader

npm install ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev

vue-class-component 扩展vue支持typescript，将原有的vue语法通过声明的方式来支持ts
vue-property-decorator 基于vue-class-component扩展更多装饰器，例如：watch.ref,provide。所以这里其实只要安装vue-property-decorator也可以。
ts-loader 让webpack能够识别ts文件
tslint-loader以及tslint用来约束文件编码
tslint-config-standard tslint 配置 standard风格的约束

2：配置文件

webpack配置
根据项目的不同配置的地方不同，如果是vue cli 3.0创建的项目需要在vue.config.js中配置，如果是3.0以下版本的话，需要webpack.base.conf中配置。(以下说明是在webpack.base.conf文件中更改)
(1)在resolve.extensions中增加.ts，目的是在代码中引入ts文件不用写.ts后缀

resolve: { extensions: ['.js', '.vue', '.json', '.ts'], alias: {} },

(2)在module.rules中增加ts的rules

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

以下附上自己测试项目的vue.config.js配置

const path = require("path"); function resolve(dir) { return path.join(__dirname, dir); }module.exports = { lintOnSave: true, configureWebpack: { resolve: { extensions: ['.tsx', '.ts', '.mjs', '.js', '.jsx', '.vue', '.json', '.wasm'] } }, chainWebpack: config => { // 处理ts文件 (新增loader) config.module .rule('ts') .test(/\.tsx?$/) .exclude .add(resolve('node_modules')) .end() .use('cache-loader') .loader('cache-loader') .options({ cacheDirectory: resolve('node_modules/.cache/ts-loader') }) .end() .use('babel-loader') .loader('babel-loader') .end() .use('ts-loader') .loader('ts-loader') .options({ transpileOnly: true, // 关闭类型检查，即只进行转译(类型检查交给webpack插件(fork-ts-checker-webpack-plugin)在另一个进程中进行,这就是所谓的多进程方案,如果设置transpileOnly为false, 则编译和类型检查全部由ts-loader来做, 这就是单进程方案.显然多进程方案速度更快) appendTsSuffixTo: ['\\.vue$'], happyPackMode: false }) .end()// eslint 自动修复 (修改已经存在的loader) config.module .rule('eslint') .test(/\.(vue|(j|t)sx?)$/) .pre() // eslint是pre处理的 .use('eslint-loader') .loader('eslint-loader') .tap(options => { // 修改已经存在loader的配置 options.fix = true return options }) .end() } }

tsconfig.json配置
ts-loader会检索文件中的tsconfig.json.以其中的规则来解析ts文件，详细的配置可以参考https://www.tslang.cn/docs/handbook/tsconfig-json.html
贴上测试项目tsconfig.json文件

{ // 编译选项 "compilerOptions": { // 输出目录 "outDir": "./output", // 是否包含可以用于 debug 的 sourceMap "sourceMap": true, // 以严格模式解析 "strict": false, // 采用的模块系统 "module": "esnext", // 如何处理模块 "moduleResolution": "node", // 编译输出目标 ES 版本 "target": "es5", // 允许从没有设置默认导出的模块中默认导入 "allowSyntheticDefaultImports": true, // 将每个文件作为单独的模块 "isolatedModules": false, // 启用装饰器 "experimentalDecorators": true, // 启用设计类型元数据（用于反射） "emitDecoratorMetadata": true, // 在表达式和声明上有隐含的any类型时报错 "noImplicitAny": false, // 不是函数的所有返回路径都有返回值时报错。 "noImplicitReturns": true, // 从 tslib 导入外部帮助库: 比如__extends，__rest等 "importHelpers": true, // 编译过程中打印文件名 "listFiles": true, // 移除注释 "removeComments": true, "suppressImplicitAnyIndexErrors": true, // 允许编译javascript文件 "allowJs": true, // 解析非相对模块名的基准目录 "baseUrl": "./", // 指定特殊模块的路径 "paths": { "jquery": [ "node_modules/jquery/dist/jquery" ] }, // 编译过程中需要引入的库文件的列表 "lib": [ "dom", "es2015", "es2015.promise" ] } }