VueJS - Umgebungssetup

Hallo, zukünftige Vue.js-Entwickler! Ich freue mich sehr, diese Reise mit Ihnen anzutreten, während wir die aufregende Welt von Vue.js erkunden. Als Ihr freundlicher Nachbarschaftsinformatiklehrer werde ich Sie durch das Einrichten Ihrer Vue.js-Umgebung führen. Machen Sie sich keine Sorgen, wenn Sie neu im Programmieren sind – wir gehen Schritt für Schritt vor, und bevor Sie es wissen, werden Sie großartige Webanwendungen erstellen!

VueJS - Environment Setup

Warum Vue.js?

Bevor wir mit dem Einrichten beginnen, lasse ich Sie schnell eine Geschichte hören. Vor einigen Jahren kämpfte ich mit komplexen Webentwicklungsprojekten. Dann entdeckte ich Vue.js, und es war, als hätte ich einen Schweizer Army knife in einem Dschungel aus Web-Frameworks gefunden. Es ist einfach, leistungsstark und flexibel – perfekt für Anfänger und Experten alike!

Nun, lassen Sie uns die Hände schmutzig machen und Vue.js auf vier verschiedene Weisen einrichten.

Verwenden des

Diese Methode ist der einfachste Weg, um mit Vue.js zu beginnen, insbesondere wenn Sie nur Ihre Füße ins Wasser tauchen. Es ist wie das Bestellen eines vorgekochten Essens – schnell und einfach!

So machen Sie es:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meine erste Vue-App</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ nachricht }}
</div>

<script>
var app = new Vue({
el: '#app',
data: {
nachricht: 'Hallo Vue!'
}
})
</script>
</body>
</html>

Lassen Sie uns das zusammenbrechen:

Wir includieren die Vue.js-Bibliothek mit einem <script>-Tag im <head>-Bereich.
Wir erstellen ein <div> mit der ID "app" – hier wird unsere Vue-Anwendung leben.
Innerhalb des <script>-Tags unten erstellen wir eine neue Vue-Instanz und weisen ihr das Element mit der ID "app" zu.
Wir richten ein data-Objekt mit einer nachricht-Eigenschaft ein.
In der HTML wird {{ nachricht }} durch "Hallo Vue!" ersetzt.

Verwenden von CDN

CDN steht für Content Delivery Network. Es ist wie ein Pizzaservice für Ihren Code – schnell und bequem! Diese Methode ist ähnlich wie die Script-Tag-Methode, aber sie verwendet einen CDN-Link.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue mit CDN</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{ titel }}</h1>
<p>{{ inhalt }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
titel: 'Willkommen bei Vue!',
inhalt: 'Dies wird von einem CDN geladen.'
}
})
</script>
</body>
</html>

Der Hauptunterschied hier ist, dass wir einen CDN-Link verwenden, um Vue.js zu laden. Dies ist großartig für schnelle Prototypen oder das Lernen, da Sie nichts herunterladen müssen.

Verwenden von NPM

NPM steht für Node Package Manager. Es ist wie eine riesige Bibliothek, aus der Sie Codepakete ausleihen (oder in diesem Fall herunterladen) können. Diese Methode ist mehr für größere Projekte geeignet.

Zuerst müssen Sie Node.js auf Ihrem Computer installiert haben. Führen Sie dann die folgenden Schritte aus:

Öffnen Sie Ihr Terminal oder Ihre Kommandozeile.
Navigieren Sie zu Ihrem Projektverzeichnis.
Führen Sie die folgenden Befehle aus:

npm init -y
npm install vue

Erstellen Sie nun eine Datei namens app.js und fügen Sie den folgenden Code hinzu:

import Vue from 'vue'

new Vue({
el: '#app',
data: {
nachricht: 'Hallo von NPM!'
}
})

Und in Ihrer HTML-Datei:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue mit NPM</title>
</head>
<body>
<div id="app">
{{ nachricht }}
</div>
<script src="app.js"></script>
</body>
</html>

Diese Methode ermöglicht eine bessere Abhängigkeitsverwaltung und wird typischerweise in komplexeren Projekten verwendet.

Verwenden der CLI Kommandozeile

Das Vue CLI (Command Line Interface) ist wie ein persönlicher Assistent, der Ihre Vue.js-Projekte einrichtet. Es ist unglaublich leistungsstark und richtet eine vollständige Entwicklungsumgebung ein.

Um das Vue CLI zu verwenden:

Installieren Sie es global mit NPM:

npm install -g @vue/cli

Erstellen Sie ein neues Projekt:

vue create my-vue-project

Navigieren Sie in Ihr Projektverzeichnis:

cd my-vue-project

Starten Sie den Entwicklungsserver:

npm run serve

Das CLI erstellt eine Projektstruktur für Sie, einschließlich eines src-Ordners mit Ihrem Haupt-App-Komponenten und anderen notwendigen Dateien.

Hier ist ein einfaches Beispiel siitä, wie Ihre App.vue-Datei aussehen könnte:

<template>
<div id="app">
<h1>{{ titel }}</h1>
<p>{{ beschreibung }}</p>
</div>
</template>

<script>
export default {
name: 'App',
data() {
return {
titel: 'Willkommen in Ihrer Vue.js-App',
beschreibung: 'Dies wurde mit dem Vue CLI erstellt!'
}
}
}
</script>

<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

Dies richtet eine Komponente mit einer Vorlage, Skript und Styleabschnitt alles in einer Datei ein – quite neat, right?

Methodenübersicht

Hier ist eine schnelle Gegenüberstellung der Methoden, die wir behandelt haben:

Methode	Benutzerfreundlichkeit	Bester Einsatz	Voraussetzungen
Script Tag	Sehr einfach	Schneller Start, Lernen	Keine
CDN	Einfach	Prototyping, kleine Projekte	Keine
NPM	Moderat	Mittlere bis große Projekte	Node.js installiert
CLI	Fortgeschritten	Große, komplexe Projekte	Node.js, NPM

Denken Sie daran, es gibt keine "beste" Methode – es hängt alles von Ihren Projektanforderungen und persönlichen Präferenzen ab. Wenn Sie sich zunehmend mit Vue.js wohler fühlen, werden Sie natürlicherweise zur Methode neigen, die am besten zu Ihnen passt.

Und das war's! Sie sind jetzt mit vier verschiedenen Möglichkeiten ausgerüstet, um Ihre Vue.js-Umgebung einzurichten. Egal, ob Sie gerade erst anfangen oder ein komplexes Anwendung planen, Sie haben die Werkzeuge, um Ihre Vue.js-Reise zu beginnen.

Denken Sie daran, der Schlüssel zum Beherrschen des Programmierens ist die Übung. Also haben Sie keine Angst, diese verschiedenen Einrichtungsmethoden auszuprobieren. Versuchen Sie, kleine Projekte mit jeder Methode zu erstellen. Bevor Sie es wissen, werden Sie ein Vue.js-Zauberer!

Frohes Coden, und möge die Vue mit Ihnen sein! ??‍??‍?

Credits: Image by storyset