[Laravel]Laravel6.8 × Vue.jsでSPAを構築する流れ

#今回の題
1ヶ月前に勉強がてらLaravelとVue.jsでSPAを構築してみたのですが、1ヶ月経った今、その手順をすっかり忘れてしまいました。
必要な時に振り返ればいい知識だとは思うのですが、忘れすぎて少し癪だったのでアウトプットしておきます。

この記事では、HomeとUserというページを作り、それぞれをページ遷移を行わずに切替えられる様にします。

![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546124/e0c39f98-feac-fea8-95d6-2539900a352a.gif)

ページのコンテンツとURLがページ遷移なしに切り替わっているのがわかると思います。


#バージョン
- Laravel6.8
- Laravel Mix 4.1.4
- Vue.js 2.6.12
- Vue Router 3.4.3

#手順

##Laravelのインストール

```terminal
$ composer create-project "laravel/laravel=6.8" laravel-spa
```

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

- Vue.js

```terminal
$ npm install vue --save-dev
```

- Laravel Mix

```terminal
$ npm install laravel-mix --save-dev
```

- Vue Router

```terminal
$ npm install vue-router --save-dev
```

- cross-env

```terminal
$ npm install cross-env --save-dev
```

##Laravel Mixの設定

`webpack.mix.js`にコンパイル先を定義します。

```js:webpack.mix.js
const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .version();
```
これで`resources/js/app.js`に書いたVueは`public/js`にコンパイルされます。
version()はキャッシュ対策です。
ブラウザに以前のJavaScriptがキャッシュとして残っていると、キャッシュの方を使ってしまうので、ここでversion()を使い、さらにviewでmix関数を使ってjsを読み込むことで対策出来ます。
[参考](https://readouble.com/laravel/6.x/ja/mix.html#versioning-and-cache-busting)

##コンパイル
以下のコマンドで変更を監視し、自動的にコンパイルが行われる様にします。

```terminal
$ npm run watch
```

##各種ファイル作成

###view

```php:resources/views/index.blade.php
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div id="app">
    <router-view /> 
  </div>
  <script src="{{ mix('js/app.js') }}"></script> 
</body>

</html>
```
[参考](https://router.vuejs.org/ja/guide/#html)

###router.js

`resources/js/`にrouter.jsを作成。
SPAのルーティングはここに定義します。

```js:router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './components/pages/Home'
import User from './components/pages/User'

Vue.use(Router)

export default new Router({
  mode: 'history', 
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home 
    },
    {
      path: '/user',
      name: 'user',
      component: User 
    },
  ]
})
```

Vue.jsとvue-router、使用するコンポーネントをimportしたあと、ルーティングでパスにコンポーネントを割り振っています。
[参考](https://router.vuejs.org/ja/guide/#html)

###app.js
`resources/js/app.js`を以下の様に編集します。

```js
import Vue from 'vue'
import router from './router.js'

new Vue({
 router
}).$mount('#app')
```

Vue.jsとvue-routerをimportして、routerを適用する要素を設定します。

[参考](https://router.vuejs.org/ja/guide/#html)

###コンポーネント
ページの内容となるコンポーネントは`components`ディレクトリで管理します。

```terminal
$ mkdir resources/js/components
```

`components`ディレクトリに`pages`ディレクトリを作成し、

```terminal
$ mkdir resources/js/components/pages
```

そこに、`Home.vue` `User.vue`というファイルを作り、以下の様にそれぞれ編集します。

```Home.vue
<template>
    <div>
        <h1>Home</h1>
        <router-link :to="{ name: 'user' }">User</router-link>
    </div>
</template>
```

```User.vue
<template>
    <div>
        <h1>User</h1>
        <router-link :to="{ name: 'home' }">Home</router-link>
    </div>
</template>
```

##確認
以下のコマンドでビルトインサーバーを立ち上げ、

```terminal
$ php artisan serve
```

http://127.0.0.1:8000/
にアクセスして確認してください。

最初のgifの様な動きが確認できるはずです。
あとはこれを土台に好きな様に弄り回してSPAで色々作れると思います。

以上！！

#一言
最初SPAの構築ができた時、めちゃくちゃ興奮して無駄にページ行き来しまくりました。
SPAすごい技術だなぁ……。

#参考
[readouble アセットのコンパイル](https://readouble.com/laravel/6.x/ja/mix.html)
[Vue Router](https://router.vuejs.org/ja/guide/)
[Laravel6.xとVue Routerでvue.jsのSPA構築](https://reffect.co.jp/laravel/laravel-vue-router-single-page-application)