Heim Web-Frontend js-Tutorial Detaillierte Erläuterung der Verwendung des Vue-Cli-Gerüsts zum Initialisieren der Projektstruktur im Rahmen des Vue-Projekts

Detaillierte Erläuterung der Verwendung des Vue-Cli-Gerüsts zum Initialisieren der Projektstruktur im Rahmen des Vue-Projekts

May 31, 2018 pm 05:13 PM
vue-cli 初始化 脚手架

In diesem Artikel wird hauptsächlich die Projektstruktur der Verwendung des Vue-Cli-Gerüsts zur Initialisierung des Vue-Projekts ausführlich erläutert. Jetzt werde ich es mit Ihnen teilen und Ihnen eine Referenz geben.

vue-cli ist ein offizielles Befehlszeilentool von Vue, mit dem schnell umfangreiche Einzelseitenanwendungen erstellt werden können. Das Tool bietet eine sofort einsatzbereite Build-Tool-Konfiguration und ermöglicht so einen modernen Front-End-Entwicklungsprozess. Das Erstellen und Starten eines Projekts mit Hot-Reload, statischen Prüfungen beim Speichern und einer produktionsbereiten Build-Konfiguration dauert nur wenige Minuten.

Die Verwendung von vue-cli hat die folgenden großen Vorteile:

  1. vue-cli ist ein ausgereiftes Vue-Projektarchitekturdesign, das aktualisiert wird, wenn sich die Vue-Version ändert

  2. vue-cli bietet eine Reihe lokaler Hot-Loading-Testserver

  3. vue-cli integriert eine verpackte Online-Lösung, die Build-Tools wie verwenden kann Webpack oder Browserify

Installieren

Vue-cli installieren

# 必须全局安装vue-cli,否则无法使用vue命令
# 安装完成之后使用vue -V检查vue-cli是否安装成功及版本信息

$ npm install -g vue-cli
$ vue -V
Nach dem Login kopieren

Projekt erstellen

Nächste Verwendung vue-cli zum Erstellen eines neuen Vue-Projekts

# 项目创建完之后需要执行npm install安装依赖

$ vue init webpack vuedemo
$ npm install
Nach dem Login kopieren

Die Dateien im erstellten Vuedemo-Ordner lauten wie folgt:

[index.html]

index.html ist dasselbe wie andere HTML-Dateien, es wird jedoch im Allgemeinen nur ein leerer Stammknoten definiert. Die in main.js definierte Instanz wird unter dem Stammknoten gemountet vue-Komponenten. Da alle Mount-Elemente durch das von Vue generierte DOM ersetzt werden, wird nicht empfohlen, Instanzen direkt in <html> oder <body> zu mounten.

[main.js]

ist die Eingabedatei der Vue-Anwendung, die zum Erstellen einer neuen Vue-Instanz usw. verwendet wird Die Instanz wird unter dem Root-Knoten gemountet und kann auch zum Einführen des Vue-Plug-Ins verwendet werden

'el'-Option: Geben Sie ein DOM-Element an, das bereits auf der Seite vorhanden ist als eine Vue-Instanz Das Montageziel, hier ist der Knoten mit der ID „app“ in index.html

Option „Router“: Fügen Sie die Router-Instanz in die Vue-Root-Instanz ein, sodass jede ihrer Unterkomponenten darauf zugreifen kann $router (Router-Instanz) und $route (derzeit aktiviertes Routing-Informationsobjekt)

'template'-Option: Verwenden Sie eine Zeichenfolgenvorlage als Kennung der Vue-Instanz

'components': Stammkomponente

[App.vue]

Die Stammkomponente des Projekts, die andere Unterkomponenten enthalten kann, um einen Komponentenbaum zu bilden

kann nur einen untergeordneten Knoten enthalten, was bedeutet, dass es nur ein p der obersten Ebene geben kann (wie in der Abbildung gezeigt, das p-Element mit der ID von ' app' hat keine Geschwisterknoten)

<script></script> wird normalerweise in es6 geschrieben Wenn Sie den Bereich standardmäßig definieren müssen, müssen Sie zum Arbeiten unter dieser Komponente den Bereich

[router/index.js]

Routing Die Konfigurationsdatei wird verwendet, um Komponenten Routen zuzuordnen, sodass Sie wissen, wo sie gerendert werden müssen

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Lösung des Problems, dass die Seite nicht gerendert wird, wenn Vue das Array über die folgende Tabelle ändert

vue2. 0 Axios Cross-Domain Merge Lösung für Rendering-Problem

Lösung für Options-Overlay-Problem von Select in Laui

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des Vue-Cli-Gerüsts zum Initialisieren der Projektstruktur im Rahmen des Vue-Projekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Windows kann den Gerätetreiber für diesen Hardware-Fix (Code 37) nicht initialisieren Windows kann den Gerätetreiber für diesen Hardware-Fix (Code 37) nicht initialisieren Apr 14, 2023 pm 01:22 PM

Wenn Windows erkennt, dass der Treiber eines Geräts inkompatibel oder beschädigt ist, kann es ihn nicht initialisieren. Das Gerät funktioniert nicht mehr und wenn der Benutzer nachforscht, wird im Bereich „Gerätestatus“ die Fehlermeldung „Windows kann den Gerätetreiber für diese Hardware nicht initialisieren (Code 37)“ angezeigt. Die Lösung dieses Problems ist einfach und Sie können es leicht tun. Fix 1 – Scannen Sie Ihren Computer Sie können Ihr Gerät auf Hardwareänderungen scannen. Windows wird schließlich alle Treiberänderungen prüfen und erkennen. 1. Sie müssen nur mit der rechten Maustaste auf die „Windows-Taste“ klicken und auf „Geräte-Manager“ klicken. 2. Wenn der Geräte-Manager auf Ihrem System angezeigt wird, klicken Sie in der Menüleiste auf Aktionen. 3. Hier,

FIX: Windows kann den Gerätetreiber für diese Hardware nicht initialisieren FIX: Windows kann den Gerätetreiber für diese Hardware nicht initialisieren Apr 13, 2023 pm 01:19 PM

Fehlercode 37 bedeutet, dass Windows ein Problem mit dem Gerätetreiber erkannt hat und das Hardwaregerät nicht starten kann. Dies bedeutet, dass der Software-Gerätetreiber nicht korrekt auf Ihrem System installiert ist oder die Hardware, die Sie verwenden möchten, nicht mit Windows kompatibel ist. Sie wissen bereits, dass Treiber für die reibungslose Funktion Ihres Geräts von entscheidender Bedeutung sind. Wenn Sie also ein Hardwaregerät verwenden, müssen Sie diesen Fehler sofort beheben. In diesem Artikel zeigen wir Ihnen verschiedene Möglichkeiten, diesen Fehler zu umgehen. Was verursacht den Windows-Fehlercode 37? Wenn Sie Folgendes erhalten: Windows kann den Gerätetreiber für diese Hardware nicht initialisieren. (Code 37) Meldung, kann dies durch verschiedene Probleme verursacht werden, darunter: Kompatibilitätsprobleme – wenn Sie eine Festplatte hinzufügen

Was tun, wenn die Initialisierungsroutine der Dynamic Link Library fehlschlägt? Was tun, wenn die Initialisierungsroutine der Dynamic Link Library fehlschlägt? Dec 29, 2023 am 10:30 AM

Lösung: 1. Installieren Sie die Anwendung neu. 3. Systemwiederherstellung oder Checkpoint-Wiederherstellung. 5. Überprüfen Sie die Startelemente und Dienste. Überprüfen Sie die offizielle Dokumentation oder Foren. 8. Erwägen Sie Sicherheitssoftware. 9. Überprüfen Sie die Ereignisanzeige. 10. Suchen Sie Hilfe von Experten.

So initialisieren Sie den Computer unter Win7 So initialisieren Sie den Computer unter Win7 Jan 07, 2024 am 11:53 AM

Das Win7-System ist ein hervorragendes Hochleistungssystem. Während der kontinuierlichen Nutzung von Win7 fragen sich viele Freunde, wie man den Computer in Win7 initialisiert. Heute zeigt Ihnen der Editor, wie Sie die Werkseinstellungen auf einem Win7-Computer wiederherstellen. Verwandte Informationen zur Initialisierung des Computers in Win7: Detaillierte Anweisungen mit Bildern und Text. Schritte: 1. Öffnen Sie das „Startmenü“ und geben Sie es ein. 2. Klicken Sie unten links, um die Einstellungen einzugeben. 3. Wählen Sie in der Benutzeroberfläche der Win10-Aktualisierungs- und Wiederherstellungseinstellungen die Option aus. 4. Klicken Sie unten auf „Alle Inhalte entfernen und Windows neu installieren“. 5. Sie können die folgenden „Initialisierungs“-Einstellungen sehen und dann auf klicken. 6. Geben Sie die Einstellungsoption „Ihr Computer verfügt über mehrere Laufwerke“ ein. Hier gibt es zwei Optionen, die Sie je nach Situation auswählen können.

So setzen Sie die Netzwerkeinstellungen von Win7 zurück So setzen Sie die Netzwerkeinstellungen von Win7 zurück Dec 26, 2023 pm 06:51 PM

Das Win7-System ist ein sehr hervorragendes Hochleistungssystem. Viele Freunde des Win7-Systems suchen nach einer Möglichkeit, die Netzwerkeinstellungen in Win7 zu initialisieren. Werfen wir einen Blick darauf beim Tutorial. Ausführliches Tutorial zum Initialisieren der Netzwerkeinstellungen in Win7: Grafische Schritte: 1. Klicken Sie auf das Menü „Start“, suchen und öffnen Sie die „Systemsteuerung“ und klicken Sie dann auf „Netzwerk- und Freigabecenter“. 2. Suchen Sie dann nach „Adaptergerät ändern“ und klicken Sie darauf. 3. Klicken Sie anschließend im sich öffnenden Fenster mit der rechten Maustaste auf „Lokale Verbindung“ und dann auf „Eigenschaften“. 4. Suchen Sie nach dem Öffnen nach „Internet Protocol Version (TCP/IPv4)“ und verdoppeln Sie es

Behebung: Grafiksystemfehler konnte auf dem PC nicht initialisiert werden Behebung: Grafiksystemfehler konnte auf dem PC nicht initialisiert werden Mar 08, 2024 am 09:55 AM

Viele Spieler sind mit dem frustrierenden Problem konfrontiert, dass das Spiel das Grafiksystem nicht initialisieren konnte. In diesem Artikel gehen wir auf die häufigsten Gründe für dieses Problem ein und finden einfache, aber effektive Lösungen, mit denen Sie im Handumdrehen wieder auf dem Brett landen und das Level meistern können. Wenn Sie also in Rollercoaster Tycoon, Assassin’s Creed, Tony Hawk’s Pro Skater usw. die Fehlermeldung „Grafiksystem konnte nicht initialisiert werden“ erhalten, befolgen Sie die in diesem Artikel genannten Lösungen. Initialisierungsfehler Das Grafiksystem konnte nicht initialisiert werden. Grafikkarten werden nicht unterstützt. Beheben Sie die Fehlermeldung „Das Grafiksystem konnte nicht initialisiert werden“. Um den Fehler „Das Grafiksystem konnte nicht initialisiert werden“ in Spielen wie Rollercoaster Tycoon, Assassin’s Creed, Tony Hawk’s Pro Skater usw. zu beheben, können Sie die folgenden Problemumgehungen ausprobieren: Aktualisieren Sie Ihren Grafikkartentreiber Kompatibilitätsmodus

C++-Programminitialisierungswörterbuch C++-Programminitialisierungswörterbuch Sep 09, 2023 pm 07:01 PM

C++ unterscheidet sich von Python durch ein Wörterbuch mit demselben Namen, verfügt jedoch über dieselbe Datenstruktur mit ähnlicher Funktionalität. C++ unterstützt Mapping, das in der STL-Klasse std::map verwendet werden kann. Das Kartenobjekt enthält in jedem Eintrag ein Wertepaar, einer ist der Schlüsselwert und der andere ist der Kartenwert. Mithilfe von Schlüsselwerten werden Einträge in der Karte gesucht und eindeutig identifiziert. Während zugeordnete Werte nicht unbedingt eindeutig sind, müssen Schlüsselwerte in der Karte immer eindeutig sein. Werfen wir einen Blick auf die Verwendung von Mapping. Sehen wir uns zunächst an, wie man eine zugeordnete Datenstruktur in C++ definiert. Syntax #includemap<data_type1,data_type2>myMap; Nehmen wir ein Beispiel, um zu sehen, wie das geht – Beispiel #incl

Fix: Neue SSD wird in Windows 11, 10 nicht angezeigt Fix: Neue SSD wird in Windows 11, 10 nicht angezeigt Apr 14, 2023 pm 02:52 PM

SSDs haben die Welt der Technologie revolutioniert. Diese Datenspeicherlösungen mit ihren ultraschnellen und beispiellosen Lese-/Schreibgeschwindigkeiten wecken bei jedem Benutzer den Wunsch, sein Systembetriebssystem darauf zu installieren. Was aber, wenn Ihre neue SSD nicht auf Ihrem Windows-Gerät angezeigt wird? Dies ist ein typisches Problem, das auftreten kann, wenn eine brandneue SSD an Ihr System angeschlossen ist. Mach dir keine Sorge. Wir haben gerade die richtige Lösung gefunden. Sie müssen nur diese Schritte befolgen und Ihre SSD ist in kürzester Zeit wieder in Ihrem Datei-Explorer. Lösung – 1. Überprüfen Sie die SSD-Verbindung. Wenn Sie einen USB-Hub verwenden, schließen Sie die SSD direkt an Ihr System an. Überprüfen Sie die Anschlüsse der SSD auf physische Mängel.

See all articles