Was soll man ins Vue-Gerüst der Öffentlichkeit einbauen?

Im Allgemeinen werden einige statische Ressourcen (Bilder) im öffentlichen Ordner abgelegt. Wenn Webpack sie verpackt, werden sie intakt in den dist-Ordner gepackt. Dateien im öffentlichen Verzeichnis werden von Webpack nicht verarbeitet, sondern direkt in das endgültige Verpackungsverzeichnis kopiert (der Standardwert ist dist/static). Auf diese Dateien muss mit absoluten Pfaden verwiesen werden, was von Ihrer „vue.config.js“ abhängt " In der Konfiguration von publicPath ist der Standardwert „/“.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

1. Vue-Gerüst installieren

1. Schritt eins (wird nur zum ersten Mal ausgeführt): Installieren Sie @vue/cli global

npm i @vue/cli -g

2. Wechseln Sie in das Verzeichnis, in dem Sie das Projekt erstellen möchten Das Projekt

vue create XXX

Bemerkungen:

1. npm Taobao Mirror-Adresse

npm run serve

2 jedes Ordners des vue-cli-Gerüstinitialisierungsprojekts

node_modules-Ordner

: Projektabhängigkeitsordner öffentlicher Ordner:

Platziert im Allgemeinen einige statische Ressourcen (Bilder). Es ist zu beachten, dass im öffentlichen Ordner abgelegte statische Ressourcen beim Packen durch Webpack intakt in den dist-Ordner gepackt werden. Alle im öffentlichen Ordner abgelegten statischen Ressourcen werden einfach kopiert, ohne dass Webpack durchlaufen werden muss. Sie müssen sie über absolute Pfade referenzieren.

Beachten Sie, dass wir empfehlen, Ressourcen als Teil Ihres Modulabhängigkeitsdiagramms zu importieren, damit sie vom Webpack verarbeitet werden und die folgenden Vorteile erhalten:

Skripte und Stylesheets werden komprimiert und gebündelt, wodurch zusätzliche Netzwerkanforderungen vermieden werden.

Wenn eine Datei verloren geht, wird direkt beim Kompilieren ein Fehler gemeldet, anstatt dass auf Benutzerseite ein 404-Fehler generiert wird.

Die endgültig generierten Dateinamen enthalten den Inhalts-Hash, sodass Sie sich keine Sorgen machen müssen, dass Browser ältere Versionen davon zwischenspeichern.
• Das öffentliche Verzeichnis bietet einen Fallback. Wenn Sie es über einen absoluten Pfad referenzieren, achten Sie darauf, wo die Anwendung bereitgestellt wird. Wenn Ihre Anwendung nicht im Stammverzeichnis der Domäne bereitgestellt wird, müssen Sie das Präfix
publicPath
• für Ihre URL konfigurieren:

in public/index.html oder anderen HTML-Dateien, die als Vorlagen über das HTML-Webpack-Plugin verwendet werden. Sie müssen das Link-Präfix über <%= BASE_URL %> festlegen:

npm config set registry https://registry.npm.taobao.org

• In der Vorlage müssen Sie zunächst die Basis-URL an Ihre Komponente übergeben:
  

vue inspect > output.js

Dann:

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

Wann um den Ordner „öffentliche Dateien“ zu verwenden

Sie müssen den Namen einer Datei in der Build-Ausgabe angeben.

Sie haben Tausende von Bildern und müssen deren Pfade dynamisch referenzieren.

Einige Bibliotheken sind möglicherweise nicht mit Webpack kompatibel. In diesem Fall müssen Sie eine unabhängige Bibliothek verwenden.
• vue-cli3.0 verfügt über zwei Verzeichnisse zum Platzieren statischer Ressourcen, nämlich öffentlich und Assets.
• Dateien öffentlicher Orte, die sich nicht ändern (entspricht statisch in vue-cli2.x)

Dateien im Verzeichnis public/ werden von Webpack nicht verarbeitet: Sie werden direkt in das endgültige Verpackungsverzeichnis kopiert (die Standardeinstellung ist dist/statisch). Auf diese Dateien muss mit absoluten Pfaden verwiesen werden. Dies hängt von der publicPath-Konfiguration in Ihrer vue.config.js ab.

Assets-Speicherdateien, die sich ändern können
Dateien im Assets-Verzeichnis werden vom Webpack verarbeitet und in Modulabhängigkeiten geparst, und es werden nur relative Pfadformen unterstützt.

Um es einfach auszudrücken: Die JS-Dateien anderer Personen werden öffentlich abgelegt (das heißt, sie werden nicht geändert), und Assets legen die von Ihnen selbst geschriebenen JS-Dateien ab (Dateien, die geändert werden müssen)

src-Ordner

    Assets-Ordner: Wird im Allgemeinen zum Speichern statischer Ressourcen verwendet (statische Ressourcen, die von mehreren Komponenten gemeinsam genutzt werden). Es ist erwähnenswert, dass Webpack die statischen Ressourcen als Modul behandelt und sie in JS verpackt die Datei.                                                                                                                                                                                                                         # .gitignore: Konfiguration wird von der Git-Versionskontrolle ignoriert (im Allgemeinen nicht berührt)

      babel.config.js: babels Konfigurationsdatei (entspricht einem Übersetzer, z. B. der Übersetzung von ES6-bezogener Syntax in ES5, mit besserer Kompatibilität, im Allgemeinen nicht berührt )

Package.json: Anwendungspaket-Konfigurationsdatei (ähnlich einer Projekt-ID-Karte, die Projektnamen, Projektabhängigkeiten, Projektausführung und andere Informationen aufzeichnet)

Package-lock.json: Paketversionskontrolldatei (Caching-Datei)

README. md: Anwendungsbeschreibungsdatei (beschreibende Datei)

vue.config.js: Gerüst kann angepasst werden. Informationen zur Konfiguration finden Sie in Vue CLI

Andere Ordner:

• pages-Datei Ordner: speichert Routing-bezogene Komponenten (Seiten können auch durch Ansichten ersetzt werden)

• Router-Ordner: Routing-Konfigurationsdatei

• Store-Ordner: Vuex-bezogene Dateien

• Mock-Ordner: speichert Scheinsimulationsdaten

3. Gerüst-Arbeitsumgebung

vue-cli-Gerüstumgebung: basierend auf node + Webpack, um uns beim Schreiben von Vue-Projekten zu unterstützen

Standardeintragsdatei main.js: Alle Codes müssen direkt oder indirekt mit main.js generiert werden Die Einführungsbeziehung

Paketierungsprozess: Beim Ausführen der Paketierung erstellt Webpack eine Codezuordnung basierend auf der Eingabebeziehung, übersetzt den relevanten Code mit einem Loader/Plug-In, gibt ihn in eine .js-Datei aus und fügt ihn in den Index ein. html Ausführen

① main.js → Paket und Eintrag ausführen

② Vue.component("Komponentenname", Komponentenobjekt) → Eine globale Komponente für Vue registrieren

Ausführungssequenz: Registrieren Sie zunächst die globale Komponente über main.js Datei und verwenden Sie dann diese globale Komponente innerhalb der Komponente

Das obige ist der detaillierte Inhalt vonWas soll man ins Vue-Gerüst der Öffentlichkeit einbauen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!