Vue CLI - Versionsgeschichte

37.49.72.8 am 2. Januar 2021 um 14:29 Uhr

2021-01-02T14:29:01Z

2021-01-01T14:29:24Z

Aufbau von .vue Dateien

2020-12-21T21:40:02Z

2020-12-21T18:47:18Z

Single File Components (.vue)

2020-12-21T17:25:04Z

Single File Components (.vue)

2020-12-21T17:00:46Z

Build Workflow

2020-12-21T16:50:54Z

Build Workflow

2020-12-21T16:47:23Z

Basics

2020-12-21T16:19:43Z

Basics

2020-12-21T16:08:38Z

vue create

← Nächstältere Version		Version vom 1. Januar 2021, 14:29 Uhr
Zeile 90:		Zeile 90:

	== Aufbau von .vue Dateien ==		== Aufbau von .vue Dateien ==
−	Die Single File Components fassen template, script und style Daten zusammen.	+	Die Single File Components fassen template, script und style Daten zusammen. In einer Datei werden diese Teile in Tags eingebaut.
		+
		+	Beispiel:
		+	'''app.vue'''
		+	<syntaxhighlight lang="html5">
		+	<template>
		+
		+	<section>
		+	<header><h1>My Friends</h1></header>
		+	<new-friend @add-friend="addFriend"></new-friend>
		+	<ul>
		+	<friend-contact
		+	v-for="friend in friends"
		+	:key="friend.id"
		+	:id="friend.id"
		+	:name="friend.name"
		+	:phone-number="friend.phone"
		+	:email-address="friend.email"
		+	:is-favourite="friend.isFavourite"
		+	@toggle-favourite="toggleFavouriteState"
		+	@delete="deleteContact">
		+	</friend-contact>
		+	</ul>
		+	</section>
		+
		+	</template>
		+
		+	<script>
		+	import FriendContact from './components/FriendContact.vue'
		+	import NewFriend from './components/NewFriend.vue'
		+	export default {
		+	components: {
		+	FriendContact,
		+	NewFriend
		+	},
		+	data(){
		+
		+	},
		+	methods:{
		+
		+	}
		+	}
		+	</script>
		+
		+	<style>
		+	@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');
		+	* {
		+	box-sizing: border-box;
		+	}
		+
		+	/.../
		+	</style>
		+	</syntaxhighlight>

@@ Zeile 51: / Zeile 51: @@
   npm run serve
 den Server starten wird (siehe package.json) ein Skript gestartet, dass neben dem Webserver auch eine Reihe von Tools startet die bei jeder Änderung des Codes den Build Prozess in Gang setzen, so dass der Browser immer den aktuellen Code erhält.
 === Single File Components (.vue) ===
@@ Zeile 64: / Zeile 63: @@
 * npm install
 * npm run serve

@@ Zeile 51: / Zeile 51: @@
   npm run serve
 den Server starten wird (siehe package.json) ein Skript gestartet, dass neben dem Webserver auch eine Reihe von Tools startet die bei jeder Änderung des Codes den Build Prozess in Gang setzen, so dass der Browser immer den aktuellen Code erhält.
 === Single File Components (.vue) ===
 Wie der Name schon sagt kann man mit den .vue Dateien Components erzeugen. Das Funktioniert viel einfacher als wenn man die templates für die Vue Komponenten mit dem template Object einschleusen müßte. Dafür benötigt man das Vue CLI Tool das "behind the scenes" den finalen Code erzeugt.
-Sinnvoll ist ein Syntaxhighlighter. Für VS ist z.Zt. (2020) '''Vetur''' das Tool der Wahl. Es geht weit über simples Syntaxhighlighting hinaus.
+Sinnvoll ist ein Syntaxhighlighter. Für VS ist z.Zt. (2020) '''Vetur''' das Must Have Plugin. Es geht weit über simples Syntaxhighlighting hinaus.
 === Exkurs: Dependencies in Visual Code installieren ===

← Nächstältere Version		Version vom 21. Dezember 2020, 17:25 Uhr
Zeile 56:		Zeile 56:

	Sinnvoll ist ein Syntaxhighlighter. Für VS ist z.Zt. (2020) '''Vetur''' das Tool der Wahl. Es geht weit über simples Syntaxhighlighting hinaus.		Sinnvoll ist ein Syntaxhighlighter. Für VS ist z.Zt. (2020) '''Vetur''' das Tool der Wahl. Es geht weit über simples Syntaxhighlighting hinaus.
		+
		+	=== Exkurs: Dependencies in Visual Code installieren ===
		+	* In VSC das Terminal öffnen (ist im Prinzip das System-Terminal hat aber den Vorteil, dass man nicht erst ins passende Verzeichnis navigieren muss)
		+	* npm install
		+	* npm run serve

← Nächstältere Version		Version vom 21. Dezember 2020, 17:00 Uhr
Zeile 51:		Zeile 51:
	npm run serve		npm run serve
	den Server starten wird (siehe package.json) ein Skript gestartet, dass neben dem Webserver auch eine Reihe von Tools startet die bei jeder Änderung des Codes den Build Prozess in Gang setzen, so dass der Browser immer den aktuellen Code erhält.		den Server starten wird (siehe package.json) ein Skript gestartet, dass neben dem Webserver auch eine Reihe von Tools startet die bei jeder Änderung des Codes den Build Prozess in Gang setzen, so dass der Browser immer den aktuellen Code erhält.
		+
		+	=== Single File Components (.vue) ===
		+	Wie der Name schon sagt kann man mit den .vue Dateien Components erzeugen. Das Funktioniert viel einfacher als wenn man die templates für die Vue Komponenten mit dem template Object einschleusen müßte. Dafür benötigt man das Vue CLI Tool das "behind the scenes" den finalen Code erzeugt.
		+
		+	Sinnvoll ist ein Syntaxhighlighter. Für VS ist z.Zt. (2020) '''Vetur''' das Tool der Wahl. Es geht weit über simples Syntaxhighlighting hinaus.

← Nächstältere Version		Version vom 21. Dezember 2020, 16:50 Uhr
Zeile 47:		Zeile 47:
	* Vue spezifische Syntax nutzen		* Vue spezifische Syntax nutzen
	In einem Build-Prozess wird dann Code erzeugt, der vom Browser gelesen werden kann. Am Ende der Entwicklung wird auf dem regulären Host nur der finale Code installiert.		In einem Build-Prozess wird dann Code erzeugt, der vom Browser gelesen werden kann. Am Ende der Entwicklung wird auf dem regulären Host nur der finale Code installiert.
		+
		+	Wenn wir mit
		+	npm run serve
		+	den Server starten wird (siehe package.json) ein Skript gestartet, dass neben dem Webserver auch eine Reihe von Tools startet die bei jeder Änderung des Codes den Build Prozess in Gang setzen, so dass der Browser immer den aktuellen Code erhält.

@@ Zeile 28: / Zeile 28: @@
   ctrl + c beenden.
 Am besten ist ein abgesichertes Netzwerk.
- === Überblick über das erzeugte Projekt ===
   package.json
 Enthält wie immer in npm die Projektkonfiguration, die auch schon mit npm run serve genutzt wurde. Darin sind z.B.
@@ Zeile 35: / Zeile 36: @@
   devDependencies -> Abhängige Packages die nur während der Entwicklung genutzt werden
   /node_modules -> npm lädt alle Packages aus den Dependencies (und deren Dependencies) und speichert sie hier.

← Nächstältere Version		Version vom 21. Dezember 2020, 16:19 Uhr
Zeile 28:		Zeile 28:
	ctrl + c beenden.		ctrl + c beenden.
	Am besten ist ein abgesichertes Netzwerk.		Am besten ist ein abgesichertes Netzwerk.
		+	=== Überblick über das erzeugte Projekt ===
		+	package.json
		+	Enthält wie immer in npm die Projektkonfiguration, die auch schon mit npm run serve genutzt wurde. Darin sind z.B.
		+	scripts -> die für unser Projekt definierten Skripte
		+	dependencies -> Abhängigkeiten also z.B. Libs, die automatisch zum Projekt hinzugefügt werden
		+	devDependencies -> Abhängige Packages die nur während der Entwicklung genutzt werden
		+	/node_modules -> npm lädt alle Packages aus den Dependencies (und deren Dependencies) und speichert sie hier.

@@ Zeile 25: / Zeile 25: @@
 npm run server führt die passenden Skripte aus und startet den integrierten npm Server.
-Achtung: der npm Server ist von überall im Lokalen Netz mit der passenden IP erreichbar. Nach beenden der Arbeit solltest du den Server unbedingt mit
+'''Achtung:''' Der npm Server ist von überall im Lokalen Netz mit der passenden IP erreichbar. Nach beenden der Arbeit solltest du den Server unbedingt mit
   ctrl + c beenden.
 Am besten ist ein abgesichertes Netzwerk.