Vue3+Skript-Setup+ts+Vite+Volar-Projekt

Inhaltsverzeichnis

Erstellen Sie ein Vue + TS-Projekt mit Vite
Drei Syntaxen von Vue 3

Option API
Kompositions-API
Skript-Setup (syntaktischer Zucker für die Composition API)

Volar installieren

Abschluss

Ich habe lange nichts geschrieben. Vor Kurzem habe ich gesehen, dass Vue3.2 veröffentlicht wurde. Oh, ist es an der Zeit, wieder mit dem Schreiben anzufangen?
Tatsächlich habe ich Vue3 nicht verwendet, um selbst irgendwelche konkreten Projekte zu entwickeln, aber jetzt kommen neue Dinge heraus …
Die Wanderarbeiter der neuen Ära arbeiten tatsächlich mit der linken Hand, spielen mit der rechten Hand und benutzen ihre Hände auch zum Lernen.

~~Was? Du meinst Verabredungen? xswl, wie kann ein Wanderarbeiter wie ich für ein Date qualifiziert sein?~~

Ich muss mich zusammenreißen. Ich schaue mir mal an, was meine Freunde in ihrem Freundeskreis gepostet haben. Nun, es ist immer noch der ewige Duft

Okay, ohne weitere Umschweife, lasst uns anfangen~

Erstellen Sie ein Vue + TS-Projekt mit Vite

Siehe offizielles Vite-Handbuch

Ausführen und Erstellen einer Projektvorlage

	$ npm init vite@latest
	√ Projektname: ... v3_demo
	√ Wählen Sie ein Framework: » vue
	√ Wähle eine Variante: » vue-ts
	
	Gerüstprojekt in C:\Benutzer\admin\Desktop\v3_demo...
	
	Fertig. Führen Sie nun Folgendes aus:
	
	  CD v3_demo
	  npm installieren
	  npm-Ausführung dev

Beschreibung der Projektverzeichnisstruktur

	
	├── public # statische Ressourcen, die nicht verpackt werden müssen │ └── favicon.ico
	├── Quelle
	│ ├── api # Kapselung der Back-End-API-Schnittstelle │ ├── asset # Statische Ressourcen, die verpackt werden müssen │ ├── components # Öffentliche Komponenten │ ├── composables # Allgemeine zusammensetzbare API
	│ ├── layout # Page layout template │ ├── plugins # Plugins │ ├── router # Routing │ ├── store # Vuex storage │ ├── styles # Styles │ └── index.scss # Global common styles │ ├── utils # Tool module │ ├── views # Routing page │ ├── App.vue # Root component │ ├── main.ts # Entry module │ ├── shims-vue.d.ts # Supplement .vue module type declaration │ └── vite-env.d.ts # Supplement vite type declaration ├── .gitignore
	├── README.md
	├── index.html
	├── Paket-Lock.json
	├── Paket.json
	├── tsconfig.json
	└── vite.config.ts

Nachdem Sie das Projekt erstellt haben, müssen Sie das Abhängigkeitspaket installieren und erneut ausführen. Sie werden jedoch feststellen, dass beim Ausführen direkt ein Fehler gemeldet wird.

admin@DESKTOP-ABKQLS5 C:\Benutzer\admin\Desktop\v3_demo
$ npm ausführen dev
> [email protected]
> einladen
Ereignisse.js:292
throw er; // Nicht behandeltes „Fehler“-Ereignis
^
Fehler: erzeugt C:\Benutzer\admin\Desktop\v3_demo\node_modules\esbuild\esbuild.exe ENOENT
bei Process.ChildProcess._handle.onexit (internal/child_process.js:269:19)
bei onErrorNT (internal/child_process.js:465:16)
bei processTicksAndRejections (internal/process/task_queues.js:80:21)
Ausgegebenes „Fehler“-Ereignis für die ChildProcess-Instanz bei:
bei Process.ChildProcess._handle.onexit (intern/child_process.js:275:12)
bei onErrorNT (internal/child_process.js:465:16)
bei processTicksAndRejections (internal/process/task_queues.js:80:21) {
Fehlernummer: -4058,
Code: 'ENOENT',
Systemaufruf: 'spawn C:\\Benutzer\\Administrator\\Desktop\\v3_demo\\node_modules\\esbuild\\esbuild.exe',
Pfad: 'C:\\Benutzer\\Administrator\\Desktop\\v3_demo\\node_modules\\esbuild\\esbuild.exe',
Spawnargs: [ '--service=0.12.22', '--ping' ]
}

Lösung: node ./node_modules/esbuild/install.js

In den von Vite erstellten Projekten ist ESLint standardmäßig nicht verfügbar.

Beschreibung von TS in Vite

Vite unterstützt selbstverständlich den Import von .ts-Dateien.
Vite führt nur die Übersetzung von .ts-Dateien durch und führt keine Typprüfung durch. Und gehen Sie davon aus, dass die Typprüfung bereits von Ihrer IDE oder Ihrem Build-Prozess übernommen wird (Sie können tsc --noEmit in Ihrem Build-Skript ausführen oder vue-tsc installieren und dann vue-tsc --noEmit ausführen, um die Typprüfung Ihrer *.vue-Dateien durchzuführen).
Vite verwendet esbuild, um TypeScript in JavaScript zu übersetzen, was etwa 20- bis 30-mal schneller ist als tsc. Gleichzeitig beträgt die Zeit, die erforderlich ist, damit HMR-Updates im Browser angezeigt werden, weniger als 50 ms.
Beachten Sie, dass esbuild nur die Transpilierung ohne Typinformationen durchführt und daher keine TypeScript-spezifischen Funktionen wie konstante Enumerationen und implizite „Nur-Typ“-Importe unterstützt. Sie müssen in den CompilerOptions in Ihrer tsconfig.json „isolatedModules“: true festlegen, damit TS Sie vor Funktionen warnt, die im isolierten Kompilierungsmodus nicht funktionieren.

vue-tsc und tsc
tsc kann nur ts-Codetypen überprüfen
vue-tsc kann die Typen in ts + Vue-Vorlage überprüfen (basierend auf Volar)
Es wird empfohlen, in package.json ein Skript hinzuzufügen, um die TS-Typüberprüfung separat durchzuführen:

"Skripte": {
	  ...
	  "build": "npm führe tsc und vite build aus",
	  "tsc": "vue-tsc -noEmit"
	}

-noEmit bedeutet, dass nur der Typ überprüft wird und das Kompilierungsergebnis nicht ausgegeben wird.

Um die Pakettypprüfung von Drittanbietern zu überspringen, fügen Sie in tsconfig.json Folgendes hinzu:

	{
	  "Compileroptionen": {
	    ...
	    "Basis-URL": "./",
	    "skipLibCheck": wahr
	  }
	}

Die spezifische TS-Syntax von Vue3 wird hier nicht beschrieben. Freunde, die es nicht wissen, können direkt auf die offizielle Dokumentation verweisen

Drei Syntaxen von Vue 3

Es gibt vier Möglichkeiten, das Wort „Xiang“ in „Xiangxiangdou“ zu schreiben, und es gibt auch drei Syntaxen für „Vue3“ in „Working People“. Die Zeiten ändern sich, aber unsere ursprünglichen Absichten bleiben dieselben. Bitte lesen Sie das Folgende.

Option API

Ich werde hier nicht näher darauf eingehen. Jeder, der weiß, wie man Vue schreibt, wird es wissen. Dies ist die am häufigsten verwendete Options-API in Vue2.

Kompositions-API

Die Combination API ist das am meisten diskutierte Syntax-Update seit der Einführung von Vue3 und bildet auch die Grundlage für die unten stehende Syntax zur Skripteinrichtung.

Wenn Sie noch nicht wissen, wie man das Front-End verwendet, beeilen Sie sich und lernen Sie es! Kompositions-API

Skript-Setup (syntaktischer Zucker für die Composition API)

<script setup> ist eine zur Kompilierungszeit dienende Syntaxvereinfachung für die Verwendung der Composition API in einer Single-File-Komponente (SFC). Im Vergleich zu gewöhnlichen

Weniger Boilerplate, saubererer Code.
Möglichkeit zum Deklarieren von Props und Ausgeben von Ereignissen mit reinem Typescript.
Bessere Laufzeitleistung (Vorlagen werden im selben Umfang wie sie in Renderfunktionen kompiliert, ohne Zwischenproxy).
Bessere IDE-Typinferenzleistung (weniger Arbeit für den Sprachserver zum Extrahieren von Typen aus Ihrem Code).

Ich werde hier keine Screenshots von Yuxi Yous Artikel veröffentlichen. Das Skript-Setup hat offiziell den experimentellen Status verlassen und ist jetzt in einer stabilen Version verfügbar.

Im Skripttag mit hinzugefügtem Setup müssen wir keine Methoden deklarieren. Diese Schreibweise stellt automatisch alle Variablen und Funktionen der obersten Ebene zur Verwendung in der Vorlage bereit.

Hier möchte ich betonen, dass „ das Offenlegen gegenüber der Vorlage nicht dasselbe ist wie das Offenlegen gegenüber der Außenwelt “

Am Beispiel der Projektvorlage „HelloWorld.vue“ lautet die Syntax der Composition API:

	
	<script lang="ts">
	importiere { ref, defineComponent } von "vue";
	exportiere StandarddefiniereKomponente({
	  Name: "Hallo Welt",
	  Requisiten: {
	    Nachricht: {
	      Typ: Zeichenfolge,
	      erforderlich: wahr,
	    },
	  },
	  einrichten: () => {
	    Konstante Anzahl = Ref(0);
	    Rückgabewert {Anzahl};
	  },
	});
	</Skript>

Nach der Verwendung des Setups:

	<script lang="ts" setup>
	importiere { ref, defineProps } von "vue";
	Konstante Anzahl = Ref(0);
	const props = defineProps({
	  Nachricht: {
	    Typ: Zeichenfolge,
	    erforderlich: wahr,
	  },
	});
	</Skript>

Die genaue Syntax finden Sie im Skript-Setup.

Volar installieren

Volar ist ein Plugin für vscode, das einige ziemlich coole Funktionen bietet.

Die Installationsmethode ist sehr einfach. Suchen Sie einfach im vscode-Plug-In-Markt nach Volar und klicken Sie zum Installieren.