Wie man Vue.JS auf Ubuntu 22.04 installiert

Vue.js ist ein JavaScript-Framework, das verwendet wird, um eine interaktive Benutzeroberfläche und einseitige Anwendungen zu erstellen. Es ist leichter und anpassungsfähiger als das AngularJS-Framework. Es ist einfach, flexibel, modular, hochleistungsfähig, leicht zu erlernen und bietet viele Werkzeuge und Bibliotheken, die die Anwendungsentwicklung erleichtern. Wenn Sie grundlegendes HTML, CSS und JavaScript kennen, können Sie schnell mit dem Bau von Webanwendungen mit Vue.js beginnen.

Diese Anleitung zeigt Ihnen, wie Sie Vue JS auf Ubuntu 22.04 installieren.

Voraussetzungen

• Ein Server, der Ubuntu 22.04 für HAProxy ausführt.
• Ein Root-Passwort ist auf allen Servern konfiguriert.

Node.js installieren

Bevor Sie beginnen, müssen Sie Node.js auf Ihrem Server installieren. Standardmäßig ist die neueste Version von Node.js nicht im Standardrepository von Ubuntu 22.04 enthalten. Daher müssen Sie es aus dem Node-Quellrepository installieren.

Zuerst installieren Sie die erforderlichen Abhängigkeiten mit dem folgenden Befehl:

apt install curl gnupg2 gnupg git wget -y

Fügen Sie als Nächstes das Node-Quellrepository mit dem folgenden Befehl hinzu:

curl -fsSL https://deb.nodesource.com/setup_lts.x | bash -

Sobald das Repository hinzugefügt wurde, können Sie Node.js mit dem folgenden Befehl installieren:

apt install nodejs -y

Sobald Node.js installiert ist, können Sie die Node.js-Version mit dem folgenden Befehl überprüfen:

node --version

Sie erhalten die folgende Ausgabe:

v16.16.0

Jetzt aktualisieren Sie NPM auf die neueste Version mit dem folgenden Befehl:

npm install npm@latest -g

Sie können auch die NPM-Version mit dem folgenden Befehl überprüfen:

npm --version

Sie sollten die folgende Ausgabe erhalten:

8.13.2

Vue CLI installieren

Sie können jetzt NPM verwenden, um das Vue CLI-Paket mit dem folgenden Befehl zu installieren:

npm install -g @vue/cli

Sobald Vue installiert ist, können Sie die Vue JS-Version mit dem folgenden Befehl überprüfen:

vue --version

Sie sollten die folgende Ausgabe sehen:

@vue/cli 5.0.8

Eine einfache App mit Vue JS erstellen

Sie können jetzt das Vue CLI verwenden, um Ihre Anwendung einfach zu erstellen. Führen Sie den folgenden Befehl aus, um eine Beispielanwendung mit dem Namen myapp zu erstellen.

vue create myapp

Sie erhalten die folgende Ausgabe:

Vue CLI v5.0.8
?  Projekt wird in /root/myapp erstellt.
????  Git-Repository wird initialisiert...
??  CLI-Plugins werden installiert. Dies kann eine Weile dauern...


848 Pakete hinzugefügt und 849 Pakete in 24s geprüft

88 Pakete suchen nach Finanzierung
  Führen Sie `npm fund` für Details aus

0 Sicherheitsanfälligkeiten gefunden
????  Generatoren werden aufgerufen...
????  Zusätzliche Abhängigkeiten werden installiert...


95 Pakete hinzugefügt und 944 Pakete in 6s geprüft

98 Pakete suchen nach Finanzierung
  Führen Sie `npm fund` für Details aus

0 Sicherheitsanfälligkeiten gefunden
?  Abschluss-Hooks werden ausgeführt...

????  README.md wird generiert...

????  Projekt myapp erfolgreich erstellt.
????  Beginnen Sie mit den folgenden Befehlen:

 $ cd myapp
 $ npm run serve

 WARN  Git-Commit aufgrund fehlendem Benutzernamen und E-Mail in der Git-Konfiguration übersprungen oder Commit konnte nicht signiert werden.
       Sie müssen den ersten Commit selbst durchführen.

Ändern Sie als Nächstes das Verzeichnis zu myapp und listen Sie alle installierten Dateien und Verzeichnisse mit dem folgenden Befehl auf:

cd myapp  
ls

Sie erhalten die folgende Ausgabe:

babel.config.js  jsconfig.json  node_modules  package.json  package-lock.json  public  README.md  src  vue.config.js

Vue JS-Anwendung starten

Sie können jetzt Ihre Vue JS-Anwendung starten, indem Sie den folgenden Befehl ausführen:

npm run serve

Sobald die Anwendung gestartet ist, erhalten Sie die folgende Ausgabe:

> [email protected] serve
> vue-cli-service serve

 INFO  Entwicklungsserver wird gestartet...

 DONE  Erfolgreich kompiliert in 6469ms                                                                                              8:45:33 AM


  App läuft unter:
  - Lokal:   http://localhost:8080/ 
  - Netzwerk: nicht verfügbar

  Beachten Sie, dass der Entwicklungsbuild nicht optimiert ist.
  Um einen Produktionsbuild zu erstellen, führen Sie npm run build aus.

Zugriff auf die Vue JS-Weboberfläche

An diesem Punkt ist die Vue JS-Anwendung installiert und hört auf Port 8080. Sie können jetzt Ihren Webbrowser öffnen und auf die Vue JS-Anwendung über die URL http://your-serevr-ip zugreifen. Sie sollten das Vue JS-Dashboard auf der folgenden Seite sehen:

Fazit

In diesem Beitrag haben wir erklärt, wie man Vue JS auf Ubuntu 22.04 installiert. Sie können jetzt mit dem Bau Ihrer einseitigen Anwendung mit dem Vue JS-Framework beginnen. Zögern Sie nicht, mich zu fragen, wenn Sie Fragen haben.