Laravel + Vue.js でSPA 開発環境構築メモ

## 各種パッケージのインストール

### Laravel6.x のインストール
composerを使ってLaravelのインストールとプロジェクトを作成します。

```
composer create-project --prefer-dist laravel/laravel sample-project "6.*"
```

### Laravel/ui のインストール

```
cd sample-project
composer require laravel/ui:^1.0 --dev
```

### Vue.jsのインストール

```
php artisan ui vue
```

### Vue Routerのインストール

```
npm install vue-router -D
```

### Vuexのインストール

```
npm install vuex -D
```

### 各パッケージをコンパイル

```
npm install && npm run dev
```

```
 DONE  Compiled successfully in 5890ms                                                                                                                                                          14:54:22

       Asset      Size   Chunks             Chunk Names
/css/app.css   179 KiB  /js/app  [emitted]  /js/app
  /js/app.js  1.41 MiB  /js/app  [emitted]  /js/app
```

### 実行

```
php artisan serve
```

画面が起動する
![スクリーンショット 2021-02-14 14.58.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84356/06bbde21-cc74-36f0-1a2a-905acc89713d.png)

## Vue.jsのVueRouterによるSPAの実装
### ルーティング用ファイルを作成・修正

- ルーティングについてはVueRouterが担当するため、Laravelのルーティングは使用しない。

```routes/web.php
<?php

Route::get('/{any}', function() {
    return view('index');
})->where('any', '.*');
```

- 上記で返すbladeファイルを新規作成（これがSPAの起点となる）

```resources/views/index.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"></div>
<!-- Scripts -->
<script src="{{ mix('/js/app.js') }}" defer></script>
</body>
</html>
```

- Vueインスタンスを作成するファイルを下記のように修正する

```resources/js/app.js
require('./bootstrap');

import Vue from 'vue';
import router from './router';
import App from './App.vue';

new Vue({
  router: router,
  render: h => h(App)
}).$mount('#app');
```

- VueRouterの設定ファイルを新規作成

```resources/js/router.js
import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

import Home from './components/Home.vue'
import ExampleComponent from './components/ExampleComponent.vue';

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/example',
      name: 'example',
      component: ExampleComponent
    },
  ]
});
```

- Vueコンポーネントの作成

```resources/App.vue
<template>
  <div> 
    <div>
      <router-link to="/" tag="button">Home</router-link>
      <router-link to="/example">Example</router-link>
    </div>
    <router-view/>
  </div>
</template>
 
<script>
</script>
 
<style scoped>
a {
  color: greenyellow;
  text-decoration: none;
}
 
a.router-link-exact-active {
  color: orange;
  font-weight: bold;
}
</style>
```

```resources/js/components/Home.vue
<template>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <div class="card">
          <div class="card-header">Home Component</div>

          <div class="card-body">This is an home page.</div>
        </div>
      </div>
    </div>
  </div>
</template>
```

```resources/js/components/ExampleComponent.vue
<template>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <div class="card">
          <div class="card-header">Example Component</div>

          <div class="card-body">I'm an example component.</div>
        </div>
      </div>
    </div>
  </div>
</template>
```

### コンパイル＆実行

```
npm run dev && php artisan serve
```

```
DONE  Compiled successfully in 5768ms

       Asset      Size   Chunks             Chunk Names
/css/app.css   179 KiB  /js/app  [emitted]  /js/app
  /js/app.js  1.52 MiB  /js/app  [emitted]  /js/app
Laravel development server started: http://127.0.0.1:8000
[Sun Sep 19 12:26:08 2021] PHP 7.4.15 Development Server (http://127.0.0.1:8000) started
```

画面が起動する
![スクリーンショット 2021-09-19 12.26.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84356/7c544908-9cf6-69a6-d2c9-69702cda3651.png)