Vue.js Tutorial: Schritt für Schritt zur eigenen App

Vue.js ist ein kleines, aber kraftvolles Framework, das sich großer Beliebtheit erfreut. Ein frisches Beispiel ist der neue MediaManager von Joomla! 4. Was das Framework ausmacht und wie Sie direkt loslegen können, lesen Sie hier.

Alle Vorteile auf einem Blick

  • In der min-Variante nur 20 KB klein
  • Sehr schnell dank virtuellem DOM
  • Geringer Aufwand für große Ziele
  • Relativ wenig Overhead
  • Kombination aus HTML, CSS und JavaScript

Was kann Vue.js?

Mit Vue.js können Sie Komponenten für Web-Apps erstellen, die leichtgewichtig und schnell sind. Hierfür ist keine neue Sprache nötig; HTML, CSS und JavaScript werden lediglich kombiniert. Die Komponenten, die Sie erstellen, werden jeweils in einer einzigen Datei gehalten (Single-File-Components). Um also eine Komponente aus HTML, CSS und JavaScript zu bauen, müssen Sie nicht mehrere verschiedene Dateien öffnen.

Vue.js kann auch in andere Frameworks wie React integriert werden. Durch diese Flexibilität und den geringen Speicherverbrauch wird Vue.js immer beliebter und die Community wächst rasant. Einer der Vorteile gegenüber React ist, dass die Performance nochmals gesteigert wurde. In dem von Facebook entwickelten Framework React wird beispielsweise der Unterbaum einer Komponente bei jedem Statuswechsel der Komponente selbst neu gerendert. Es sei denn, Sie setzen den Status PureComponent oder setzen einen Vermerk mit shouldComponentUpdate. Dies ist allerdings nicht immer möglich, und so kommt es zu unnötigen Verzögerungen während der Laufzeit.

In Vue.js wird das automatisch beim Rendern erledigt. Sie müssen den Status also nicht automatisch setzen, was wiederum unnötigen Code spart.

Einfacher Einstieg in Vue.js

Um Ihnen den Einstieg zu erleichtern, gibt es die Vue CLI, die Sie hier als kostenlosen Download finden. Sie können natürlich auch jeden anderen Editor verwenden. Die Kombination von HTML, CSS und JavaScript in einem Dokument ist in den gängigen Editoren bereits integriert, sodass Autovervollständigen und Syntax-Highlighting auch ohne CLI möglich sind.

Doch beginnen wir am Anfang. Zunächst sollten Sie entscheiden, ob Sie eher kleinere Projekte starten oder zunächst testen möchten, wie Vue.js funktioniert. Sie finden hier zunächst die Anleitung für kleinere Projekte und zum Testen. Wenn Sie bereits wissen, dass Sie größere Projekte starten möchten, überspringen Sie diesen Teil und gehen direkt zum nächsten Punkt Größere Projekte vorbereiten.

Vue.js für kleine Projekte und zum Testen

Hier können Sie sich die aktuelle Version von Vue.js herunterladen.

Sie finden auf dieser Seite zwei Versionen. Die ungepackte Developer Version und die gepackte Production Version. Verwenden Sie zum Testen möglichst die Developer Version, da Sie nur hier Fehlerhinweise bekommen. In der Production Version sind diese Hinweise nicht enthalten!

Nehmen Sie bestenfalls auch die Vue Devtools mit. Hier sind Browser-Plugins enthalten, die Ihnen die Arbeit wesentlich erleichtern.

Hello World!

  1. Sie können nun mit einem Klassiker der Programmierung beginnen – Hello World! Erstellen Sie eine HTML-Datei in Ihrem Editor und fügen Sie die Datei vue.js als Script ein:
<html>
   <head>
      <script type = "text/javascript" src = "vue.js"></script>
   </head>
   <body></body>
</html>
  1. Nun fügen Sie den Aufruf in das HTML-Konstrukt ein:
<html>
   <head>
    <script type = "text/javascript" src = "vue.js"></script>
   </head>
   <body>
    <div id="app">
     {{ message }}
    </div>
   </body>
</html>
  1. Der JS-Code dazu sieht so aus:

💡 Hinweis: Mit el: beziehen Sie sich auf die ID im HTML-Dokument und stellen eine zu druckende Rückgabe zur Verfügung. Diese wird dann in geschweiften Klammern vom HTML-Dokument angenommen und abgebildet.

  1. Durch einen kleinen Zusatz können Sie über das V-Modell auch Benutzereingaben akzeptieren und abbilden. Fügen Sie einfach <input v-model=“message“> hinzu und beobachten Sie die Veränderung am Ergebnis.
<html>
   <head>
    <script type = "text/javascript" src = "vue.js"></script>
   </head>
   <body>
    <div id="app">
     {{ message }}
     <input v-model="message">
    </div>
   </body>
</html>

Fertig! Das Message-Feld Hello World! hat nun diesen Text als Standardwert, kann aber mit beliebigem Text überschrieben werden.Einen Live-Test finden Sie hier.

Größere Projekte mit Vue.js vorbereiten

Wenn Sie größere Projekte erstellen möchten, sollten Sie Vue.js mit Hilfe von NPM auf Ihrem Computer installieren. Dazu gehen Sie wie folgt vor:

  1. Erstellen Sie einen neuen Ordner auf Ihrem Computer und wechseln Sie hinein. Anschließend starten Sie die Installation von Vue.js mit NPM:
  1. Nach einigen Minuten sehen Sie die Erfolgsmeldung:
  1. Jetzt starten Sie die Initialisierung Ihres Web-Projekts:
  1. Beantworten Sie die Fragen im oberen Bereich, wie es für Ihr Projekt zutreffend ist. In der Regel sind die Standardantworten in Ordnung. Geben Sie Ihrem Computer ein paar Minuten Zeit, bis Sie die nächste Meldung erhalten:
  1. Nun folgen Sie dem Hinweis am Ende der Erfolgsmeldung. Wechseln Sie in den Ordner myproject,beziehungsweise den Ordner, den Sie erstellen ließen. Hier schieben Sie einen kleinen Zwischenschritt ein, indem Sie zuerst den Befehl npm install aufrufen.
  1. Anschließend rufen Sie den Befehl npm run dev auf.
  1. Nach einer kurzen Rechenpause erhalten Sie anschließend die nächste Erfolgsmeldung:
  1. Rufen Sie nun mit Ihrem Browser die erzeugte Adresse auf, wird Ihnen das Ergebnis übermittelt:

Schon ist Ihre erste Vue.js App fertig – oder zumindest gut vorbereitet. Über die erzeugten Links holen Sie sich weitere Informationen ein.

Ordnerstruktur bei Vue.js

Diese Vorbereitung erstellt eine Ordnerstruktur, wie sie beispielsweise von VisualStudio bekannt ist:

Die Readme-Datei enthält grundlegende Hinweise zum Kompilieren des Projekts:

Im Ordner src finden Sie die Dateien, die Sie bearbeiten möchten, oder fügen diese dort hinzu:

Ähnlich wie beim kleinen Hello World! Modell weiter oben, finden Sie hier die Quelldateien „App.vue“ und „main.js“ mit den jeweiligen Aufrufen:

  1. main.js:

Nun fügen Sie lediglich Ihre Inhalte ein oder ändern vorhandene Daten entsprechend ab, und schon können mit Ihrem Vue.js-Projekt beginnen.

Fazit:

Vue.js besticht durch seine minimale Größe und maximale Flexibilität. Größere Projekte lassen sich leicht realisieren, wenn Sie bereits Kenntnisse in der Web-Programmierung mit HTML, CSS und JavaScript haben. Durch dieses Framework ist es Ihnen mit leichtem Lernaufwand möglich, alle drei Komponenten in einem neuen Licht zu sehen.

Weitere Ressourcen

End of article

DomainFactory

Über den Autor

DomainFactory

Als Qualitätsanbieter überzeugen wir mit HighEnd-Technologie und umfassenden Serviceleistungen. Mit mehr als 1,3 Millionen verwalteten Domainnamen gehören wir zu den größten Webhosting-Unternehmen im deutschsprachigen Raum.

0 Kommentare

Die von Ihnen hier erhobenen Daten werden von der domainfactory GmbH zur Veröffentlichung Ihres Beitrags in diesem Blog verarbeitet. Weitere Informationen entnehmen Sie bitte folgendem Link: www.df.eu/datenschutz