So starten Sie ein Vue.js-Projekt

1. Node.js und Vue

1.1 Node.js

• Node.js ist eine JavaScript-Laufzeitumgebung, die auf der Chrome V8-Engine basiert. Node.js verwendet ein ereignisgesteuertes, nicht blockierendes E/A-Modell.
• [Node ist eine Entwicklungsplattform, die die Ausführung von JavaScript auf dem Server ermöglicht, wodurch JavaScript zu einer Skriptsprache wird, die serverseitigen Sprachen wie PHP, Python, Perl und Ruby ebenbürtig ist. Es wurde im Mai 2009 veröffentlicht, von Ryan Dahl entwickelt und ist im Wesentlichen ein Wrapper für die Chrome V8-Engine.
• Node optimiert einige spezielle Anwendungsfälle und bietet alternative APIs, damit V8 in Nicht-Browserumgebungen besser läuft. Die V8-Engine führt Javascript sehr schnell aus und hat eine sehr gute Leistung. Node ist eine auf der Chrome JavaScript-Laufzeitumgebung basierende Plattform, mit der sich auf einfache Weise schnell reagierende und leicht skalierbare Netzwerkanwendungen erstellen lassen. Node verwendet ein ereignisgesteuertes, nicht blockierendes E/A-Modell, das es leicht und effizient macht. Damit eignet es sich ideal für die Ausführung datenintensiver Echtzeitanwendungen auf verteilten Geräten.

Einfach ausgedrückt entspricht Node.js einer Kompilierungsumgebung für unser Projekt, ähnlich der für die Kompilierung der Java-Sprache erforderlichen JVM-virtuellen Maschine. Nach der Installation von Node.js können wir das Node-Projekt kompilieren.

1.2 Vue.js

• Vue (ausgesprochen /vjuː/, ähnlich wie view) ist ein fortschrittliches JavaScript-Framework zum Erstellen von Benutzeroberflächen. Anders als andere große Frameworks ist Vue darauf ausgelegt, Schicht für Schicht von unten nach oben angewendet zu werden. Die Kernbibliothek von Vue konzentriert sich nur auf die Ansichtsebene und erleichtert so die Integration in Bibliotheken von Drittanbietern oder vorhandene Projekte.
• Das Ziel von Vue.js ist die Implementierung von responsiver Datenbindung und kombinierten Ansichtskomponenten über die einfachste mögliche API
• Vue.js selbst ist kein Framework mit vollem Funktionsumfang – es konzentriert sich nur auf die Ansichtsebene. Daher ist es sehr leicht zu erlernen und sehr einfach in andere Bibliotheken oder bestehende Projekte zu integrieren. Andererseits kann Vue.js auch komplexe Single-Page-Anwendungen perfekt ausführen, wenn die entsprechenden Tools und unterstützenden Bibliotheken verwendet werden.
• Funktionen von Vue.js: Einfach zu verwenden: Schneller Einstieg basierend auf HTML, CSS, JavaScript. Flexibel: Ein einfacher und kompakter Kern und ein fortschrittlicher Technologie-Stack reichen aus, um Anwendungen jeder Größe zu bewältigen. Hohe Leistung: 20 KB min. + GZIP-Laufzeitgröße, ultraschneller virtueller DOM und die unkomplizierteste Optimierung

Einfach ausgedrückt ist Vue.js ein Anwendungsframework, das der Spring-Reihe in Java ähnelt. Es bietet uns eine prägnante und effiziente Syntax und kann uns dabei helfen, ein Front-End-Projekt effizient und mit hoher Qualität abzuschließen. Da es sich gleichzeitig um ein leichtgewichtiges Framework handelt, müssen wir nur vue.js einführen, um seine Syntax zu verwenden.

1.3 Überblick über diesen Artikel

In diesem Artikel zeigt Ihnen der Blogger, wie Sie das Vue.js-Projekt lokal ausführen und gleichzeitig das Vue-Projekt unabhängig auf dem Server bereitstellen können.

2. Führen Sie das Front-End-Vue-Projekt in der lokalen Entwicklungsumgebung aus

2.1 Laden Sie Node.js herunter und installieren Sie es

Download-Adresse: https://nodejs.org/zh-cn/

Wählen Sie die Windows-Version. Es wird empfohlen, die Version mit Langzeitsupport auszuwählen. Klicken Sie bei der entsprechenden Aufforderung einfach auf „OK“. Nach der Installation von node.js werden die Umgebungsvariablen automatisch konfiguriert. Öffnen Sie nach Abschluss der Installation das cmd-Fenster und geben Sie den Befehl ein: node --version. Wenn der folgende Inhalt angezeigt wird, bedeutet dies, dass die Installation erfolgreich war, wie in der Abbildung dargestellt:

2.2 Installieren Sie Front-End-Entwicklungstools

WebStrom und VsCode werden häufig im Frontend verwendet. Hier ist eine Einführung in die Installation von WebStrom:

1. Laden Sie WebStorm herunter: Download-Adresse https://www.jetbrains.com/zh-cn/webstorm/download/

2. Installieren Sie WebStrom. Im Internet gibt es viele Tutorials. Sie können Baidu nach Einzelheiten durchsuchen. Wenn Sie es längere Zeit nicht verwenden, können wir es 30 Tage lang kostenlos testen.

3. Importieren Sie das Projekt: Klicken Sie auf Datei -> Öffnen -> wählen Sie das spezifische Front-End-Projekt aus, klicken Sie auf OK -> warten Sie, bis der Index erstellt wurde

4. Allgemeine Befehle:

Erstellen Sie das Projekt:

npm installieren

Starten des Dienstes

npm-Ausführung dev

Klicken Sie auf den angegebenen URL-Pfad und öffnen Sie den Browser, um den Dienst anzuzeigen, wie in der Abbildung gezeigt:

2.3 Beginnen Sie mit der Verwendung des Befehls in package.json:

Wir können zum Starten direkt auf den grünen Pfeil klicken, wie in der Abbildung gezeigt:

Das Bild zeigt Intellij IDEA. WebStrom wird in ähnlicher Weise eingesetzt.

Es gibt noch weitere Befehle, auf die ich hier aber nicht näher eingehen werde. Bei Fragen können die Studenten auf Baidu suchen.

3. Stellen Sie das Front-End-Vue-Projekt in der Serverumgebung bereit

3.1 Node.js-Umgebung bereitstellen

• Siehe dieses Tutorial https://blog.csdn.net/qq_37128049/article/details/104431768
• Installieren Sie einfach Node, das mit Npm geliefert wird.
• Die in diesem Tutorial konfigurierten Node-Umgebungsvariablen sind temporäre Umgebungsvariablen und müssen beim Neustart des Projekts neu geschrieben werden. Wenn Studierende permanente Umgebungsvariablen benötigen, können sie das Online-Tutorial zu Rate ziehen.

3.2 Installieren Sie den Express-Generator-Generator

Geben Sie den folgenden Befehl ein, um den Generator zu installieren:

npm installiere Express-Generator -g

Erstellen Sie ein Expressprojekt:

express expressDemo (ersetzen Sie expressDemo durch Ihren eigenen Projektnamen)

Das expressDemo-Projektverzeichnis ist wie folgt:

Geben Sie das Projekt ein:

CD ExpressDemo

Wenn Sie es in Ihren eigenen Projektnamen ändern, wird expressDemo hier in Ihren eigenen Projektnamen geändert

Projektaufbau:

npm installieren

Öffnen Sie unser Windows-Entwicklungstool, verwenden Sie den Befehl npm build, um das Projekt zu verpacken, und kopieren Sie die Dateien unter „public“ in das öffentliche Verzeichnis in expressDemo:

Geben Sie den folgenden Befehl ein, um expressDemo auszuführen:

npm starten

Öffnen Sie den Browser und geben Sie http://localhost:3000 ein, um den Effekt zu sehen

Wenn wir es auf einem Server bereitstellen und die Auswirkungen auf unserem eigenen Computer sehen möchten, müssen wir Folgendes beachten: 1. Ersetzen Sie localhost durch die Server-IP und Port 3000 durch den tatsächlichen Port. 2. Wenn der Zugriff beim Start fehlschlägt, überprüfen Sie, ob die Firewall für diesen Port geöffnet ist.

So starten Sie ein Vue-Projekt: Das Obige beschreibt, wie man ein Vue-Projekt startet. Es gibt noch viele andere Möglichkeiten und Studenten können online Antworten finden. Der einfachste Weg besteht darin, alle Codes direkt zu kopieren und npm install+npm run dev auszuführen, um erfolgreich zu starten; wenn es sich nicht um ein Vue-Projekt, sondern um ein Node.js-Projekt handelt, können Sie diese Methode auch verwenden!

Oben finden Sie Einzelheiten zum Starten eines Vue.js-Projekts. Weitere Informationen zum Starten eines Vue.js-Projekts finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!