Mein erster Versuch, Javascript nicht nur im Editor selber zusammen zu klöppeln, sondern stattdessen mal zeitgemäße Tools zu benutzen.

Dies hier nur als eigene Mitschrift, um später noch zu wissen, was man eigentlich gemacht hat…

Wenn man eigentlich schon installiert hatte, dann diesen Text unten nochmal versucht und dann mit npm install -g irgendwie die Versionsbeziehung zwischen npm und node.js zerschießt, muss man erst mal alles wieder ans Laufen bekommen..

https://askubuntu.com/a/548776 und https://github.com/nvm-sh/nvm#installing-and-updating

Run once:

sudo apt-get update
sudo apt-get install -y ca-certificates curl gnupg
sudo mkdir -p /etc/apt/keyrings
curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg

Run whenever you want to change the major version of Node.js:

NODE_MAJOR=20
echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list
sudo apt-get update
sudo apt-get install nodejs -y

Und weil man sich mit node xx irgendwelche ssh Inkompatibilitäten einhandelt, muß man zurück auf node 16.x. Den Node- Paketmanager hat man sich aber auch zerschossen, also installiert man sich den erstmal neu.

Danach öffnet man seine Bash neu, damit die Änderungen aktiv sind und dreht die Versionsnumme runter

nvm install v16 && nvm alias default v16 && nvm use v16

npm aktualisieren

npm install -g npm

Ins Verzeichnis wechseln, wo das Projekt angelegt werden soll

Vue-Cli installieren. Mit welcher Vue Version das Projekt letztlich gebaut wird, wird gleich bei vue create .. abgefragt

npm install -g @vue/cli
npm install -g @vue/cli-init

Das Projekt initialisieren (hier mit pwa als Vorlage)

vue init pwa klobs_1 (oder vue create klobs_1)
cd router-project
npm install
vue add vuetify

Komischerweise wurde das Projekt dann doch nicht als PWA konfiguriert, darum noch ein nachträgliches

vue add @vue/pwa

Den Server-Host umschreiben, damit er auf allen Adressen lauscht und nicht nur auf localhost

build/dev-server.js

const uri = 'http://0.0.0.0:' + port

Die Page Struktur als Vue- Template Dateien anlegen. Wir nehmen dazu die auf https://www.thepolyglotdeveloper.com/2017/11/router-navigate-pages-vuejs-application/ beschriebenen Techniken, um zwischen den Seiten zu wechseln. Ausserdem benutzen wir auch die Tipps von https://www.thepolyglotdeveloper.com/2017/11/pass-data-between-routes-vuejs-web-application/, um Parameter von der übergeordneten Page auf die Detail- Page zu bekommen

Main.vue

<template>
<div class="hello">
<h1>{{ msg }}</h1>
<router-link to="/newewent">Navigate to Newevent</router-link>
        <a style="cursor: pointer; text-decoration: underline" v-on:click="navig
ate()">Navigate to
Newevent</a>
</div>
</template>
 
<script>
import router from '../router'
export default {
  name: 'Main',
  data () {
    return {
      msg: 'Main page'
    }
  },
  methods: {
    navigate () {
      router.push({ name: 'Newevent' })
    }
  }
 
}
</script>
 
<style scoped>
    h1, h2 {
        font-weight: normal;
    }
 
    ul {
        list-style-type: none;
        padding: 0;
    }
 
    li {
        display: inline-block;
        margin: 0 10px;
    }
 
    a {
        color: #42b983;
    }
</style>

Den Vue- Router entsprechend ergänzen

src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/components/Main'
import Newevent from '@/components/Newevent'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      redirect: {
        name: 'Main'
      }
    },
    {
      path: '/main',
      name: 'Main',
      component: Main
    },
    {
      path: '/',
      name: 'Newevent',
      component: Newevent
    }
  ]
})

npm run dev

Wofür war dies noch ?

npm install -g @vue/cli-service
vue-cli-service serve