Wie man eine Vue.js-Anwendung einsetzt

Vue.js ist ein JavaScript-Framework, das entwickelt wurde, um häufige Probleme bei der Entwicklung von Webanwendungen zu lösen, wie z. B. die komplexe Zustandsverwaltung und die Notwendigkeit einer leichtgewichtigen, flexiblen Lösung.

Das Framework wurde im Hinblick auf Einfachheit, Effizienz und Benutzerfreundlichkeit mit einer Syntax ähnlich der von HTML und JavaScript entwickelt. Darüber hinaus ist Vue reaktiv, was es schneller und effizienter macht als die traditionelle DOM-Manipulation.

In diesem Artikel erfahren Sie mehr über die Vorteile und Einschränkungen der Verwendung von Vue und wie Sie Ihre Vue-Anwendung mit dem kostenlosen Containerisierungsdienst von Back4app bereitstellen können.

Wichtigste Erkenntnisse

• Vue.js bietet optimierte Leistungstechniken, Flexibilität und eine umfangreiche Dokumentation, was es zu einer beliebten Wahl für die Front-End-Entwicklung macht.

• Allerdings kann Vue.js Einschränkungen in Bezug auf die langfristige Stabilität und ein weniger ausgereiftes Ökosystem im Vergleich zu anderen Frameworks haben.

• Back4app Containers bietet einen einfachen und effizienten Weg, Vue.js-Anwendungen zu implementieren, indem es die Docker-Technologie für verbesserte Leistung, Sicherheit und vereinfachte Bereitstellung und Skalierung nutzt.

Vorteile der Entwicklung Ihres Front-Ends mit Vue

Vue ist in den letzten Jahren aus mehreren Gründen immer beliebter geworden. Hier sind einige der Vorteile der Entwicklung Ihrer Webanwendungen mit Vue:

Techniken und Lösungen für optimierte Leistung

Vue bietet eine Reihe von Techniken zur Optimierung der Leistung bei der Erstellung von Webanwendungen, wie das virtuelle DOM und Aktualisierungsmechanismen in Form von Funktionen.

Mit diesen Techniken minimiert Vue die Anzahl der DOM-Operationen und den Rendering-Overhead, was zu schnelleren Nachladezeiten und einer verbesserten Anwendungsleistung führt.

Vue verwendet ein virtuelles DOM, eine leichtgewichtige Darstellung des tatsächlichen DOM, und aktualisiert das vDOM, wenn Sie Änderungen in Ihrer Anwendung vornehmen. Es verwendet dann einen Diffing-Algorithmus, um die minimal erforderlichen Änderungen im tatsächlichen DOM zu identifizieren.

Dieser Ansatz reduziert die Anzahl der teuren DOM-Operationen erheblich, was zu schnellerem Rendering und besserer Leistung führt.

Darüber hinaus bietet Vue durch Lifecycle Hooks, Watchers und berechnete Eigenschaften eine fein abgestufte Kontrolle über Komponentenaktualisierungen.

Mit diesen Funktionen können Sie festlegen, wann eine Komponente auf der Grundlage bestimmter Kriterien aktualisiert werden soll, um unnötige Aktualisierungen zu vermeiden und die Gesamtleistung zu verbessern.

Vue ist von Natur aus flexibel

Die Flexibilität von Vue zeigt sich in mehreren Aspekten des Frameworks, so dass es sich an verschiedene Entwicklungsszenarien, Muster oder Anforderungen anpassen kann.

Eine der Hauptstärken von Vue ist die schrittweise Einführung, was es zum perfekten Frontend-Framework für die Integration in bestehende Projekte macht.

Zusätzlich zu seiner schrittweisen Einführung können Sie Vue nahtlos in andere Bibliotheken und bestehende Ökosysteme integrieren.

Diese Kompatibilität fördert die Interoperabilität und ermöglicht es den Entwicklern, die besten Lösungen für ihre Anforderungen zu wählen.

Zum Beispiel können Vue-Funktionen in andere Bibliotheken und Frameworks wie React und Angular integriert werden.

Vue bietet auch eine flexible und intuitive Template-Syntax, die es Ihnen ermöglicht, Templates unter Verwendung einer HTML-basierten Syntax mit zusätzlichen Direktiven und Ausdrücken zu schreiben.

Diese Syntax bietet ein ausgewogenes Verhältnis zwischen Einfachheit und Leistungsfähigkeit, was das Verständnis und die Arbeit mit Vue-Vorlagen erleichtert.

Darüber hinaus unterstützt Vue alternative Rendering-Ansätze, einschließlich JSX (JavaScript XML), was Entwicklern, die alternative Syntaxen bevorzugen, Flexibilität bietet.

Umfangreiche Dokumentation und eine aktive Community

Die Dokumentation von Vue ist gut strukturiert und prägnant und erklärt Konzepte klar und deutlich anhand von praktischen Beispielen. Die Klarheit und Vollständigkeit der Dokumentation reduziert auch die Lernkurve, so dass Sie mit der Erstellung von Anwendungen mit Vue beginnen können.

Ein weiterer entscheidender Aspekt von Vue ist das Engagement der Community für die Open-Source-Kultur und die aktive Mitarbeit.

Vue-Entwickler tragen aktiv zur kontinuierlichen Verbesserung und Weiterentwicklung von Vue.js bei. Sie liefern Code-Beiträge und beteiligen sich an Diskussionen, bieten wertvolles Feedback und helfen, die zukünftige Richtung von Vue.js zu gestalten.

Dieser kollaborative Ansatz stellt sicher, dass Vue.js ein hochmodernes Framework bleibt. Indem Sie sich aktiv in der Vue-Community engagieren, können Sie auf ein riesiges Netzwerk von Ressourcen zugreifen, wertvolle Unterstützung erhalten und Möglichkeiten zur Erweiterung Ihrer Fähigkeiten und Ihres Fachwissens erschließen.

Beschränkungen bei der Entwicklung Ihres Front-Ends mit Vue

Obwohl Vue Vorteile für die Front-End-Entwicklung bietet, müssen auch einige Einschränkungen bei der Entwicklung mit Vue beachtet werden. Einige dieser Einschränkungen sind:

Langfristige Stabilität

Vue leidet unter der starken Unterstützung durch die Unternehmen, was dazu führt, dass Entwickler den Eindruck haben, dass Vue nicht geeignet ist, wenn sie Frameworks für die Entwicklung des Frontends einer Webanwendung in Betracht ziehen.

Unternehmen bevorzugen häufig Frameworks mit solider Unternehmensunterstützung wie Angular und React, um sicherzustellen, dass das Framework den sich entwickelnden Geschäftsanforderungen gerecht wird und eine kontinuierliche Wartung gewährleistet ist.

Weniger ausgereiftes Ökosystem

Im Vergleich zu Angular und React hat Vue ein weniger ausgereiftes Ökosystem. Dies führt zu Szenarien, in denen Vue-Entwickler auf Einschränkungen bei den verfügbaren Bibliotheken und Tools stoßen, um komplexe Prozesse in großen Anwendungen zu bewältigen.

Vue-Entwickler finden sich oft in Situationen wieder, in denen sie individuelle Lösungen für ihre Anwendungsanforderungen entwickeln müssen. Dies führt zu zusätzlichem Zeit- und Arbeitsaufwand bei der Entwicklung der Webanwendung.

Bereitstellen einer Anwendung mit Back4app Containern

Back4App Containers ist eine Plattform, die die Docker-Technologie nutzt, um Anwendungen in isolierten Umgebungen, sogenannten Containern, bereitzustellen und auszuführen.

Mit dieser Technologie können Sie Ihre Webanwendungen mit allen erforderlichen Abhängigkeiten verpacken und eine konsistente Bereitstellung in verschiedenen Umgebungen sicherstellen.

Das Deployment einer Anwendung in Back4app Containern ist sehr einfach. Sie müssen eine Dockerdatei im Stammverzeichnis Ihrer Anwendung erstellen, die die Verpackung und Ausführung der Anwendung beschreibt.

Dann pushen Sie die Anwendung in Ihr GitHub-Repository. Nach diesem Schritt erstellt Back4app das Docker-Image und führt den Container aus.

Hier sind einige der Vorteile der Verwendung von Back4App Containern:

• Verbesserte Leistung: Container sind leichtgewichtig und effizient, was zu einer verbesserten Anwendungsleistung führt.

• Erhöhte Sicherheit: Die Container sind voneinander isoliert, was zur Verbesserung der Sicherheit beitragen kann.

• Vereinfachte Bereitstellung und Skalierung: Container können einfach skaliert werden, was Zeit und Geld spart.

Aufbau der Vue-Anwendung

In diesem Tutorial werden Sie eine einfache Vue-Anwendung erstellen, die den Benutzern Aktivitäten vorschlägt, die sie in ihrer Freizeit ausführen können.

Die Vue-Anwendung wird eine API nutzen, um diese Aktion durchzuführen. Dann werden Sie die Vue-Anwendung in Back4app-Containern bereitstellen

Um mit der Erstellung der Vue-Anwendung zu beginnen, führen Sie den folgenden Befehl in Ihrem bevorzugten Verzeichnis aus:

npm create vue@latest

Wenn Sie diesen Code ausführen, wird eine Eingabeaufforderung generiert, in der Sie Ihre Vue-Anwendung benennen und die Funktionen auswählen können, die Sie in Ihre Anwendung integrieren möchten.

Für diese Anwendung werden Sie nur die Vue-Router-Funktion verwenden. Nachdem Sie diese Funktion ausgewählt haben, wechseln Sie in das Verzeichnis Ihrer Anwendung und führen npm install aus, um die Abhängigkeiten der Anwendung herunterzuladen und zu installieren.

Um diese Anwendung zu erstellen, müssen Sie drei zusätzliche npm-Pakete installieren: axios, sass und @iconify/vue.

Axios ist eine JavaScript-Bibliothek, die die Erstellung von HTTP-Anfragen vereinfacht und es Ihnen ermöglicht, auf einfache Weise Daten von der API abzurufen.

Sass ist ein CSS-Präprozessor, den Sie für die Gestaltung der Anwendung verwenden werden. Sie werden das Paket @iconify/vue verwenden, um skalierbare Vektorsymbole in Ihre Anwendung zu integrieren.

Um diese drei Pakete zu installieren, führen Sie den folgenden Befehl im Stammverzeichnis Ihrer Anwendung aus:

npm install axios sass @iconify/vue

Sobald Sie diese Pakete installiert haben, können Sie Ihr aktuelles Verzeichnis in Visual Studio Code öffnen, indem Sie den folgenden Befehl ausführen:

code .

Erstellen Sie zwei Komponenten im Verzeichnis views Ihrer Anwendung: HomeView und AboutView. Behandeln Sie dann das Routing dieser beiden Komponenten, indem Sie den Codeblock unter der Datei index.js in das Router-Verzeichnis einfügen:

// index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

Die Index-Datei im Router-Verzeichnis regelt das Routing der Vue-Webanwendung. Hier werden zwei Routen definiert: HomeView und AboutVue Routen.

Damit die Benutzer Ihrer App zwischen diesen beiden Routen navigieren können, erstellen Sie eine Kopfzeile mit diesen Routen in Ihrer App.vue-Datei:

<!-- App.vue -->
<script setup>
import { RouterLink, RouterView } from 'vue-router'

</script>

<template>
  <header>
  <h1> Unbored </h1>

  <nav>
    <RouterLink to="/" class="link"><button>Home</button></RouterLink>
    <RouterLink to="/about" class="link"><button>about</button></RouterLink>
  </nav>
  </header>

  <RouterView />
</template>

<style lang="scss" scoped>
header{  
    padding: 1rem 0;
    display: flex;
    justify-content: space-between;

    nav{
      display: flex;
      gap: 1rem;

      .link{
        text-decoration: none;
        color: inherit;
      }
    }

  }
</style>

In der Datei App.vue haben Sie die Komponenten RouterLink und RouterView aus dem Paket vue-router importiert.

Die Komponente RouterLink verknüpft die Schaltflächen mit den jeweiligen Routen, während die Komponente RouterView den Inhalt der Route anzeigt. Sie haben auch die Kopfzeile im Stilblock gestaltet.

Nachdem Sie die Routen bearbeitet haben, erstellen Sie die HomeView-Komponente Ihrer App. Die HomeView-Komponente sollte eine neue Aktivität anzeigen, die ein App-Benutzer ausführen kann, wenn er sich bei jedem Schaltflächenklick langweilt. Dazu kopieren Sie den folgenden Code in Ihre HomeView-Komponente:

<!-- HomeView.vue -->
<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { Icon } from '@iconify/vue';

const activity = ref('');

const fetchActivity = async () => {
    try {
    const response = await axios.get('<https://www.boredapi.com/api/activity>');
    activity.value = response.data.activity
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

</script>

<template>
    <div>
        <h1>Tired of feeling bored. </h1>
        <p>Click on the button below to get an activity you can do.</p>
        <button @click="fetchActivity"> Get Activity</button>
        <Icon icon="system-uicons:arrow-down" />
        <h2> {{ activity }}</h2>
    </div>
</template>

<style lang="scss" scoped>

  div{
    display: flex;
    flex-direction: column;
    margin-block-start: 6rem;
    align-items: center;
    gap: 2rem;

    h1{
      text-transform: uppercase;
      letter-spacing: 0.5rem;
    }
  }
</style>

Der obige Codeblock beschreibt die HomeView-Komponente. In der HomeView-Komponente haben Sie die ref- und axios-Funktionen aus ihren jeweiligen Paketen importiert. Außerdem haben Sie diese Komponente im Style-Block gestylt.

Die Aktivitätsvariable ist ein reaktiver Verweis zum Speichern abgeholter Aktivitätsdaten. Die Funktion fetchActivity holt asynchron Daten vom angegebenen API-Endpunkt“https://www.boredapi.com/api/activity” mit axios und aktualisiert den Aktivitätswert, wenn ein App-Benutzer auf die Schaltfläche Get Activity klickt.

Um den Benutzern Ihrer Anwendung zu erklären, worum es in dieser Anwendung geht, kopieren Sie den folgenden Code und fügen ihn in Ihre AboutView-Komponente ein:

<!-- AboutView.vue -->
<template>
  <div class="about">
    <h3>About Unbored</h3>
    <p>The Unbored App suggests activities you could perform instead of staying bored all day</p>
  </div>
</template>

<style lang="scss" scoped>

  h3{
    margin-block-start: 4rem;
    margin-block-end: 3rem;
  }
</style>

Um den Body Ihrer Vue APP zu stylen, erstellen Sie eine main.css Datei im assets Verzeichnis und fügen Sie den untenstehenden Code ein:

/* main.css */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    inline-size: 50%;
    margin: auto;
    font-family: 'Montserrat', sans-serif;
}

button{
    border: none;
    padding: 0.5rem 0.8rem;
    background-color: inherit;
    font-family: 'Montserrat', sans-serif;
    font-size: small;
    font-weight: bold;
    color: #333333;
    border-radius: 12px;
}

button:hover{
    color: #e2e2e2;
    background-color: #333333;
  }

Das war’s! Um eine Vorschau Ihrer Vue-Anwendung zu erhalten, führen Sie den folgenden Befehl im Verzeichnis der Anwendung aus:

npm run dev

Ihre Anwendung sollte wie das folgende Bild aussehen.

Bereitstellung von Vue Apps mit Back4app Containern:

Dies ist ein Schritt-für-Schritt-Tutorial, wie Sie Ihre Vue-Anwendung bereitstellen können. Zuerst müssen Sie die Anwendung docken. Das Dockerisieren einer Anwendung erfordert die Erstellung einer Dockerdatei, die alle Anweisungen enthält, die die Docker-Engine benötigt, um das Image zu erstellen.

Anschließend testen Sie Ihre Anwendung lokal, um sicherzustellen, dass alles perfekt funktioniert, bevor Sie sie in Back4app-Containern bereitstellen.

Dockerisierung Ihrer Vue-Anwendung

Um Ihre Vue-Anwendung zu dockerisieren, müssen Sie ein Dockerfile im Stammverzeichnis Ihrer Vue-Anwendung erstellen. Ein Dockerfile ist ein Blueprint, den die Docker Engine verwendet, um einen Docker Container mit allen notwendigen Abhängigkeiten und Konfigurationen zu erstellen.

Das Dockerfile definiert das Basis-Image, legt das Arbeitsverzeichnis fest, kopiert Dateien in den Container, installiert Abhängigkeiten, konfiguriert die Laufzeitumgebung und legt die Befehle fest, die beim Start des Containers ausgeführt werden sollen.

Um die Docker-Technologie besser zu verstehen, können Sie diese Dockerfile-Referenz lesen.

Um mit der Dockerisierung Ihrer Vue-Anwendung zu beginnen, erstellen Sie ein Dockerfile im Stammverzeichnis und kopieren Sie den folgenden Code hinein:

# Dockerfile
FROM node:18

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

FROM nginx:1.19.0-alpine

COPY --from=0 /app/dist /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

Das Dockerfile führt die folgenden Aktionen aus:

• Das Dockerfile verwendet das Basisimage node:18, das die Node.js-Laufzeitumgebung bereitstellt.

• Setzt das Arbeitsverzeichnis innerhalb des Containers auf /app.

• Kopiert die Dateien package.json und package-lock.json in das Arbeitsverzeichnis.

• Installiert die Abhängigkeiten mit dem Befehl npm install.

• Kopiert den gesamten Anwendungscode in das Arbeitsverzeichnis.

• Baut die Anwendung durch Ausführen des Befehls npm run build.

• Das Dockerfile verwendet dann das Basisimage nginx:1.19.0-alpine, das den NGINX-Webserver bereitstellt.

• Kopiert die erstellten statischen Dateien aus der vorherigen Phase in das Verzeichnis /usr/share/nginx/html im NGINX-Image.

• Gibt Port 80 frei, um eingehenden HTTP-Verkehr zuzulassen.

• Er führt den NGINX-Server mit der angegebenen Konfiguration "nginx", "-g", "daemon off;" unter Verwendung der CMD-Anweisung aus.

Erstellen und Testen Ihrer Dockerized Vue-Anwendung

Bevor Sie Ihre Images in der Cloud bereitstellen, können Sie die Docker-Anwendung lokal testen. Um die Anwendung zu testen, erstellen Sie zunächst die Anwendung, indem Sie den folgenden Befehl ausführen:

docker build -t bored .

Nach dem Erstellungsprozess können Sie dann den folgenden Befehl ausführen, um den Docker-Container lokal zu starten:

docker run -p 8080:80 bored

Die Option -p 8080:80 gibt die Portzuordnung zwischen dem Host und dem Container an. Er ordnet Port 8080 auf dem Host dem Port 80 auf dem Container zu.

Jetzt wird Ihre Anwendung lokal in einem Container ausgeführt. Sie können dann zu http://localhost:8080 navigieren, um Ihre Anwendung anzuzeigen.

Bereitstellung Ihrer Anwendung in Back4app Containern

Bevor Sie Ihre Anwendung in Back4app Containers bereitstellen, müssen Sie die Anwendung in ein GitHub Repository pushen. Wie das geht, erfahren Sie in den folgenden Schritten der GitHub-Dokumentation.

Nachdem Sie Ihren Quellcode auf Github veröffentlicht haben, müssen Sie ein Back4app-Konto erstellen. Um ein Konto bei Back4app zu erstellen, folgen Sie diesen Schritten:

• Besuchen Sie die offizielleBack4app-Website.

• Klicken Sie auf die Schaltfläche ” Anmelden” in der oberen rechten Ecke der Landing Page.

• Füllen Sie das Anmeldeformular mit den erforderlichen Angaben aus.

• Senden Sie das Formular ab, um den Anmeldevorgang abzuschließen.

Sobald Sie Ihr Back4app-Konto erfolgreich erstellt haben, melden Sie sich mit Ihren Anmeldedaten an. Suchen Sie dann die Schaltfläche NEUE APP in der oberen rechten Ecke Ihres Dashboards.

Wenn Sie auf die Schaltfläche NEW APP klicken, werden Sie zu einer Seite weitergeleitet, auf der Sie die Bereitstellungsmethode für Ihre Anwendung auswählen können. Da Sie beabsichtigen, einen Container bereitzustellen, entscheiden Sie sich für die Option “Container als Dienst”.

Nachdem Sie auf die Option Container als Dienst geklickt haben, verknüpfen Sie das GitHub-Repository Ihrer Anwendung und klicken auf Auswählen, um die Anwendung bereitzustellen.

Wenn Sie auf die Schaltfläche Auswählen klicken, werden Sie zu einer Seite weitergeleitet, auf der Sie wichtige Informationen über Ihre Anwendung angeben können. Dazu gehören der Name der Anwendung, der Zweig, das Stammverzeichnis und die Umgebungsvariablen.

Stellen Sie sicher, dass Sie alle notwendigen Umgebungsvariablen ausfüllen, auf die sich Ihre Anwendung stützen könnte. Sobald Sie die erforderlichen Felder ausgefüllt haben, klicken Sie auf die Schaltfläche App erstellen.

Wenn Sie auf diese Schaltfläche klicken, wird der Bereitstellungsprozess für Ihre Vue-Anwendung gestartet und die notwendigen Schritte eingeleitet, um Ihre Anwendung verfügbar zu machen. Sie können den Fortschritt der Bereitstellung verfolgen, wie in der Abbildung unten dargestellt.

Schlussfolgerung

Vue ist eines der besten Open-Source-JavaScript-Frameworks für die Front-End-Entwicklung. Es bietet einen intuitiven Ansatz zur Erstellung von Benutzeroberflächen mit Funktionen wie reaktiver Datenbindung und einer komponentenbasierten Architektur.

In diesem Artikel haben Sie gelernt, wie man eine Vue-Anwendung mit Back4app-Containern erstellt und einsetzt. Das Deployment Ihrer Anwendungen auf Back4app vereinfacht das komplexe Management der Backend-Infrastruktur, da Back4app Tools zur Verwaltung von Daten, Skalierung und Überwachung der Leistung einer Anwendung bietet.

FAQ