Vue.JS liefert die Vue CLI, um den VUE -Befehl im Terminal zur Verfügung zu stellen, um ein neues Vue -Projekt schnell zu sammeln.JS und leiten Sie den Vue.JS -Projekt verwendet das Vue -Aufschlag Befehl. Vue.JS bietet auch die grafische Benutzeroberfläche zum Verwalten der Projekte mithilfe der vue ui Befehl. Vue.JS wird als Kombination von zwei spektakulären Frameworks, Winkel und Reakt. Es bietet die traditionelle Methode zur Erstellung einer Komponente und in diesem Beitrag werden wir den Prozess des Erstellens und Verstehens von Komponenten in Vue CLI durchlaufen.

Voraussetzungen

Bevor Sie damit anfangen, gibt es einige Voraussetzungen, die Sie haben müssen:

• Grundkenntnisse über HTML, CSS und JavaScript.
• Knoten.JS in Ihrem Betriebssystem installiert.

Überprüfen Sie die Vue -CLI -Installation

Stellen Sie zunächst sicher, dass Sie die neueste Vue -CLI auf Ihrem System installiert haben. Sie können überprüfen, ob die Vue -CLI installiert ist oder nicht in unserem System, indem Sie den unten angegebenen Befehl eingeben:

$ vue -Verssion

Wenn es installiert ist, haben Sie die neueste Version von Vue CLI im Terminal ausgedruckt. Wenn es nicht installiert ist, können Sie entweder den NPM -Paket -Paket -Manager oder den Garnpaket -Manager verwenden, um die VUE CLI zu installieren. Um es mit dem NPM -Paket -Manager zu installieren, müssen Sie den unten angegebenen Befehl im Terminal eingeben:

$ npm install -g @vue/cli

Im obigen Befehl die -G Flag wird zur Installation von Vue CLI weltweit auf Ihrem System verwendet.

Sobald die Vue CLI vollständig installiert ist, können Sie diese überprüfen, indem Sie den unten angegebenen Befehl eingeben:

$ vue -Verssion

Sie haben die neueste Version von Vue CLI in der Ausgabe.

Projekterstellung

Nehmen wir nun an, Sie werden das gesamte Vue -Projekt selbst einrichten. In diesem Fall ist es keine gute Wahl, das Rad neu zu erfinden. Das VUE -Projekt kann mit dem erstellt werden Vue Befehl im Terminal, da die Vue CLI die bereits erzeugten Vorlagen zur Verfügung stellt, um mit dem VUE -Projekt zu beginnen.

Um die VUE -Anwendung zu erstellen, geben Sie einfach den unten angegebenen Befehl im Terminal ein:

$ vue erstellen Projektname

Stellen Sie sicher, dass Sie die ersetzen Projektname mit Ihrem gewünschten Projektnamen und Hit Eingeben.

Nach ein paar Sekunden wird die Auswahl der Standardvoreinstellung oder die manuelle Auswahl einiger Funktionen veranlasst.

Wenn Sie einige benutzerdefinierte Funktionen haben möchten, wählen Sie "Wählen Sie manuell Funktionen", " Drücken Sie die Eingabetaste und Sie werden mit einigen Optionen wie der Auswahl der Vue -Version, dem Hinzufügen von Vuex oder Router aufgefordert. Wählen Sie Ihre gewünschte Option aus und klicken Sie auf Eingeben.

Beantworten Sie einige erforderliche Konfigurationsfragen und speichern Sie die Voreinstellung für zukünftige Projekte.

Das VUE -Projekt wird in einer Weile die Vue CLI erstellt, und Sie können die Entwicklung in Vue beginnen.JS.

Starten Sie die VUE -Anwendung

Sobald das VUE -Projekt erstellt wurde, können Sie das Projekt starten, indem Sie zuerst mit dem CD -Befehl im Terminal zum Verzeichnis des Projekts navigieren:

$ CD-Projektname

Starten Sie im Verzeichnis des Projekts die VUE -Anwendung, indem Sie den unten angegebenen Befehl im Terminal eingeben:

$ npm run serve service

Nach der Zündung der VUE -Anwendung besuchen Sie die HTTP: // localhost: 8080 in der Adressleiste Ihres Lieblingsbrowsers:

Sie haben den Begrüßungsbildschirm des Vue.JS -Projekt.

Schaffung einer Komponente in Vue

Um eine Komponente im VUE -Projekt zu erstellen, erstellen Sie a .Vue Datei in der Komponenten Ordner und geben Sie ihm den Namen Ihrer Wahl an.

Jetzt in diesem neu erstellten .Vue Datei, Sie können HTML, JavaScript und CSS in den, und Tags schreiben.

Öffnen Sie die .Vue Datei und schreiben Sie den Code, den Sie schreiben möchten. Zum Beispiel:

Eine neue Komponente

Dies ist ein Text im Newcomponent.

Sobald Sie mit dem HTML -Teil fertig sind, geben Sie dieser Komponente einen Namen im Tag, wie im folgenden Code -Snippet gezeigt:

Lassen Sie uns nach erfolgreicher Erstellung der Komponente sehen, wie Sie sie importieren und auf einer anderen Seite oder Komponente verwenden.

Importieren einer Komponente in Vue

Die Importsyntax zum Importieren einer Komponente in einer anderen Komponente von VUE ist ziemlich einfach und einfach. Sie müssen die Komponente nur in das Skript -Tag mit der ES6 -Syntax importieren, wie im folgenden Code -Snippet gezeigt:

Nachdem Sie die Komponente erfolgreich importiert haben, müssen Sie lediglich ein Objekt mit dem Namen von erstellen Komponenten und geben den Namen in der Komponenten Objekt wie unten gezeigt:

Jetzt können Sie es überall im Tag der Komponente verwenden. Zum Beispiel, wenn wir es in die importieren wollen App.Vue, Die Syntax wäre so:

Speichern Sie nach Abschluss all dieser Setups jede einzelne Datei, die Sie geändert haben, und kehren Sie zum Browser zurück

Sie können in dem beigefügten Screenshot miterleben, dass die Komponente erfolgreich und vollkommen in Ordnung auf der Webseite importiert wird.

Abschluss

Erstellen, Importieren und Verwenden einer Komponente in jeder anderen Komponente von VUE.JS ist so einfach, es zu sagen. In diesem Beitrag gehen wir den gesamten Prozess der Erstellung, Addition und Verwendung einer Komponente in Vue durch.JS.