Vue2 Vue-cli中使用Typescript的配置详解
前言因为最近公司的团队热衷于vue框架,新项目想着练练typescript,于是开始了vue+ts的踩坑之路...本文意在为和我有一样想法的伙伴们省去踩坑的时间,下面话不多说了,来一起看看关于Vue2 Vue-cli中利用Typescript需要的配置是什么吧。 一、初步配置首先安装官方插件vue-class-component,vue-property-decorator,配置webpack。 webpack配置如下: 修改入口文件 resolve部分: 配置loader 配置tsconfig.json 二、实战!配好配置只是第一步,在项目里跑起来才是王道。 在vue文件的script标签里添加 因为ts-loader不像配过loader的webpack一样知道vue,html等文件是什么东西,你跑起来后会报模块无法解析的错误,所以还需要配置.d.ts声明文件 vue的如下配置 你也可以为其它的非js模块配置.d.ts文件如html(告诉ts-loader把html理解成字符串) 配置好之后ts就能理解这些模块了 从vue-property-decorator引入需要用到的模块 (一般只用到Component,Vue,Watch,Prop这四个,其它3个没用到也没研究,知道的大佬可以解释下。)
这里拿之前写的sidbar的代码当个栗子: show(e) {
this.top = e.target.getBoundingClientRect().top this.height = e.target.clientHeight } hidden() { this.top = this.leaveTop } } @Component({ get _activeRouteItemRoute(): string { @Watch('_activeRouteItemRoute',{ immediate: true }) changeList(param) { changeRoute(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还不是很熟练就没想着配,有兴趣的朋友可以试试。 总结以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对编程之家的支持。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |