前言

因?yàn)樽罱镜膱F(tuán)隊(duì)熱衷于vue框架，新項(xiàng)目想著練練typescript，于是開(kāi)始了vue+ts的踩坑之路...本文意在為和我有一樣想法的伙伴們省去踩坑的時(shí)間，下面話不多說(shuō)了，來(lái)一起看看關(guān)于Vue2 Vue-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 }}

二、實(shí)戰(zhàn)！

配好配置只是第一步，在項(xiàng)目里跑起來(lái)才是王道。

在vue文件的script標(biāo)簽里添加lang='ts'

因?yàn)閠s-loader不像配過(guò)loader的webpack一樣知道vue,html等文件是什么東西，你跑起來(lái)后會(huì)報(bào)模塊無(wú)法解析的錯(cuò)誤，所以還需要配置.d.ts聲明文件

vue的如下配置

declare module "*.vue" { import Vue from 'vue'; export default Vue;}

你也可以為其它的非js模塊配置.d.ts文件如html（告訴ts-loader把html理解成字符串）

declare module "*.html" { let template: string; export default template;}

配置好之后ts就能理解這些模塊了

從vue-property-decorator引入需要用到的模塊

（一般只用到Component, Vue, Watch, Prop這四個(gè)，其它3個(gè)沒(méi)用到也沒(méi)研究，知道的大佬可以解釋下。）

import { Component, Vue, Watch } from 'vue-property-decorator'

這里拿之前寫(xiě)的sidbar的代碼當(dāng)個(gè)栗子：

class HoverTopElem { 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 }})export default class Sidebar extends Vue { SidebarMenu: any = SidebarMenu hoverTopElem: HoverTopElem = new HoverTopElem() activeListItemName: string = null activeRouteItemRoute: string = null get _activeRouteItemRoute(): string { return this.$route.path } @Watch('_activeRouteItemRoute', { immediate: true }) onRouteChanged(val: any) { this.activeRouteItemRoute = val } changeList(param) { this.activeListItemName = param } changeRoute(param) { this.activeRouteItemRoute = param }}

元數(shù)據(jù)寫(xiě)在@Component配置里，像名字，用到的組件啥的，然后說(shuō)下之前vue里用到的各個(gè)實(shí)例屬性方法在這里怎么用：

data: 這個(gè)是最常用的，像上面的SidebarMenu（這里一共聲明了4個(gè)），注意這里聲明的變量一定要賦一個(gè)值，沒(méi)有就null,不能是undefined，不然這個(gè)數(shù)據(jù)就不是響應(yīng)的。因此HoverTopElem類(lèi)里的屬性也是要有初始值，不然這些屬性也不是響應(yīng)的

computed: 這里就是get函數(shù)，注意tsconfig.jsonp不配置"target": "es5"這里會(huì)報(bào)錯(cuò)

prop: vue-property-decorator里面有Prop模塊，也可以在元數(shù)據(jù)聲明這個(gè)prop，然后在類(lèi)里聲明一下這個(gè)變量就可以了，個(gè)人推薦第一種

watch: vue-property-decorator里的Watch模塊

methods: 方法像data一樣直接寫(xiě)在類(lèi)里就可以了（注意不要和周期鉤子同名）

各種生命周期鉤子: 直接寫(xiě)就行

路由鉤子見(jiàn)vue-class-component文檔

至此，基本就可以像原來(lái)一樣寫(xiě)vue組件了。

當(dāng)然如果要想和原來(lái)一樣寫(xiě)ts,還需要配置tslint,不然一些ts語(yǔ)法不會(huì)被識(shí)別，像public修飾符之類(lèi)的，因?yàn)閠s還不是很熟練就沒(méi)想著配，有興趣的朋友可以試試。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)武林網(wǎng)的支持。