Vue2 Vue-cli中使用Typescript的配置详解
前言
因为最近公司的团队热衷于vue框架，新项目想着练练typescript，于是开始了vue+ts的踩坑之路...本文意在为和我有一样想法的伙伴们省去踩坑的时间，下面话不多说了，来一起看看关于Vue2Vue-cli中利用Typescript需要的配置是什么吧。
一、初步配置
首先安装官方插件vue-class-component，vue-property-decorator，配置webpack。
webpack配置如下：
修改入口文件
entry:{
app:'./src/main.ts'
}
resolve部分：
extensions:['.js','.vue','.json','.ts','.tsx']
配置loader
{
test:/\.tsx?$/,
loader:'ts-loader',
exclude:/node_modules/,
options:{
appendTsSuffixTo:[/\.vue$/],
}
}
配置tsconfig.json
{
"include":[
"src/**/*"
],
"exclude":[
"node_modules"
],
"compilerOptions":{
"allowSyntheticDefaultImports":true,
"experimentalDecorators":true,
"allowJs":true,
"module":"es2015",
"target":"es5",
"moduleResolution":"node",
"experimentalDecorators":true,
"isolatedModules":true,
"lib":[
"dom",
"es5",
"es2015.promise"
],
"sourceMap":true,
"pretty":true
}
}
二、实战！
配好配置只是第一步，在项目里跑起来才是王道。
在vue文件的script标签里添加lang='ts'
因为ts-loader不像配过loader的webpack一样知道vue,html等文件是什么东西，你跑起来后会报模块无法解析的错误，所以还需要配置.d.ts声明文件
vue的如下配置
declaremodule"*.vue"{
importVuefrom'vue';
exportdefaultVue;
}
你也可以为其它的非js模块配置.d.ts文件如html（告诉ts-loader把html理解成字符串）
declaremodule"*.html"{
lettemplate:string;
exportdefaulttemplate;
}
配置好之后ts就能理解这些模块了
从vue-property-decorator引入需要用到的模块
（一般只用到Component,Vue,Watch,Prop这四个，其它3个没用到也没研究，知道的大佬可以解释下。）
import{Component,Vue,Watch}from'vue-property-decorator'
这里拿之前写的sidbar的代码当个栗子：
classHoverTopElem{
leaveTop:number=-200
top:number=null
height:number=null
show(e){
this.top=e.target.getBoundingClientRect().top
this.height=e.target.clientHeight
}
hidden(){
this.top=this.leaveTop
}
}
@Component({
name:'sidebar',
template:template,
components:{
sidebarItem
}
})
exportdefaultclassSidebarextendsVue{
SidebarMenu:any=SidebarMenu
hoverTopElem:HoverTopElem=newHoverTopElem()
activeListItemName:string=null
activeRouteItemRoute:string=null
get_activeRouteItemRoute():string{
returnthis.$route.path
}
@Watch('_activeRouteItemRoute',{immediate:true})
onRouteChanged(val:any){
this.activeRouteItemRoute=val
}
changeList(param){
this.activeListItemName=param
}
changeRoute(param){
this.activeRouteItemRoute=param
}
}
元数据写在@Component配置里，像名字，用到的组件啥的，然后说下之前vue里用到的各个实例属性方法在这里怎么用：
data:这个是最常用的，像上面的SidebarMenu（这里一共声明了4个），注意这里声明的变量一定要赋一个值，没有就null,不能是undefined，不然这个数据就不是响应的。因此HoverTopElem类里的属性也是要有初始值，不然这些属性也不是响应的
computed:这里就是get函数，注意tsconfig.jsonp不配置"target":"es5"这里会报错
prop:vue-property-decorator里面有Prop模块，也可以在元数据声明这个prop，然后在类里声明一下这个变量就可以了，个人推荐第一种
watch:vue-property-decorator里的Watch模块
methods:方法像data一样直接写在类里就可以了（注意不要和周期钩子同名）
各种生命周期钩子:直接写就行
路由钩子见vue-class-component文档
至此，基本就可以像原来一样写vue组件了。
当然如果要想和原来一样写ts,还需要配置tslint,不然一些ts语法不会被识别，像public修饰符之类的，因为ts还不是很熟练就没想着配，有兴趣的朋友可以试试。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。