Einführung in die Konfiguration der Verwendung von Typescript in Vue2 Vue-cli

Dieser Artikel stellt hauptsächlich die Konfiguration der Verwendung von Typescript in Vue2 Vue-cli vor. Jetzt kann ich ihn mit Ihnen teilen.

Vue ist einer davon Drei große Frontends: Eines der Frameworks hat bisher 44.873 Sterne auf GitHub erhalten, was ausreicht, um zu zeigen, dass es sich still und leise zum Mainstream entwickelt hat. Der folgende Artikel führt Sie hauptsächlich in die relevanten Informationen zur Konfiguration der Verwendung von Typescript in Vue2 ein. Freunde in Not können darauf zurückgreifen.

Vorwort

Da das Team des Unternehmens in letzter Zeit vom Vue-Framework begeistert war, wollte ich Typoskript für das neue Projekt üben, also habe ich angefangen vue+ts Der Weg zu Fallstricken ... Dieser Artikel soll Freunden, die die gleiche Idee haben wie ich, Zeit sparen. Ich werde im Folgenden nicht viel sagen. Schauen wir uns die Konfiguration an, die für die Verwendung von Typescript in Vue2 Vue erforderlich ist. cli. Bar.

1. Vorläufige Konfiguration

Installieren Sie zunächst die offiziellen Plug-ins vue-class-component und vue-property-decorator und konfigurieren Sie das Webpack .
Die Webpack-Konfiguration lautet wie folgt:

Ändern Sie die Eintragsdatei

entry: {
 app: './src/main.ts'
}

Auflösungsteil:

extensions: ['.js', '.vue', '.json', '.ts', '.tsx']

Loader konfigurieren

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

tsconfig.json konfigurieren

{
 "include": [
 "src/**/*"
 ],
 "exclude": [
 "node_modules"
 ],
 "compilerOptions": {
 "allowSyntheticDefaultImports": true,
 "experimentalDecorators": true,
 "allowJs": true,
 "module": "es2015",
 "target": "es5",
 "moduleResolution": "node",
 "experimentalDecorators": true,
 "isolatedModules": true,
 "lib": [
  "dom",
  "es5",
  "es2015.promise"
 ],
 "sourceMap": true,
 "pretty": true
 }
}

2. Echter Kampf!

Das Konfigurieren der Konfiguration ist nur der erste Schritt, die Ausführung im Projekt ist der Schlüssel.

Fügen Sie lang='ts'

im Skript-Tag der Vue-Datei hinzu, da der TS-Loader nicht weiß, was Vue, HTML und andere Dateien sind, wie z. B. ein mit Loader ausgestattetes Webpack , erhalten Sie nach der Ausführung eine Fehlermeldung, dass das Modul nicht analysiert werden kann. Sie müssen daher auch die .d.ts-Deklarationsdatei

die folgende Konfiguration von vue

konfigurieren

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

Sie können auch .d.ts-Dateien wie HTML für andere Nicht-JS-Module konfigurieren (teilen Sie ts-loader an, HTML als String zu verstehen)

declare module "*.html" {
 let template: string;
 export default template;
}

Nach der Konfiguration können ts diese Module verstehen

Stellen Sie die erforderlichen Module von vue-property-decorator vor

(normalerweise werden nur Komponenten verwendet, Vue, Watch, Prop, die anderen drei wurden nicht verwendet oder untersucht. Jemand, der es weiß, kann sie erklären)

import { Component, Vue, Watch } from 'vue-property-decorator'

Nehmen Sie hier den zuvor geschriebenen Sidbar-Code:

class HoverTopElem {
 leaveTop: number = -200
 top: number = null
 height: number = null

 show(e) {
 this.top = e.target.getBoundingClientRect().top
 this.height = e.target.clientHeight
 }
 hidden() {
 this.top = this.leaveTop
 }
}

@Component({
 name: 'sidebar',
 template: template,
 components: {
 sidebarItem
 }
})
export default class Sidebar extends Vue {
 SidebarMenu: any = SidebarMenu
 hoverTopElem: HoverTopElem = new HoverTopElem()
 activeListItemName: string = null
 activeRouteItemRoute: string = null

 get _activeRouteItemRoute(): string {
 return this.$route.path
 }

 @Watch('_activeRouteItemRoute', { immediate: true })
 onRouteChanged(val: any) {
 this.activeRouteItemRoute = val
 }

 changeList(param) {
 this.activeListItemName = param
 }

 changeRoute(param) {
 this.activeRouteItemRoute = param
 }
}

Die Metadaten werden in die @Component-Konfiguration geschrieben, wie z. B. Name, verwendete Komponenten, usw., und dann Lassen Sie uns darüber sprechen, wie die verschiedenen in Vue verwendeten Instanzattributmethoden hier verwendet werden:

Daten: Dies wird am häufigsten verwendet, wie das SidebarMenu oben (insgesamt werden hier 4 deklariert). Beachten Sie, dass die hier deklarierten Variablen sicher sein müssen, um einen Wert zuzuweisen, der null oder undefiniert sein muss, andernfalls reagieren die Daten nicht. Daher müssen die Attribute in der HoverTopElem-Klasse auch Anfangswerte haben, sonst reagieren diese Attribute nicht

berechnet: Hier ist die Get-Funktion. Beachten Sie, dass tsconfig.jsonp nicht mit „target“ konfiguriert ist: „es5 " wird hier einen Fehler melden

prop: Es gibt ein Prop-Modul in vue-property-decorator. Sie können dieses Prop auch in den Metadaten deklarieren und dann diese Variable in der Klasse deklarieren. Ich persönlich empfehle das erste one

watch: Watch-Modul in vue-property-decorator

Methoden: Methoden können wie Daten direkt in die Klasse geschrieben werden (achten Sie darauf, dass Sie nicht denselben Namen wie der Cycle-Hook haben)

Verschiedene Lebenszyklen Hook: Schreiben Sie es einfach direkt

Informationen zum Routing-Hook finden Sie im Vue-Class-Component-Dokument

An diesem Punkt Sie kann die Vue-Komponente grundsätzlich wie zuvor schreiben.

Wenn Sie ts wie zuvor schreiben möchten, müssen Sie natürlich auch tslint konfigurieren, da sonst einige ts-Syntaxen wie öffentliche Modifikatoren usw. nicht erkannt werden. Da ich ts nicht sehr gut beherrsche, Ich habe nicht daran gedacht, es zu konfigurieren. Interessierte Freunde können es versuchen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So lösen Sie das Problem des falschen Zugriffspfads nach der Verpackung von Vue-Hintergrundbildern

Basierend auf casperjs und ähneln .js implementiert einen Pixelvergleichsdienst

Einführung in die Initialisierung der Stiftinstallationsmethode zum ersten Mal nach dem Erstellen des Vue-Projekts

Das obige ist der detaillierte Inhalt vonEinführung in die Konfiguration der Verwendung von Typescript in Vue2 Vue-cli. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!