予約システムを作る #6：とりあえずの画面を作る 2

将来的にカレンダーを表示する画面を作る。
ただ、カレンダーについてはまだ整理できていないので未実装

カレンダーコンポーネント

まだ、どう作って良いか整理できていない。
とりあえず 予約を行う [予約する] ボタンと、予約を削除する [予約の削除] ボタンを作っておく。
☆resources/js/components/CalendarComponent.vue

<template>
    <div class="container">
        <h1>カレンダー</h1>
        <button type="button" class="btn btn-success">予約する</button>
        <button type="button" class="btn btn-success">予約の削除</button>
    </div>
</template>

ルーターの登録

カレンダー画面、予約登録画面、予約削除画面はVueRouterという仕組みで表示させる予定である。
VueRouterを使うと メイン画面(resources/views/app.blade.php)の router-view の部分を紙芝居のように置き換えることができるっぽい。
ということで、まずはカレンダーコンポーネントをVueRouterへ登録する。
カレンダーはトップページに表示したいので path: '/' で登録する。 また、"book.calendar" の名前
☆ resources/js/app.js

  ：
import Vue from 'vue';
import VueRouter from 'vue-router';
import CalendarComponent from './components/CalendarComponent';

window.Vue = require('vue').default;

Vue.use(VueRouter);

const router = new VueRouter({
    routes: [
        {
            path: '/',
            name: 'book.calendar',
            component: CalendarComponent,
        },
    ],
});
  ： 
const app = new Vue({
    el: '#app',
    router,
});

"npm run dev" でビルドして表示してみる。

---

予約システム