Inhaltsverzeichnis
2. Häufig verwendete vite-Befehle
1. Erstellen Sie ein Vite-Projekt
2. Sortieren Sie die Struktur des Projekts
3. Betriebsprozess des vite-Projekts
3.1 Vorlagenstruktur in App.vue schreiben
3.2 Reservieren Sie den el-Bereich in index.html
1. Einführung in Vite
Vite (Französisch für „schnell“, ausgesprochen /vit/) ist ein leichteres und schnelleres Front-End-Building-Tool für moderne Browser, das das Front-End-Entwicklungserlebnis erheblich verbessern kann. Zu den bekannten Frontend-Konstruktionstools gehören neben Vite auch Webpack und Gulp. Aktuell hat Vite Vite2 veröffentlicht, die neue Plug-in-Architektur und seidige Entwicklungserfahrung von Vite lassen sich perfekt mit Vue3 kombinieren.
1.1 Zusammensetzung von Vite
Das Vite-Build-Tool besteht aus zwei Teilen:
Ein Entwicklungsserver, der umfangreiche integrierte Funktionen wie Hot Module Updates (HMR) basierend auf nativen ES-Modulen bietet. Eine Reihe von Build-Anweisungen, die Ihren Code mit Rollup bündeln und vorkonfiguriert sind, um optimierte statische Assets für die Produktion auszugeben. Im Allgemeinen hofft Vite, eine sofort einsatzbereite Konfiguration bereitzustellen, während seine Plugin-API und JavaScript-API ein hohes Maß an Erweiterbarkeit bieten. Im Vergleich zur Vue-cli-Konfiguration haben die von Vite erstellten Projekte jedoch immer noch viele Konfigurationen, die von den Entwicklern selbst gehandhabt werden müssen.
1.2 Browserunterstützung
In der Entwicklungsumgebung: Vite muss in einem Browser verwendet werden, der den dynamischen Import nativer ES-Module unterstützt. In der Produktionsumgebung: Die standardmäßig unterstützten Browser müssen die Einführung von nativen ES-Modulen durch Skript-Tags unterstützen. Alte Browser können über das offizielle Plugin @vitejs/plugin-legacy unterstützt werden.
2. Häufig verwendete vite-Befehle
1. Erstellen Sie ein Vite -Projekt
Führen Sie die folgenden Befehle aus , um ein vue 3.x Engineering-Projekt basierend auf vite zu erstellen :
2. Sortieren Sie die Struktur des Projekts
Die mit vite erstellte Projektstruktur sieht wie folgt aus:
In:
Das Verzeichnis node_modules wird zum Speichern von Drittanbieter- abhängigen Paketen verwendet
public ist das öffentliche statische Ressourcenverzeichnis
src ist das Quellcodeverzeichnis des Projekts ( der gesamte von Programmierern geschriebene Code sollte in diesem Verzeichnis abgelegt werden )
.gitignore ist die Ignore-Datei für Git
index.html ist die einzige HTML- Seite in der SPA Single Page Application
package.json ist die Paketverwaltungskonfigurationsdatei des Projekts
Im Quellcodeverzeichnis des src-Projekts sind die folgenden Dateien und Ordner enthalten :
In:
Das Assets- Verzeichnis wird verwendet, um alle statischen Ressourcendateien ( css , fonts usw. ) im Projekt zu speichern
Das Komponentenverzeichnis wird verwendet, um alle benutzerdefinierten Komponenten im Projekt zu speichern
App.vue ist die Stammkomponente des Projekts
index.css ist die globale Stylesheet - Datei des Projekts
main.js ist die gepackte Eingangsdatei für das gesamte Projekt
3. Betriebsprozess des vite -Projekts
Was vue in Engineering-Projekten tun muss, ist sehr einfach: App.vue über main.js in den dafür vorgesehenen Bereich von index.html rendern . In:
① App.vue wird verwendet , um die zu rendernde Vorlagenstruktur zu schreiben
② In index.html muss ein el- Bereich reserviert werden
③ main.js rendert App.vue in den von index.html reservierten Bereich
3.1 Vorlagenstruktur in App.vue schreiben
Löschen Sie den Standardinhalt von App.vue und schreiben Sie die folgende Vorlagenstruktur:
3.2 Reservieren Sie den el- Bereich in index.html
Öffnen Sie die Seite index.html und bestätigen Sie, dass der el- Bereich reserviert ist : 
3.3 Rendern in main.js
Rendern Sie gemäß der Standardverwendung von vue 3.x den Vorlageninhalt in App.vue in den el- Bereich der index.html- Seite :
