這篇文章主要介紹Vue2 Vue-cli中如何使用Typescript，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

10年積累的做網(wǎng)站、網(wǎng)站建設(shè)經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你，你也不認識我。但先網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程，更有榮成免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

一、初步配置

首先安裝官方插件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
 }
}

二、實戰(zhàn)！

配好配置只是第一步，在項目里跑起來才是王道。

在vue文件的script標簽里添加lang='ts'

因為ts-loader不像配過loader的webpack一樣知道vue,html等文件是什么東西，你跑起來后會報模塊無法解析的錯誤，所以還需要配置.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這四個，其它3個沒用到也沒研究，知道的大佬可以解釋下。）

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

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

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ù)寫在@Component配置里，像名字，用到的組件啥的，然后說下之前vue里用到的各個實例屬性方法在這里怎么用：

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

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

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

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

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

各種生命周期鉤子: 直接寫就行

路由鉤子見vue-class-component文檔

至此，基本就可以像原來一樣寫vue組件了。

當(dāng)然如果要想和原來一樣寫ts,還需要配置tslint,不然一些ts語法不會被識別，像public修飾符之類的，因為ts還不是很熟練就沒想著配，有興趣的朋友可以試試。

以上是“Vue2 Vue-cli中如何使用Typescript”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享題目：Vue2Vue-cli中如何使用Typescript
本文地址：http://chinadenli.net/article2/giiioc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、微信小程序、小程序開發(fā)、自適應(yīng)網(wǎng)站、App開發(fā)、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)