Tutorial zur Konfiguration der Vue- und TypeScript-Integration

Dieser Artikel stellt hauptsächlich das einfachste Tutorial (empfohlen) für die Integrationskonfiguration von Vue und TypeScript vor. Ich hoffe, es kann jedem helfen.

Vorwort

Die offizielle Dokumentation von Vue enthält keine spezifischen Schritte zur Integration mit TypeScript. Andere Tutorials im Internet weisen entweder Probleme auf oder unterscheiden sich von den von vue erstellten Projekten. cli. , was dazu führt, dass die Leute nicht starten können.

Im Folgenden gebe ich die einfachste Konfiguration zur Integration des von vue-cli erstellten Projekts mit TypeScript.

Initialisieren Sie das Projekt

Erstellen Sie zunächst das Webpack-Projekt mit vue-cli. Zur Vereinfachung der Demonstration werden Router und Eslint hier nicht geöffnet. Sie können sie entsprechend Ihrer eigenen Situation öffnen.

# 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

Installieren Sie TypeScript-bezogene Abhängigkeiten und andere Projektabhängigkeiten, verwenden Sie npm oder cnpm

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

Konfiguration

Ändern Sie die Datei bulid/webpack.base.conf.js im Verzeichnis und fügen Sie die folgenden Regeln zu module>rules in der Datei hinzu

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

Erstellen Sie eine neue Datei vue-shims.d.ts im src-Verzeichnis, um den ts-Code in einer einzelnen Datei vue zu identifizieren

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

im Projektstammverzeichnis Erstellen Sie eine TypeScript-Konfigurationsdatei tsconfig.json unter

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

Benennen Sie main.js unter src in main.ts

um. Ändern Sie unter webpack.base.conf.js entry>app为'./src/main.ts'

Ändern Sie die App.vue-Datei unter src und testen Sie sie in

<script lang="ts">

Sie können testen, ob die Die Integration ist erfolgreich. Bearbeiten Sie die Datei src/components/Hello.vue, ändern Sie

und führen Sie das Projekt aus

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

Der Test war erfolgreich, jetzt ist es ein TypeScipt-Projekt

# npm run dev

Erweitert

Konfigurieren Sie den offiziell empfohlenen Vue - Klassenkomponente, https://cn.vuejs.org/v2/guide/typescript.html

Entwicklungsabhängigkeiten installieren

Ändern ts-Konfigurationsdatei, fügen Sie die folgenden zwei Konfigurationen hinzu

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

Schreiben Sie unsere Hello-Komponente neu

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

zu Nach der Verwendung von vue-class-component können die Anfangsdaten direkt als Attribut der Instanz deklariert werden, ohne sie in data() {return{}} einzufügen. Die Komponentenmethode kann auch direkt als Methode der Instanz deklariert werden, z als offizielle Instanz. Weitere Verwendungsmöglichkeiten finden Sie in der offiziellen Dokumentation

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

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

Verwandte Empfehlungen:

import Vue from 'vue'
import Component from 'vue-class-component'
// @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)
 }
}

Verbesserungen in TypeScript in Vue 2.5

Einführung der deklarierten Typen von JavaScript und TypeScript

Teilen Sie einige Tipps zu TypeScript

Das obige ist der detaillierte Inhalt vonTutorial zur Konfiguration der Vue- und TypeScript-Integration. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!