vue與TypeScript整合設定教學課程-js教程-PHP中文網

vue與TypeScript整合設定教學課程

小云云

發布： 2018-01-15 13:48:59

原創

1291 人瀏覽過

本文主要介紹了vue與TypeScript整合配置最簡教學(推薦)，具有一定的參考價值，有興趣的小夥伴們可以參考一下，希望能幫助到大家。

前言

Vue的官方文件並沒有給出與TypeScript整合的具體步驟，網路上其他的教學不是存在問題就是與vue-cli建立的項目有差異，讓人無從下手。

下面我就給vue-cli建立的專案與TypeScript整合的最簡配置。

初始化專案

先用vue-cli建立webpack專案。這裡為了示範方便，沒有打開router和eslint等，可以依照自身情況打開。

# 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相關依賴和專案其餘依賴，用npm或cnpm

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

登入後複製

配置

修改目錄下bulid/webpack.base.conf.js文件，在文件內module>rules加入以下規則

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

登入後複製

在src目錄下新建一個檔案vue-shims.d.ts，用於識別單一檔案vue內的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

登入後複製

運行專案

# npm run dev

登入後複製

#測試成功，現在是一個TypeScipt專案了

#進階

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

安裝開發依賴

# 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'  
 }

登入後複製

使用vue-class-component後，初始資料可以直接宣告為實例的屬性，而不需放入data() {return{}}中，元件方法也可以直接宣告為實例的方法，如官方實例，更多使用方法可以參考其官方文件

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

import Vue from &#39;vue&#39;
import Component from &#39;vue-class-component&#39;
// @Component 修饰符注明了此类为一个 Vue 组件
@Component({
 // 所有的组件选项都可以放在这里
 template: &#39;<button @click="onClick">Click!</button>&#39;
})
export default class MyComponent extends Vue {
 // 初始数据可以直接声明为实例的属性
 message: string = &#39;Hello!&#39;
 // 组件方法也可以直接声明为实例的方法
 onClick (): void {
  window.alert(this.message)
 }
}

登入後複製