Bild von Saeid Samani
Saeid Samani
Saeid Samani ist Webentwickler, kreativer Denker und Unternehmer mit einem tiefen Verständnis für digitale Prozesse und moderne Webtechnologien. Er entwickelt durchdachte Webanwendungen, optimierte Benutzererlebnisse und skalierbare Lösungen, die Design, Funktionalität und Strategie miteinander verbinden. In seinem Blog teilt Saeid seine Erfahrungen aus der täglichen Praxis – von sauberem Code und effizientem Workflow bis hin zu Themen rund um Webentwicklung, Automatisierung und digitale Trends. Sein Stil: klar, pragmatisch und immer mit dem Ziel, Wissen greifbar und anwendbar zu machen. Abseits der Arbeit liebt er es, Neues zu lernen, Ideen auszuprobieren und Wege zu finden, Technologie sinnvoll im Alltag einzusetzen.

Teil 3 – Vue 3 Entwicklungsumgebung mit Vite und Pinia

In diesem Teil richten Sie die Versionsverwaltung für Ihr bestehendes Vue/Vite-Projekt ein. Da bisher weder lokal noch auf GitHub ein Repository existiert, beginnen Sie mit der Einrichtung von Git direkt auf Ihrem Rechner. Ziel ist es, Ihr Projekt zukünftig sauber zu versionieren und Änderungen nachvollziehbar zu speichern. Im nächsten Schritt wird eine Datei vorbereitet, die festlegt, welche Projektordner und Dateien nicht in die Versionsverwaltung aufgenommen werden sollen – zum Beispiel temporäre Dateien oder automatisch erzeugte Build-Ordner. Sobald die lokale Struktur steht, wird das Projekt erstmals gesichert und anschließend ein neues, leeres Repository auf GitHub erstellt. Dieses dient als zentrale Ablage und ermöglicht Ihnen, Ihr Projekt später von überall aus fortzusetzen oder gemeinsam daran zu arbeiten. Zum Abschluss werden beide Repositories miteinander verbunden, sodass Ihr lokaler Projektstand künftig auch online auf GitHub verfügbar ist.

Inhaltsverzeichnis

Lokal Git initialisieren

Git ist ein sogenanntes Versionsverwaltungssystem – ein Werkzeug, mit dem Sie die Entwicklung Ihres Projekts nachvollziehbar dokumentieren und Änderungen jederzeit zurückverfolgen können. Es speichert den kompletten Entwicklungsverlauf in sogenannten „Commits“, also kleinen Momentaufnahmen des Projektzustands. Dadurch können Sie alte Versionen wiederherstellen, experimentelle Änderungen ausprobieren oder gezielt nachvollziehen, wann und warum etwas geändert wurde.

Da Ihr Vue/Vite-Projekt bislang noch keine Versionsverwaltung nutzt, wird Git nun lokal im Hauptverzeichnis des Projekts eingerichtet. Dieser Schritt legt im Hintergrund eine versteckte Struktur an, in der Git alle Versionsinformationen speichert.

Nach der Initialisierung wird üblicherweise auch eine Datei namens .gitignore angelegt. Diese Datei spielt eine wichtige Rolle: Sie legt fest, welche Dateien oder Ordner nicht in die Versionsverwaltung aufgenommen werden sollen – etwa automatisch generierte Build-Ordner (dist/), Abhängigkeiten (node_modules/) oder lokale Konfigurationsdateien (.env.local).

# Node
node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-lock.yaml
.DS_Store

# Vite / Build
dist/
.vite/
.cache/

# IDE / Editor
.idea/
.vscode/
*.log

# Env
.env
.env.*
!.env.example
.env.local
.env.development.local
.env.production.local
.env.test.local

So bleibt Ihr Repository sauber, übersichtlich und enthält nur die wirklich relevanten Projektdateien.

Erste lokale Commit

Nachdem Git im Projekt eingerichtet wurde, steht als nächster Schritt das erste lokale Commit an – also das Speichern des aktuellen Projektzustands in der Versionshistorie.

Bevor Sie etwas speichern, lohnt sich ein Blick auf den aktuellen Stand mit dem Befehl git status. Dieser zeigt an, welche Dateien neu hinzugekommen, verändert oder gelöscht wurden und ob sie bereits für den nächsten Commit vorgemerkt sind. So behalten Sie den Überblick, was Git gerade überwacht.

git status

Um Dateien tatsächlich für den Commit vorzubereiten, verwendet man den Befehl git add. Damit „merken“ Sie Git, welche Änderungen in den nächsten Versionsschritt aufgenommen werden sollen. Da Sie beim ersten Commit in der Regel alle relevanten Projektdateien sichern möchten, können Sie den Befehl git add . verwenden. Der Punkt steht hier für das aktuelle Verzeichnis und fügt alle enthaltenen Dateien hinzu.

Sie können jederzeit mit dem Befehl git status eine Kontrolle durchführen, um zu sehen, welche Dateien sich seit dem letzten Commit verändert haben oder neu hinzugekommen sind.

Git zeigt Ihnen dabei genau an, welche Dateien bereits für den nächsten Commit vorgemerkt sind und welche noch nicht. So behalten Sie jederzeit den Überblick, welche Änderungen aktuell im Projekt stattfinden und welche davon in die nächste Version aufgenommen werden.

Diese regelmäßige Kontrolle ist besonders hilfreich, um versehentlich nicht gewünschte Dateien frühzeitig zu erkennen – etwa temporäre oder Konfigurationsdateien, die eigentlich in der .gitignore ausgeschlossen sind.

git add .
git status

Wichtig: Dank der zuvor angelegten .gitignore-Datei werden dabei automatisch alle dort ausgeschlossenen Dateien ignoriert – etwa node_modules/ oder dist/. So landen nur die wirklich wichtigen Dateien im Repository.

Anschließend folgt das eigentliche Speichern mit git commit -m "Nachricht". Dieser Befehl legt eine neue Version Ihres Projekts an und speichert sie dauerhaft in der Git-Historie. Der Teil in Anführungszeichen ist eine Commit-Nachricht, die kurz beschreibt, was geändert oder hinzugefügt wurde – zum Beispiel „Initiales Setup mit Vue, Pinia und Router“.

git commit -m "chore: initial vue + pinia + router setup"

Damit ist Ihr erstes lokales Commit abgeschlossen und Ihr Projekt offiziell versioniert.

Projekt mit GitHub verknüpfen

GitHub ist eine Online-Plattform, auf der Sie Git-Repositorys zentral speichern, verwalten und mit anderen teilen können. Sie dient als sichere Cloud-Ablage für Ihre Projekte und ermöglicht es, gemeinsam im Team zu arbeiten, Änderungen nachzuvollziehen und Code einfach bereitzustellen oder zu veröffentlichen.

In diesem Schritt gehen wir davon aus, dass Sie auf GitHub bereits ein neues, leeres Repository angelegt haben und von Ihrem lokalen Rechner aus darauf zugreifen können – beispielsweise über Ihr GitHub-Konto, bei dem Sie angemeldet sind.

Das Ziel ist nun, Ihr lokales Git-Projekt mit diesem neu erstellten Repository zu verbinden. Dadurch entsteht eine direkte Verbindung zwischen Ihrem lokalen Arbeitsverzeichnis und der Online-Version auf GitHub. Sobald die Verknüpfung eingerichtet ist, können Sie Ihre Commits hochladen, Änderungen synchronisieren und jederzeit auf die aktuelle Version Ihres Projekts zugreifen – egal, von welchem Gerät

Es ist sehr wichtig, dass Ihr GitHub-Repository wirklich leer ist und keine README-Datei, .gitignore oder Lizenzdatei enthält. Andernfalls werden die folgenden Schritte nicht wie vorgesehen funktionieren, da Git in diesem Fall einen sogenannten Pull und Merge erfordern würde – ein Thema, das wir in diesem Abschnitt bewusst noch nicht behandeln.

Wenn Ihr Repository auf GitHub leer ist, sollte es wie im folgenden Bildschirmfoto aussehen:

Wie Sie im Screenshot erkennen können, müssen Sie nun die angezeigten drei Befehle in Ihrer Konsole eingeben. Nach erfolgreicher Ausführung wird Ihr lokales Projekt mit dem GitHub-Repository verbunden, und Sie sehen im Anschluss die ersten Dateien Ihres Projekts online in Ihrem Repository.

git remote add origin git@github.com:xxxxxxxxxxxx/webinar-spa-vue.git
git branch -M main
git push -u origin main

Achten Sie bitte darauf, dass Sie das richtige Repository-Kennzeichen (also die genaue URL Ihres GitHub-Repositories) verwenden.

Ich verwende für meine Arbeit PhpStorm und nutze darin die integrierte Git-Lösung, um Commits, Pushes und andere Versionsvorgänge bequem direkt aus der Entwicklungsumgebung heraus durchzuführen.

Wenn Sie jedoch kein PhpStorm verwenden, kann ich Ihnen die folgende interaktive Lernplattform sehr empfehlen: https://learngitbranching.js.org/

Dort können Sie auf spielerische und visuell ansprechende Weise alles rund um Git und Branching lernen – von den Grundlagen bis zu fortgeschrittenen Themen wie Merges, Rebases oder komplexen Workflows. Die Seite eignet sich ideal, um die Funktionsweise von Git Schritt für Schritt praktisch zu verstehen.

Zusammenfassung

In diesem Abschnitt haben Sie gelernt, wie Sie Ihr bestehendes Vue/Vite-Projekt erstmals mit Git versionieren und anschließend mit einem GitHub-Repository verbinden.

Zunächst wurde Git lokal im Projektverzeichnis eingerichtet, um Änderungen nachvollziehbar zu speichern und den Entwicklungsverlauf zu dokumentieren. Dabei spielt die Datei .gitignore eine wichtige Rolle, da sie unnötige Dateien wie node_modules/ oder dist/ vom Repository ausschließt.

Nach dem ersten Commit – also dem Speichern des Projektzustands – wurde ein leeres Repository auf GitHub angelegt und anschließend mit dem lokalen Projekt verbunden. Wichtig ist, dass dieses GitHub-Repository zu Beginn wirklich leer ist, damit keine Konflikte entstehen.

Zum Abschluss haben Sie erfahren, wie Sie Ihr Projekt sicher online speichern und synchronisieren können – entweder über die integrierte Git-Verwaltung in PhpStorm oder, falls Sie eine andere Entwicklungsumgebung nutzen, mit Hilfe der interaktiven Lernplattform learngitbranching.js.org, um Git-Grundlagen und Workflows besser zu verstehen.