HTML5-Tutorium: JavaScript: Hello World Vue 01

Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:

Korrektheit: 3 (zu größeren Teilen überprüft)

Umfang: 4 (unwichtige Fakten fehlen)

Quellenangaben: 3 (wichtige Quellen vorhanden)

Quellenarten: 5 (ausgezeichnet)

Konformität: 3 (gut)

Vorlesung WebProg

Inhalt | Teil 1 | Teil 2 | Teil 3 | Teil 4 | Teil 5 | Teil 6 | Vue 1 | Vue 2 | Vue 3 | Vue 4 | Vue 5 | Vue 6

Musterlösung
Git-Repository, git checkout v01 (JavaScript)
Git-Repository (TypScript), git checkout v01

Anwendungsfälle (Use Cases)

Gegenüber dem dritten, vierten, fünften und sechsten Teil des Tutoriums ändern sich die die Anwendungsfälle nicht. Die Anwendung leistet also genau dasselbe wie zuvor.

In diesem Teil geht es zunächst darum, die Lösung aus Teil 6 des Tutoriums mit vue zu realisieren

Erstellen eines neuen Projekts

Erstellen Sie ein neues Projekt hello_world_vue:

cd <somewhere>

npm init vue@latest
  Ok to proceed? (y)
  Project name: » hello_world_vue
  Add TypeScript? » No (Yes mittels Tab-Taste)
  Add ESLint for code quality? » Yes

cd hello_world_vue
npm install
npm run dev  # Im Browser: http://localhost:5173/

# Linefeed ändern (unter Windows => Unix-Zeilenende)
cat <<EOF > .vscode/settings.json
{ "files.eol": "\n" }
EOF
# VLC (neu) starten, damit settings.json gelesen wird
# und Terminal für das Projekt öffnen

# initialize git
git init
git add -A
git commit -m "initial commit"

git remote add origin https://gitlab.multimedia.hs-augsburg.de/ACCOUNT/hello_world_vue
git remote -v
git push --set-upstream origin master

# create a new git branch
git checkout -b v00
git push --set-upstream origin v00

Anmerkungen

Vue ist ein Framework zum Erstellen von Single-Page-Web-Anwendungen. Allerdings gibt es eine Router-Erweiterung: Multi-Page-Web-Anwendungen.

Vue basierte bis Version 3.0 auf Webpack. Webpack gilt allerdings schon wieder als Dinosaurier (existiert seit 2012)

Seit Version 3.2. verwendet Vue Vite (französisch „schnell“). Dies hat zur Konsequenz, dass das Initialisieren und Testen einer Vue-Anwendung anders erfolgt als früher.

Vue 3 unterstützt im Gegensatz zu Vue 2 TypeScript. Daher verwenden wir auch TypeScript.

Vue-Anwendungen sind aus Komponenten aufgebaut. Das passt sehr gut Atomic-Design-Prinzip.

Überführung von hello-world-06 nach vue

git checkout -b v01   # neuen Git-Zweig (branch) anlegen
npm i -D sass         # sass aktivieren

.gitignore            # ansehen
LICENSE               # wird aus einem anderen Projekt kopiert
package.json          # mit package.json von hello_world_06 mergen
vite.config.js        # mit vite.config.js von hello_world_06 mergen
                      # Ausnahmen: root, publicDir, und outDir
index.html            # title anpassen, head.css importieren
src/css               # Ordner von hello_world_06 übernehmen
public                # favicon ersetzen
README.md             # ansehen und verbessern

npm run dev           # Vite-Server neu starten

Tipp
Wenn Sie Code von mir verwenden, sollten Sie

 "no-unexpected-multiline": false

in das "env"-Objekt in der Datei exlintrc.cjs nach Zeile 10 einfügen:

"env":
{ "vue/setup-compiler-macros": true,
  "no-unexpected-multiline":   false,
}

Achtung
Um relative Pfade beim Building zu erzwingen, reicht es nicht, die Option „base: “ in vite.config.js einzufügen. Sie müssen dies zusätzlich in vue.config.js festlegen:

import { defineConfig } from '@vue/cli-service'

export default defineConfig ({ publicPath: '' })

src/App.vue

• Die Hello-World-Komponente und das Style-Element laden.
• Nur die Hello-World-Komponente ins Template einfügen.
• body.scss importieren.

<script setup>
  import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <main>
    <HelloWorld />
  </main>
</template>

<style lang="scss">
  @import '@/css/body.scss'
</style>

Der Ordner src/assets wird nun nicht mehr benötigt und kann gelöscht werden.

src/components/HelloWorld.vue

• Sections aus index.html in Template-Element einfügen.
• Sectionspezifische SCSS-Anweisungen in src/HelloWorld.scss verschieben und diese Datei in src/components/HelloWorld.vue importieren.
• Skript-Element befüllen.

/* src/HelloWorld.scss */

#section_form
{ text-align:   center;
  margin-left:  auto;
  margin-right: auto;

  h1
  { margin-bottom: 0.5ex; }
}

#section_hello
{ p
  { font-size: $font-size-p-large !important; }
}

<!-- src/components/HelloWorld.vue -->

<script setup>
  import { ref, computed } from 'vue'

  const
    section       = ref('question'),
    helloStranger = ref('Hello, Stranger'),
    name          = ref(''),

    hello      = computed(() => `Hello, ${name.value}!`),
    visability = p_section =>
                 p_section !== section.value ? 'hidden' : '',
    sayHello   = () => { section.value = 'hello' }
</script>