vue與TypeScript集成配置最簡教程(推薦)

更新時間：2017年10月17日 09:50:28 作者：意大利番茄

本篇文章主要介紹了vue與TypeScript集成配置最簡教程(推薦)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

前言

Vue的官方文檔沒有給出與TypeScript集成的具體步驟，網(wǎng)上其他的教程不是存在問題就是與vue-cli建立的項目存在差異，讓人無從下手。

下面我就給出vue-cli建立的項目與TypeScript集成的最簡配置。

初始化項目

首先用vue-cli建立webpack項目。這里為了演示方便，沒有打開router和eslint等，可以根據(jù)自身情況打開。

# vue init webpack vue-typescript

? Project name vue-typescript
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

安裝TypeScript相關(guān)依賴和項目其余依賴，用npm或cnpm

# cd /vue-typescript
# npm install typescript ts-loader --save-dev
# npm install

配置

修改目錄下bulid/webpack.base.conf.js文件，在文件內(nèi)module>rules添加以下規(guī)則

{
 test: /\.tsx?$/,
 loader: 'ts-loader',
 exclude: /node_modules/,
 options: {
  appendTsSuffixTo: [/\.vue$/],
 }
},

在src目錄下新建一個文件vue-shims.d.ts，用于識別單文件vue內(nèi)的ts代碼

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

在項目根目錄下建立TypeScript配置文件tsconfig.json

{
 "compilerOptions": {
  "strict": true,
  "module": "es2015",
  "moduleResolution": "node",
  "target": "es5",
  "allowSyntheticDefaultImports": true,
  "lib": [
   "es2017",
   "dom"
  ]
 }
}

重命名src下的main.js為main.ts

修改webpack.base.conf.js下的entry>app為'./src/main.ts'

修改src下的App.vue文件，在

<script lang="ts">

測試

下面可以測試是否集成成功，編輯src/components/Hello.vue文件，修改

<script lang="ts">
 import Vue, {ComponentOptions} from 'vue'
 export default {
  name: 'hello',
  data() {
   return {
    msg: 'this is a typescript project now'
   }
  }
 } as ComponentOptions<Vue>
</script>

運(yùn)行項目

# npm run dev

測試成功，現(xiàn)在是一個TypeScipt項目了

進(jìn)階

配置官方推薦的vue-class-component，https://cn.vuejs.org/v2/guide/typescript.html

安裝開發(fā)依賴

# npm install --save-dev vue-class-component

修改ts配置文件，增加以下兩項配置

"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,

改寫我們的Hello組件

<script lang="ts">
 import Vue from 'vue'
 import Component from 'vue-class-component'
 @Component
 export default class Hello extends Vue {
  msg: string = 'this is a typescript project now'  
 }
</script>

使用vue-class-component后，初始數(shù)據(jù)可以直接聲明為實(shí)例的屬性，而不需放入data() {return{}}中，組件方法也可以直接聲明為實(shí)例的方法，如官方實(shí)例，更多使用方法可以參考其官方文檔

https://github.com/vuejs/vue-class-component#vue-class-component

import Vue from 'vue'
import Component from 'vue-class-component'
// @Component 修飾符注明了此類為一個 Vue 組件
@Component({
 // 所有的組件選項都可以放在這里
 template: '<button @click="onClick">Click!</button>'
})
export default class MyComponent extends Vue {
 // 初始數(shù)據(jù)可以直接聲明為實(shí)例的屬性
 message: string = 'Hello!'
 // 組件方法也可以直接聲明為實(shí)例的方法
 onClick (): void {
  window.alert(this.message)
 }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: