1.コンポーネントの作成
作るページ（コンポーネント）は全部で４つです。
- タスク一覧 TaskListComponent.vue
- タスク詳細 TaskShowComponent.vue
- タスク登録 TaskCreateComponent.vue
- タスク編集 TaskEditComponent.vue
2.ベースbladeとベースルーティングを追加
routes/web.phpの修正
Route::get('/{any}', function() {
return view('app');
})->where('any', '.*');
resouces/views/app.blade.phpの修正
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Vue Laravel SPA') }}</title>
<!-- Styles -->
<link href="{{ mix('/css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<header-component></header-component>
<router-view></router-view>
</div>
<!-- Scripts -->
<script src="{{ mix('/js/app.js') }}" defer></script>
</body>
</html>
3.ヘッダーコンポーネント実装
resources/js/components/HeaderComponent.vue
<template>
<div class="container-fluid bg-dark mb-3">
<div class="container">
<nav class="navbar navbar-dark">
<span class="navbar-brand mb-0 h1">Vue Laravel SPA</span>
<div>
<router-link v-bind:to="{name: 'task.list'}">
<button class="btn btn-success">List</button>
</router-link>
<router-link v-bind:to="{name: 'task.create'}">
<button class="btn btn-success">ADD</button>
</router-link>
</div>
</nav>
</div>
</div>
</template>
<script>
export default {}
</script>
■コンポーネントをVueインスタンスに登録
resources/js/app.js
import VueRouter from 'vue-router';
import HeaderComponent from "./components/HeaderComponent";
import TaskListComponent from "./components/TaskListComponent";
import TaskCreateComponent from "./components/TaskCreateComponent";
import TaskShowComponent from "./components/TaskShowComponent";
import TaskEditComponent from "./components/TaskEditComponent";
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue').default;
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0],
// files(key).default))
Vue.component('example-component',
require('./components/ExampleComponent.vue').default);
Vue.component('header-component', HeaderComponent);
Vue.use(VueRouter);
■登録したコンポーネントをベースbladeに追加
既に記載済みですが。
resources/views/app.blade.php
<div id="app"> <header-component></header-component> <router-view></router-view> </div>
これにて準備完了
次の回からコンポーネントの詳細説明に入ります
学習の際は準備作業と前もって何をすべきか明確にしておきます
設計などの勉強にもなります。
