suchen

Heim >Web-Frontend >js-Tutorial >So verwenden Sie die Gerüstinitialisierung von vue-cli

So verwenden Sie die Gerüstinitialisierung von vue-cli

php中世界最好的语言
php中世界最好的语言Original
2018-03-28 14:59:011684Durchsuche

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:

  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

So installieren Sie vue-cli

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

Erstellen Sie ein Projekt

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 < hinzufügen. /style>

[router/index.js]

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.js


So teilen Sie Code basierend auf auf Webpack

Das 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!

Stellungnahme：
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
Vorheriger Artikel：Eine kurze Analyse des JS-AusführungsmechanismusNächster Artikel：Eine kurze Analyse des JS-Ausführungsmechanismus

In Verbindung stehende Artikel

Mehr sehen