Dieses Mal zeige ich Ihnen, wie Sie die Vue-Cli-Gerüstinitialisierung verwenden und welche Vorsichtsmaßnahmen bei der Verwendung von Vue-Cli-Gerüsten zu beachten sind. Das Folgende ist ein praktischer Fall. Werfen wir einen Blick darauf.
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:
vue-cli ist ein ausgereiftes Vue-Projektarchitekturdesign, das aktualisiert wird, wenn sich die Vue-Version ändert
vue-cli bietet eine Reihe lokaler Hot-Loading-Testserver
vue-cli integriert eine verpackte Online-Lösung, die Build-Tools wie verwenden kann Webpack oder Browserify
Installieren
So installieren Sie vue-cli
# 必须全局安装vue-cli，否则无法使用vue命令 # 安装完成之后使用vue -V检查vue-cli是否安装成功及版本信息 $ npm install -g vue-cli $ vue -V
Als nächstes verwenden Sie vue-cli, um ein neues Vue-Projekt zu erstellen
# 项目创建完之后需要执行npm install安装依赖 $ vue init webpack vuedemo $ npm install
Der erstellte Vuedemo-Ordner enthält die folgenden Dateien:
[index.html]
index.html ist dasselbe wie andere HTML-Dateien, definiert jedoch im Allgemeinen nur einen leeren Stammknoten, der in main.js definiert ist. Die Instanz wird sein Wird unter dem Stammknoten gemountet und der Inhalt wird durch Vue-Komponenten gefüllt. Da alle Mount-Elemente durch das von Vue generierte DOM ersetzt werden, wird nicht empfohlen, die Instanz direkt auf <html> oder <body> zu mounten.
[main.js]
ist die Eingabedatei der Vue-Anwendung, die zum Erstellen verwendet wird Erstellen Sie eine neue Vue-Instanz und mounten Sie diese Instanz unter dem Stammknoten. Sie kann auch zum Einführen des Vue-Plug-Ins verwendet werden.
'el'-Option: Geben Sie eine vorhandene an auf der Seite Das DOM-Element wird als Montageziel der Vue-Instanz verwendet. Hier ist der Knoten mit der ID „app“ in index.html
Option „Router“: Injizieren Sie die Router-Instanz in das Vue-Stammverzeichnis Instanz, sodass jede ihrer untergeordneten Komponenten auf $router (Router-Instanz) und $route (aktuell aktiviertes Routing-Informationsobjekt) zugreifen kann
Option „template“: Verwenden Sie eine Zeichenfolgenvorlage als Kennung der Vue-Instanz
'Komponenten': Stammkomponente
[App.vue]
Die Stammkomponente des Projekts, die andere Unterkomponenten enthalten kann, um eine zu bilden Komponentenbaum
kann nur einen untergeordneten Knoten enthalten, was bedeutet, dass es nur ein p der obersten Ebene geben kann (wie in gezeigt). Abbildung: Das p-Element mit der ID „app“ hat keine Geschwisterknoten.
<script></script> wird normalerweise in es6 geschrieben 🎜>, was sich auf die ganze Welt auswirkt. Wenn Sie einen Bereich definieren möchten, der nur unter dieser Komponente funktioniert, müssen Sie der Bezeichnung
Route
Konfigurationsdatei, die zum Zuordnen von Komponenten zu Routen verwendet wird, damit Sie es wissen wo man sie rendert
Ich glaube, Sie haben den Fall in diesem Artikel gelesen. Sie beherrschen die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf PHP Chinesische Website!
Empfohlene Lektüre:
So aktualisieren Sie das Array mit $set in vue.jsSo teilen Sie Code basierend auf auf WebpackDas obige ist der detaillierte Inhalt vonSo verwenden Sie die Gerüstinitialisierung von vue-cli. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Array-Initialisierungsmethode
Die Initialisierungsroutine der Dynamic Link Library ist fehlgeschlagen
Verwendung der fscanf-Funktion
So installieren Sie den Treiber
So stellen Sie Chinesisch in vscode ein
So passen Sie die Textgröße in Textnachrichten an
Was soll ich tun, wenn der Docker-Container nicht auf das externe Netzwerk zugreifen kann?
Was ist das Copyright-Symbol?
