HowtoForge

Wie installiere ich Vue.JS auf Ubuntu 22.04

von ·

Vue.js ist ein Javascript-Framework, mit dem interaktive Benutzeroberflächen und One-Page-Anwendungen erstellt werden können. Es ist leichter und anpassungsfähiger als das AngularJS-Framework. Es ist einfach, flexibel, modular, sehr leistungsfähig, leicht zu erlernen und bietet viele Tools und Bibliotheken, die die Anwendungsentwicklung erleichtern. Wenn du grundlegende HTML-, CSS- und JavaScript-Kenntnisse hast, kannst du schnell mit der Entwicklung von Webanwendungen mit Vue.js beginnen.

Dieser Leitfaden zeigt dir, wie du Vue.js auf Ubuntu 22.04 installierst.

Voraussetzungen

  • Ein Server mit Ubuntu 22.04 für HAProxy.
  • Auf allen Servern ist ein Root-Passwort eingerichtet.

Node.js installieren

Bevor du beginnst, musst du Node.js auf deinem Server installieren. Standardmäßig ist die neueste Version von Node.js nicht im Standard-Repository von Ubuntu 22.04 enthalten. Daher musst du sie aus dem Node Source Repository installieren.

Installiere zunächst die erforderlichen Abhängigkeiten mit dem folgenden Befehl:

apt install curl gnupg2 gnupg git wget -y

Als Nächstes fügst du das Node Source Repository mit dem folgenden Befehl hinzu:

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

Sobald das Repository hinzugefügt ist, kannst du Node.js mit dem folgenden Befehl installieren:

apt install nodejs -y

Sobald Node.js installiert ist, kannst du die Node.js-Version mit dem folgenden Befehl überprüfen:

node --version

Du erhältst die folgende Ausgabe:

v16.16.0

Aktualisiere nun den NPM mit folgendem Befehl auf die neueste Version:

npm install npm@latest -g

Du kannst die NPM-Version auch mit dem folgenden Befehl überprüfen:

npm --version

Du solltest die folgende Ausgabe erhalten:

8.13.2

Vue CLI installieren

Jetzt kannst du den NPM verwenden, um das Vue CLI-Paket mit dem folgenden Befehl zu installieren:

npm install -g @vue/cli

Sobald Vue installiert ist, kannst du die Vue JS-Version mit dem folgenden Befehl überprüfen:

vue --version

Du solltest die folgende Ausgabe sehen:

@vue/cli 5.0.8

Eine einfache App mit Vue JS erstellen

Jetzt kannst du das Vue CLI verwenden, um deine Anwendung einfach zu erstellen. Führe den folgenden Befehl aus, um eine Beispielanwendung namens myapp zu erstellen.

vue create myapp

Du erhältst die folgende Ausgabe:

Vue CLI v5.0.8
?  Creating project in /root/myapp.
????  Initializing git repository...
??  Installing CLI plugins. This might take a while...


added 848 packages, and audited 849 packages in 24s

88 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
????  Invoking generators...
????  Installing additional dependencies...


added 95 packages, and audited 944 packages in 6s

98 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
?  Running completion hooks...

????  Generating README.md...

????  Successfully created project myapp.
????  Get started with the following commands:

 $ cd myapp
 $ npm run serve

 WARN  Skipped git commit due to missing username and email in git config, or failed to sign commit.
       You will need to perform the initial commit yourself.

Als Nächstes wechselst du in das Verzeichnis myapp und listest alle installierten Dateien und Verzeichnisse mit folgendem Befehl auf:

cd myapp
ls

Du erhältst 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

Jetzt kannst du deine Vue JS-Anwendung starten, indem du den folgenden Befehl ausführst:

npm run serve

Sobald die Anwendung gestartet ist, erhältst du die folgende Ausgabe:

> myapp@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...

 DONE  Compiled successfully in 6469ms                                                                                              8:45:33 AM


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: unavailable

  Note that the development build is not optimized.
  To create a production build, run npm run build.

Access Vue JS Web Interface

Zu diesem Zeitpunkt ist die Vue JS-Anwendung installiert und lauscht auf Port 8080. Du kannst nun deinen Webbrowser öffnen und die Vue JS-Anwendung über die URL http://your-serevr-ip aufrufen. Auf der folgenden Seite solltest du das Vue JS Dashboard sehen:

Fazit

In diesem Beitrag haben wir dir erklärt, wie du Vue JS auf Ubuntu 22.04 installierst. Du kannst jetzt damit beginnen, deine Single-Page-Anwendung mit dem Vue JS-Framework zu erstellen. Wenn du noch Fragen hast, kannst du dich gerne an mich wenden.

Das könnte dich auch interessieren …