vue使用ts 引入组件_vue项目中使用ts（typescript）入门教程

最近项目需要将原vue项目结合ts的使用进行改造，这个后面应该是中大型项目的发展趋势，看到一篇不错的入门教程，结合它并进行了一点拓展记录之。本文从安装到vue组件编写进行了说明，适合入门。

1、引入Typescript

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

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扩展更多装饰器

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文件中更改)

在resolve.extensions中增加.ts，目的是在代码中引入ts文件不用写.ts后缀

resolve: {

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

alias: {}

}

在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$/]

}

}

]

}

tsconfig.json配置

ts-loader会检索文件中的