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…

npm aktualisieren

npm install -g npm

Ins Verzeichnis wechseln, wo das Projekt angelegt werden soll

Vue-Cli installieren

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
    }
  ]
})

Testserver starten

npm run dev

Wofür war dies noch ?

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