脚本宝典收集整理的这篇文章主要介绍了vue-cli 中使用 TypeScript,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
学以致用,这篇文章是对在 vue-cli 中使用 TyPEScript 的一次小结。
npm
// typescript
npm install typescript --save-dev
// ts-loader
npm 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/t... ,项目内有一份配置,就不贴出来了。
很遗憾,如果你使用 TypeScript,在vue-cli(2.9.1) 里并不能使用 ESlint 校验 .vue 文件了,很常见的一个报错:
在 .vue 文件内,并不识别 .d.ts 声明文件内的类型。
ESlint 不能用,TSlint 怎么样?
折腾了一会,在 .vue 文件内也有坑(可能是功力不够),最后决定先放弃。
webpack.base.conf.js
由于在 Vue 中使用 TypeScript 还不是很普及,大部分插件都缺少声明文件:
此时必须添加新声明。
不过还好,Vue, Vue Router, Vuex, Element,都提供了相应的声明文件。
当然,首先要让 webpack 识别为 TypeScript 而不是 JavaScript,在 script 标签上加上 lang="ts":