Das von vue erstellte Verzeichnis und wofür es verwendet wird

Vue ist ein beliebtes JavaScript-Framework zum Erstellen von Single-Page-Anwendungen. Vue verwendet einen komponentenbasierten Ansatz zum Erstellen von Webanwendungen. In Vue bestehen Komponenten aus HTML, JavaScript und CSS. Vue bietet einige integrierte Anweisungen und Komponenten, um den Entwicklungsprozess zu vereinfachen.

In Vue-Anwendungen gibt es normalerweise einige Verzeichnisse. Was ist also das von Vue erstellte Verzeichnis und welche Funktionen hat es? In diesem Artikel wird dieses Problem ausführlich vorgestellt.

1. src-Verzeichnis

src-Verzeichnis ist das wichtigste Verzeichnis. Es enthält den Quellcode Ihrer Vue-Anwendung. In diesem Verzeichnis erstellen und schreiben Sie Vue-Komponenten, Komponentenmodule, Daten, Filter usw. Wenn Sie eine mehrsprachige Anwendung entwickeln, können Sie in diesem Verzeichnis auch mehrsprachige Konfigurationsdateien erstellen. Die Verzeichnisstruktur in diesem Verzeichnis ist im Allgemeinen wie folgt:

• assets: Speichert Ressourcendateien wie Bilder, die die Anwendung verwenden muss.
• components: Speichert die Vue-Komponenten in der Anwendung.
• directives: Speichert Anweisungen, wenn bestimmte Elemente benötigt werden wiederverwendet werden. Während des Betriebs kann es in Anweisungen abstrahiert werden.
• Filter: Speichert Filter zum Formatieren von Daten.
• Mixins: Speichert Mixins, die in Vue-Komponenten wiederverwendet werden können.
• Seiten: Speichert einzelne Vue-Dateikomponenten. Jede Komponente kann sein Wird als Seite in der Anwendung verwendet.
• plugins: speichert Vue-Plug-ins.
• router: speichert Vue-Router.
• store: speichert Dateien im Zusammenhang mit der Vuex-Statusverwaltung.
• utils: speichert einige Toolfunktionen.

2. öffentliches Verzeichnis

public Das Verzeichnis ist der Ort, an dem lokale statische Dateien gespeichert werden. Diese Dateien müssen nicht vom Webpack kompiliert werden. Auf diese Dateien kann über relative Pfade verwiesen werden. Im Allgemeinen werden darin Dateien und Ordner abgelegt, die direkt in das kompilierte Verzeichnis kopiert werden müssen.

3. node_modules-Verzeichnis

Das node_modules-Verzeichnis ist der Speicherpfad von npm-Paketen. In diesem Verzeichnis werden der Quellcode und die Binärdateien verschiedener abhängiger Pakete gespeichert.

4. dist-Verzeichnis

dist-Verzeichnis ist das Ziel-Build-Verzeichnis für die Vue-Anwendung. Nach Abschluss des Anwendungserstellungsprozesses werden alle Build-Artefakte in diesem Verzeichnis generiert. Im Allgemeinen werden Ressourcendateien wie JS-Dateien, CSS-Dateien, Bilder usw. generiert. Wir müssen die Dateien in diesem Verzeichnis auf dem Server ablegen, um die Anwendung auszuführen.

5. .env-Datei

.env-Datei ist eine Datei zum Speichern von Umgebungsvariablen. Wenn wir eine Vue-Anwendung schreiben, können wir damit einige Umgebungsvariablen konfigurieren. Beispielsweise sind die mit der Entwicklungsumgebung und der Produktionsumgebung verbundenen Backend-Serveradressen unterschiedlich. Nachdem Sie die Variablen konfiguriert haben, die Sie in der .env-Datei verwenden müssen, können Sie sie mit „process.env“ in der Vue-Anwendung abrufen.

6. .gitignore-Datei

.gitignore-Datei ist die Konfigurationsdatei des Git-Versionsverwaltungstools. Diese Datei enthält eine Liste von Dateien und Verzeichnissen, die von Git ignoriert werden müssen. Während des Entwicklungsprozesses müssen einige Dateien nicht versioniert werden, z. B. das Verzeichnis node_modules und das Verzeichnis dist. Nachdem diese Dateien und Verzeichnisse, die nicht in das Warehouse hochgeladen werden müssen, in dieser Datei deklariert wurden, fügt Git sie nicht zum Versionsverlauf hinzu.

Das Obige ist eine detaillierte Einführung in das von Vue erstellte Verzeichnis und dessen Verwendung. Diese Verzeichnisse sind sehr wichtig und spielen eine entscheidende Rolle im Entwicklungs- und Bereitstellungsprozess von Vue-Anwendungen. Entwickler müssen die Rolle jedes Verzeichnisses und seine interne Dateiorganisationsstruktur beherrschen, um hochwertige, wartbare und einfach bereitzustellende Vue-Anwendungen zu entwickeln.

Das obige ist der detaillierte Inhalt vonDas von vue erstellte Verzeichnis und wofür es verwendet wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!