Vue-cli3中使用TS語(yǔ)法示例代碼
ts有什么用?
類型檢查、直接編譯到原生js、引入新的語(yǔ)法糖
為什么用ts?
TypeScript的設(shè)計(jì)目的應(yīng)該是解決JavaScript的“痛點(diǎn)”:弱類型和沒有命名空間,導(dǎo)致很難模塊化,不適合開發(fā)大型程序。另外它還提供了一些語(yǔ)法糖來幫助大家更方便地實(shí)踐面向?qū)ο蟮木幊獭?/p>
typescript不僅可以約束我們的編碼習(xí)慣,還能起到注釋的作用,當(dāng)我們看到一函數(shù)后我們立馬就能知道這個(gè)函數(shù)的用法,需要傳什么值,返回值是什么類型一目了然,對(duì)大型項(xiàng)目的維護(hù)性有很大的提升。也不至于使開發(fā)者搬起石頭砸自己的腳。
1、引入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ǔ)法通過聲明的方式來支持tsvue-property-decorator
:基于vue-class-component擴(kuò)展更多裝飾器ts-loader
:讓webpack能夠識(shí)別ts文件tslint-loader
:tslint用來約束文件編碼tslint-config-standard
: tslint 配置 standard風(fēng)格的約束
2、配置
webpack配置
根據(jù)項(xiàng)目的不同配置的地方不同,如果是vue cli 3.0
創(chuàng)建的項(xiàng)目需要在vue.config.js中配置,如果是3.0以下版本的話,需要webpack.base.conf中配置。(以下說明是在webpack.base.conf文件中更改)
2.1 在webpack.base.conf文件中更改
2.1.1. 在resolve.extensions中增加.ts,目的是在代碼中引入ts文件不用寫.ts后綴
resolve: { extensions: ['.js', '.vue', '.json', '.ts'], alias: {} }
2.2.2. 在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$/] } } ] }
2.2.3. tsconfig.json配置
ts-loader會(huì)檢索文件中的tsconfig.json.以其中的規(guī)則來解析ts文件,詳細(xì)的配置可以參考https://www.tslang.cn/docs/handbook/tsconfig-json.html
我項(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", // 允許從沒有設(shè)置默認(rèn)導(dǎo)出的模塊中默認(rèn)導(dǎo)入 "allowSyntheticDefaultImports": true, // 將每個(gè)文件作為單獨(dú)的模塊 "isolatedModules": false, // 啟用裝飾器 "experimentalDecorators": true, // 啟用設(shè)計(jì)類型元數(shù)據(jù)(用于反射) "emitDecoratorMetadata": true, // 在表達(dá)式和聲明上有隱含的any類型時(shí)報(bào)錯(cuò) "noImplicitAny": false, // 不是函數(shù)的所有返回路徑都有返回值時(shí)報(bào)錯(cuò)。 "noImplicitReturns": true, // 從 tslib 導(dǎo)入外部幫助庫(kù): 比如__extends,__rest等 "importHelpers": true, // 編譯過程中打印文件名 "listFiles": true, // 移除注釋 "removeComments": true, "suppressImplicitAnyIndexErrors": true, // 允許編譯javascript文件 "allowJs": true, // 解析非相對(duì)模塊名的基準(zhǔn)目錄 "baseUrl": "./", // 指定特殊模塊的路徑 "paths": { "jquery": [ "node_modules/jquery/dist/jquery" ] }, // 編譯過程中需要引入的庫(kù)文件的列表 "lib": [ "dom", "es2015", "es2015.promise" ] } }
2.2.4. tslint.json配置
在目錄中新增tslint.json文件,由于我們前面安裝了tslint-config-standard,所以可以直接用tslint-config-standard中規(guī)則,文件如下:
{ "extends": "tslint-config-standard", "globals": { "require": true } }
2.2 在vue.config.js文件中更改以下代碼即可
configureWebpack: { resolve: { extensions: [".ts", ".tsx", ".js", ".json"], alias: {} }, module: { rules: [ { test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/, options: { appendTsSuffixTo: [/\.vue$/], } } ] } },
3、讓項(xiàng)目識(shí)別.ts
由于 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; }
4、vue組件的編寫
vue組件里大多數(shù)的方法改成通過@xxx(裝飾器)來表明當(dāng)前定義的為什么數(shù)據(jù)。業(yè)務(wù)邏輯js的部分就可以直接采用ts的寫法了。
基本寫法
模板template
和樣式style
的寫法不變,script
的模塊進(jìn)行了改變,寫法如下:
<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
:注明此類為一個(gè)vue組件export default class Test extends Vue
: export當(dāng)前組件類是繼承vue的
data()中定義數(shù)據(jù)
data中的數(shù)據(jù)由原來的data()
方法改成直接在對(duì)象中定義
export default class Test extends Vue { public message1: string = "heimayu"; public message2: string = "真好看"; }
生命周期
// 生命周期 private created(){ this.init(); }
方法
private init(){ console.log('halo'); }
props傳值
props的話就沒有data那么舒服了,因?yàn)樗枰褂醚b飾器了,寫法如下
@Prop() propA:string @Prop() propB:number
$emit傳值
不帶參數(shù)
// 原來寫法:this.$emit('bindSend') // 現(xiàn)在直接寫 this.bindSend() // 多個(gè)定義 @Emit() bindSend():string{ return this.message }
方法帶參數(shù)
// 原來寫法:this.$emit('bindSend', msg) // 現(xiàn)在直接寫: this.bindSend(msg) // 多個(gè)下面的定義 @Emit() bindSend(msg:string){ // to do something }
emit帶參數(shù)
// 這里的test是改變組件引用的@事件名稱這時(shí)候要寫@test 而不是@bindSend2 @Emit('test') private bindSend2(){ return '這個(gè)可以用test接受'; }
watch觀察數(shù)據(jù)
// 原來的寫法 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"; // 注明此類為一個(gè)vue組件 @Component({ components: { Hello } }) export default class Test extends Vue { // 原有data中的數(shù)據(jù)在這里展開編寫 public message: string = "asd"; //原有props中的數(shù)據(jù)展開編寫 @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)前需要通過emit來處理 @Emit() private bindSend():string{ return this.message } @Emit() private bindSend1(msg:string,love:string){ // 如果不處理可以不寫下面的,會(huì)自動(dòng)將參數(shù)回傳 // msg += 'love'; // return msg; } //原有放在methods中的方法平鋪出來 public handleSend():void { this.bindSend1(this.message,'love'); } // 這里的emit中的參數(shù)是表明父級(jí)通過什么接受,類似以前的$emit('父級(jí)定義的方法') @Emit('test') private bindSend2(){ return '這個(gè)可以用test接受'; } } </script>
到此這篇關(guān)于Vue-cli3中使用TS語(yǔ)法示例代碼的文章就介紹到這了,更多相關(guān)Vue-cli3使用TS語(yǔ)法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue-cli 3.0 版本與3.0以下版本在搭建項(xiàng)目時(shí)的區(qū)別詳解
這篇文章主要介紹了vue-cli 3.0 版本與3.0以下版本在搭建項(xiàng)目時(shí)的區(qū)別詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12vue內(nèi)置動(dòng)態(tài)組件component使用示例小結(jié)
component是vue內(nèi)置組件,主要作用為動(dòng)態(tài)渲染組件,這篇文章主要介紹了vue內(nèi)置動(dòng)態(tài)組件component使用示例小結(jié),需要的朋友可以參考下2024-03-03JavaScript的Vue.js庫(kù)入門學(xué)習(xí)教程
Vue的很多思想借鑒于Angular,但卻比較輕量和自由,這里我們整理了JavaScript的Vue.js庫(kù)入門學(xué)習(xí)教程,包括其架構(gòu)思想與核心的數(shù)據(jù)綁定方式等,需要的朋友可以參考下2016-05-05vue3.0 CLI - 2.4 - 新組件 Forms.vue 中學(xué)習(xí)表單
這篇文章主要介紹了vue3.0 CLI - 2.4 - 新組件 Forms.vue 中學(xué)習(xí)表單的相關(guān)知識(shí),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-09-09Vue3 Element Plus el-form表單組件示例詳解
這篇文章主要介紹了Vue3 Element Plus el-form表單組件,Element Plus 是 ElementUI 的升級(jí)版,提供了更多的表單控件和功能,同時(shí)還改進(jìn)了一些細(xì)節(jié)和樣式,本文結(jié)合示例代碼給大家詳細(xì)講解,需要的朋友可以參考下2023-04-04vue-cli3.0.4中webpack的dist路徑如何修改
這篇文章主要介紹了vue-cli3.0.4中webpack的dist路徑如何修改,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04vue3+TS 實(shí)現(xiàn)自定義指令長(zhǎng)按觸發(fā)綁定的函數(shù)
這篇文章主要介紹了vue3+TS實(shí)現(xiàn)自定義指令長(zhǎng)按觸發(fā)綁定的函數(shù),文中給大家分享了編寫自定義指令時(shí)遇到的幾個(gè)難點(diǎn),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12Vue中瀑布流布局與圖片加載優(yōu)化的實(shí)現(xiàn)
本文主要介紹了Vue中瀑布流布局與圖片加載優(yōu)化的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06vue中使用 pinia 全局狀態(tài)管理的實(shí)現(xiàn)
本文主要介紹了vue中使用 pinia 全局狀態(tài)管理的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07