您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“vue項(xiàng)目中如何使用typescript”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“vue項(xiàng)目中如何使用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
:擴(kuò)展vue支持typescript,將原有的vue語(yǔ)法通過(guò)聲明的方式來(lái)支持ts
vue-property-decorator
:基于vue-class-component擴(kuò)展更多裝飾器
ts-loader
:讓webpack能夠識(shí)別ts文件
tslint-loader
:tslint用來(lái)約束文件編碼
tslint-config-standard
: tslint 配置 standard風(fēng)格的約束
根據(jù)項(xiàng)目的不同配置的地方不同,如果是vue cli 3.0創(chuàng)建的項(xiàng)目需要在vue.config.js中配置,如果是3.0以下版本的話(huà),需要webpack.base.conf中配置。(以下說(shuō)明是在webpack.base.conf文件中更改)
在resolve.extensions中增加.ts,目的是在代碼中引入ts文件不用寫(xiě).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會(huì)檢索文件中的tsconfig.json.以其中的規(guī)則來(lái)解析ts文件,詳細(xì)的配置可以參考https://www.tslang.cn/docs/handbook/tsconfig-json.html
貼上測(cè)試項(xiàng)目tsconfig.json文件
{ // 編譯選項(xiàng) "compilerOptions": { // 輸出目錄 "outDir": "./output", // 是否包含可以用于 debug 的 sourceMap "sourceMap": true, // 以嚴(yán)格模式解析 "strict": false, // 采用的模塊系統(tǒng) "module": "esnext", // 如何處理模塊 "moduleResolution": "node", // 編譯輸出目標(biāo) ES 版本 "target": "es5", // 允許從沒(méi)有設(shè)置默認(rèn)導(dǎo)出的模塊中默認(rèn)導(dǎo)入 "allowSyntheticDefaultImports": true, // 將每個(gè)文件作為單獨(dú)的模塊 "isolatedModules": false, // 啟用裝飾器 "experimentalDecorators": true, // 啟用設(shè)計(jì)類(lèi)型元數(shù)據(jù)(用于反射) "emitDecoratorMetadata": true, // 在表達(dá)式和聲明上有隱含的any類(lèi)型時(shí)報(bào)錯(cuò) "noImplicitAny": false, // 不是函數(shù)的所有返回路徑都有返回值時(shí)報(bào)錯(cuò)。 "noImplicitReturns": true, // 從 tslib 導(dǎo)入外部幫助庫(kù): 比如__extends,__rest等 "importHelpers": true, // 編譯過(guò)程中打印文件名 "listFiles": true, // 移除注釋 "removeComments": true, "suppressImplicitAnyIndexErrors": true, // 允許編譯javascript文件 "allowJs": true, // 解析非相對(duì)模塊名的基準(zhǔn)目錄 "baseUrl": "./", // 指定特殊模塊的路徑 "paths": { "jquery": [ "node_modules/jquery/dist/jquery" ] }, // 編譯過(guò)程中需要引入的庫(kù)文件的列表 "lib": [ "dom", "es2015", "es2015.promise" ] } }
tslint.json配置
在目錄中新增tslint.json文件,由于我們前面安裝了tslint-config-standard,所以可以直接用tslint-config-standard中規(guī)則,文件如下:
{ "extends": "tslint-config-standard", "globals": { "require": true } }
由于 TypeScript 默認(rèn)并不支持 *.vue 后綴的文件,所以在 vue 項(xiàng)目中引入的時(shí)候需要?jiǎng)?chuàng)建一個(gè) vue-shim.d.ts 文件,放在根目錄下
declare module '*.vue' { import Vue from 'vue'; export default Vue; }
vue組件里大多數(shù)的方法改成通過(guò)@xxx(裝飾器)來(lái)表明當(dāng)前定義的為什么數(shù)據(jù),類(lèi)似ng中的注入。而業(yè)務(wù)邏輯js的部分就可以直接采用ts的寫(xiě)法了。
基本寫(xiě)法
模板template
和樣式style
的寫(xiě)法不變,script
的模塊進(jìn)行了改變,基本寫(xiě)法如下:
<script lang="ts"> import { Component, Vue } from "vue-property-decorator"; @Component export default class Test extends Vue { }; </script>
lang="ts"
:script
張聲明下當(dāng)前的語(yǔ)言是ts
@Component
:注明此類(lèi)為一個(gè)vue組件
export default class Test extends Vue
: export當(dāng)前組件類(lèi)是繼承vue的
data中的數(shù)據(jù)由原來(lái)的data()
方法改成直接在對(duì)象中定義
export default class Test extends Vue { public message1: string = "heimayu"; public message2: string = "真好看"; }
props的話(huà)就沒(méi)有data那么舒服了,因?yàn)樗枰褂醚b飾器了,寫(xiě)法如下
@Prop() propA:string @Prop() propB:number
$emit傳值
不帶參數(shù)
// 原來(lái)寫(xiě)法:this.$emit('bindSend') // 現(xiàn)在直接寫(xiě) this.bindSend() // 多個(gè)定義 @Emit() bindSend():string{ return this.message }
方法帶參數(shù)
// 原來(lái)寫(xiě)法:this.$emit('bindSend', msg) // 現(xiàn)在直接寫(xiě): this.bindSend(msg) // 多個(gè)下面的定義 @Emit() bindSend(msg:string){ // to do something }
emit帶參數(shù)
// 這里的test是改變組件引用的@事件名稱(chēng)這時(shí)候要寫(xiě)@test 而不是@bindSend2 @Emit('test) private bindSend2(){ }
watch觀察數(shù)據(jù)
// 原來(lái)的寫(xiě)法 watch:{} @Watch('propA',{ deep:true }) test(newValue:string,oldValue:string){ console.log('propA值改變了' + newValue); }
computed計(jì)算屬性
public get computedMsg(){ return '這里是計(jì)算屬性' + this.message; } public set computedMsg(message:string){ }
<template> <div class="test-container"> {{message}} <input type="button" value="點(diǎn)擊觸發(fā)父級(jí)方法" @click="bindSend"/> <input type="button" value="點(diǎn)擊觸發(fā)父級(jí)方法" @click="handleSend"/> <input type="button" value="點(diǎn)擊觸發(fā)父級(jí)方法" @click="bindSend2"/> <!-- <Hello></Hello> --> </div> </template> <script lang="ts"> import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator"; import Hello from "./HelloWorld.vue"; // 注明此類(lèi)為一個(gè)vue組件 @Component({ components: { Hello } }) export default class Test extends Vue { // 原有data中的數(shù)據(jù)在這里展開(kāi)編寫(xiě) public message: string = "asd"; //原有props中的數(shù)據(jù)展開(kāi)編寫(xiě) @Prop({ type: Number, default: 1, required: false }) propA?: number @Prop() propB:string //原有computed public get computedMsg(){ return '這里是計(jì)算屬性' + this.message; } public set computedMsg(message:string){ } //原有的watch屬性 @Watch('propA',{ deep:true }) public test(newValue:string,oldValue:string){ console.log('propA值改變了' + newValue); } // 以前需要給父級(jí)傳值的時(shí)候直接方法中使用emit就行了,當(dāng)前需要通過(guò)emit來(lái)處理 @Emit() private bindSend():string{ return this.message } @Emit() private bindSend1(msg:string,love:string){ // 如果不處理可以不寫(xiě)下面的,會(huì)自動(dòng)將參數(shù)回傳 // msg += 'love'; // return msg; } //原有放在methods中的方法平鋪出來(lái) public handleSend():void { this.bindSend1(this.message,'love'); } // 這里的emit中的參數(shù)是表明父級(jí)通過(guò)什么接受,類(lèi)似以前的$emit('父級(jí)定義的方法') @Emit('test') private bindSend2(){ return '這個(gè)可以用test接受'; } } </script>
到此,相信大家對(duì)“vue項(xiàng)目中如何使用typescript”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún),關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。