Analyse der Verzeichnisstruktur nach dem Erstellen des Projekts mit Vue-cli (Bild und Text)

Der Inhalt dieses Artikels befasst sich mit der Analyse der Verzeichnisstruktur nach der Erstellung des Vue-cli-Projekts. Es hat einen guten Referenzwert und ich hoffe, dass es Freunden in Not helfen kann.

1. Vorwort

Vue schränkt Ihre Codestruktur nicht ein. Es legt jedoch einige Regeln fest, die befolgt werden müssen:
1. Der Status auf Anwendungsebene sollte in einem einzigen Store-Objekt konzentriert werden.
2. Das Einreichen einer Mutation ist die einzige Möglichkeit, den Zustand zu ändern, und dieser Prozess ist synchron.
3. Asynchrone Logik sollte in Aktionen gekapselt werden.

2. Das Projektdateiverzeichnis wird wie folgt angezeigt

3.1 Build-Datei

build: Einige Konfigurationen von Webpack werden im Ordner gespeichert. Webpack ist ein Tool zum Kompilieren, Ausführen und Packen von Projekten für Front-End-Websites.

build.js: Es ist das, was wir nach Abschluss des Projekts ausführen müssen. Wir können unsere Projektdateien in statische Dateien packen und sie im Dist-Ordner im Projektstammverzeichnis speichern (dies ist (noch nicht im Verzeichnis) (Ordner, der beim Erstellen automatisch generiert wird).
check-versions.js: Überprüft hauptsächlich, ob die Versionen einiger abhängiger Tools anwendbar sind, z. B. nodejs und npm. Wenn die Version zu niedrig ist, wird eine Meldung angezeigt.
logo.png: speichert das vuelogo-Bild.
utils.js: Bietet Toolfunktionen, einschließlich der Generierung von Ladeprogrammen für die Verarbeitung verschiedener Stilsprachen und Toolfunktionen zum Abrufen von Speicherpfaden für Ressourcendateien.
vue-loader.conf.js: Einführung von utils.js, einer Datei, die zum Wechseln des Entwicklungsmodus und des Produktionsmodus verwendet werden sollte, sodass Loader in verschiedenen Modi analysiert werden können.
webpack.base.conf.js: Diese Konfigurationsdatei ist die Wepack-bezogene Konfigurationsdatei der Vue-Entwicklungsumgebung. Sie wird hauptsächlich zur Konfiguration verschiedener Dateien verwendet.
webpack.dev.conf.js: Basierend auf webpack.base.conf wird die Konfiguration unter der Entwicklungsumgebung hinzugefügt und verbessert.
webpack.prod.conf.js: Die während der Erstellung verwendete Webpack-Konfiguration stammt von webpack.prod.conf.js, die auch basierend auf webpack.base.conf weiter verbessert wurde. Ein Beispiel für die Datei

lautet wie folgt:

3.2-Konfigurationsdatei

config: Die Datei enthält Konfigurationsdateien für die Webpack-Umgebung.

index.js: Beschreibt die Konfiguration sowohl in Entwicklungs- als auch in Build-Umgebungen.
dev.env.js, prod.env.js, test.env.js: Diese drei Dateien legen einfach Umgebungsvariablen fest. Ein Beispiel für die Datei

lautet wie folgt:

3.3 node_moules-Datei

node_moules: Die von npm geladenen Projektabhängigkeitsmodule werden hier gespeichert. Abhängigkeiten, die in Zukunft hinzugefügt werden müssen, werden hier ebenfalls platziert. Ein Beispiel für die Datei

lautet wie folgt:

3.4 src-Datei

src: Komponenten und Eintragsdateien platzieren.

Assets: Ein Verzeichnis, das hauptsächlich einige statische Bildressourcen speichert.
Komponenten: Hier sind verschiedene Komponenten gespeichert, die für die Entwicklung benötigt werden. Jede Komponente wird zu einem vollständigen Projekt zusammengefügt.
Router: speichert die Projekt-Routing-Datei.
App.vue: Es ist die Hauptkomponente des Projekts und der Ausgang für alle Komponenten und Routen des Projekts. Es wird dann in der index.html im Stammverzeichnis des Projekts gerendert und angezeigt. Wir können hier einige schreiben, die für globale CSS-Stile geeignet sind.
main.js: Eintragsdatei, die das Vue-Modul, die App.vue-Komponente und den Routing-Router vorstellt. Einige Dinge, die wir global verwenden müssen, können darin auch definiert werden.

Eine Beispieldatei sieht so aus:

3.5 statische Dateien

statisch: Es speichert die statischen Dateien des Projekts. Es wird zum Speichern einiger externer JS- und CSS-Dateien verwendet, die verwendet werden müssen. Sie werden von hier aus in die Datei importiert.

Ein Beispiel für die Datei lautet wie folgt:

3.5-Testdatei

test: Erstes Testverzeichnis.
Unit: Unit-Test, Sie können Unit-Tests für jede Komponente schreiben und diese im Verzeichnis test/unit/specs ablegen. Es wird empfohlen, dass die Verzeichnisstruktur der Unit-Testfälle mit dem Test übereinstimmt file (relativ zu src ), jeder Testfalldateiname endet mit .spec.js. Wenn die NPM-Laufeinheit ausgeführt wird, werden alle spec.js-Dateien durchlaufen und der Testbericht wird im Verzeichnis test/unit/coverage ausgegeben.
e2e: e2e oder End-to-End- oder UI-Testing ist eine Testmethode, mit der getestet wird, ob der Prozess einer Anwendung von Anfang bis Ende wie geplant ist. Ein Beispiel für die Datei

lautet wie folgt:

3.6 Andere Dateien

.babelrc: Konfiguration der ES6-Syntaxkompilierung.
.editorconfig: Code-Schreibspezifikationen.
.eslintignore: Erstellen Sie eine Datei im Stammverzeichnis des Projekts, um ESLint anzuweisen, bestimmte Dateien und Verzeichnisse zu ignorieren. Diese Datei ist eine reine Textdatei.
.eslintrc.js: eslint-Konfigurationsdatei eslint ist ein Tool zum Verwalten und Erkennen des js-Codestils. Es kann mit Editoren wie dem eslint-Plug-in von vscode verwendet werden. Wenn Code vorhanden ist, der nicht mit dem Inhalt der Konfigurationsdatei übereinstimmt, wird ein Fehler oder eine Warnung gemeldet.
.gitignore: Ignorierte Dateien.
.postcssrc.js: Kompatibilitätsoption (wenn postcss installiert wurde, ist eine umfangreiche Loader-Konfiguration erforderlich und die Datei „.postcssrc.js“ wird im Projektstammverzeichnis generiert).
index.html: Projektdateieintrag.
package.json: Abhängigkeitskonfigurationsdatei für Projekte und Tools.
README.md: Projektbeschreibung.

Das Dateibeispiel lautet wie folgt:

Verwandte Empfehlungen:

Vue Der anfängliche Bauprozess des Projekts (Bilder und Text)

Das obige ist der detaillierte Inhalt vonAnalyse der Verzeichnisstruktur nach dem Erstellen des Projekts mit Vue-cli (Bild und Text). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!