vue與TypeScript集成配置最簡教程

https://blog.csdn.net/u014633852/article/details/73706459

https://segmentfault.com/a/1190000011878086  這個是另一個typescript配置的文件

>npm i ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev

vue與TypeScript集成配置最簡教程

 

• 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: 'ts-loader',
  exclude: /node_modules/,
  options: {
    appendTsSuffixTo: [/\.vue$/],
  }
},

// 從這里復制下面的代碼就可以了 // 如果之前按照起手式配置的同學，請替換配置 { test: /\.tsx?$/, exclude: /node_modules/, enforce: 'pre', loader: 'tslint-loader' }, { test: /\.vue$/, loader: 'vue-loader', options: Object.assign(vueLoaderConfig, { loaders: { ts: "ts-loader", tsx: "babel-loader!ts-loader" } }) }, { test: /\.tsx?$/, exclude: /node_modules/, use: [ "babel-loader", { loader: "ts-loader", options: { appendTsxSuffixTo: [/\.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" ] } }

然后在 tsconfig.json中，添加對jsx的支持

 

  "compilerOptions": { "jsx": "preserve" }

重命名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>

運行項目

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

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

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 { // 初始數據可以直接聲明為實例的屬性 message: string = 'Hello!' // 組件方法也可以直接聲明為實例的方法 onClick (): void { window.alert(this.message) } }