Projektstart/Installation

Übersicht



Kopieren

Kopieren sie die folgenden Dateien aus den vorangegangenen Lektionen in das neue Projekt:

  • berlinclock.vue
  • lotto.vue

Vergessen Sie nicht die dazugehörigen Ordner mit den Bilder in den static-Ordner zu kopieren. Die Ordner-Struktur sieht dann etwa wie folgt aus:

/files/vue/vue-routes/ordner-struktur.png

Vorbereitung der Menüs und Routen

Nun folgen die ersten Anpassungen in main.js, wir übernehmen die Struktur aus der Dokumentation zum vue-router-Projekt. Zwei Änderungen sind dann noch notwendig:

  • der Import des Moduls (Zeilen 6+7)
  • die Verwendung von Namen (Zeilen 21-23) für die Routen (named routes). Diese Namen werden dann weiter unten auch verwendet.
  • in App.vue müssen die CSS-Formate für die Listen übernommen werden, erst danach sieht das minimalistische Menü, wie ein Menü aus. Auf den template-Block verzichten wir auch, weil der jetzt für alle Komponenten einheitlich in main.js definiert ist.

vue/vue-routes/001/main.js (Source)

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 1. Define route components.
// These can be imported from other files
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const Home = { template: '<div>Die Startseite mit der Verlinkung!!!</div>' }

// 2. Define some routes
// Each route should map to a component. The "component" can
// either be an actual component constructor created via
// Vue.extend(), or just a component options object.
// We'll talk about nested routes later.
const routes = [
  { path: '/home', name: 'home', component: Home },
  { path: '/foo', name: 'foo', component: Foo },
  { path: '/bar', name: 'bar', component: Bar }
]

// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.

const router = new VueRouter({
  routes // short for routes: routes
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: `
    <div id="app">
      <h1>Named Routes</h1>
      <p>Current route name: {{ $route.name }}</p>
      <ul>
        <li><router-link :to="{ name: 'home'}">Start</router-link></li>
        <li><router-link :to="{ name: 'foo'}">Foo</router-link></li>
        <li><router-link :to="{ name: 'bar'}">Bar</router-link></li>
      </ul>
      <router-view class="view"></router-view>
    </div>
  `,
  components: { App }
}).$mount('#app')

vue/vue-routes/001/App.vue (Source)

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

</style>

Ein erster Eindruck von dem Sammelsurium

/files/vue/vue-routes/erster-eindruck.png