今回の題
1ヶ月前に勉強がてらLaravelとVue.jsでSPAを構築してみたのですが、1ヶ月経った今、その手順をすっかり忘れてしまいました。
必要な時に振り返ればいい知識だとは思うのですが、忘れすぎて少し癪だったのでアウトプットしておきます。
この記事では、HomeとUserというページを作り、それぞれをページ遷移を行わずに切替えられる様にします。
ページのコンテンツとURLがページ遷移なしに切り替わっているのがわかると思います。
バージョン
- Laravel6.8
- Laravel Mix 4.1.4
- Vue.js 2.6.12
- Vue Router 3.4.3
手順
Laravelのインストール
$ composer create-project "laravel/laravel=6.8" laravel-spa
各種パッケージのインストール
- Vue.js
$ npm install vue --save-dev
- Laravel Mix
$ npm install laravel-mix --save-dev
- Vue Router
$ npm install vue-router --save-dev
- cross-env
$ npm install cross-env --save-dev
Laravel Mixの設定
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を読み込むことで対策出来ます。
参考
コンパイル
以下のコマンドで変更を監視し、自動的にコンパイルが行われる様にします。
$ npm run watch
各種ファイル作成
view
<!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>
router.js
resources/js/にrouter.jsを作成。
SPAのルーティングはここに定義します。
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したあと、ルーティングでパスにコンポーネントを割り振っています。
参考
app.js
resources/js/app.jsを以下の様に編集します。
import Vue from 'vue'
import router from './router.js'
new Vue({
router
}).$mount('#app')
Vue.jsとvue-routerをimportして、routerを適用する要素を設定します。
コンポーネント
ページの内容となるコンポーネントはcomponentsディレクトリで管理します。
$ mkdir resources/js/components
componentsディレクトリにpagesディレクトリを作成し、
$ mkdir resources/js/components/pages
そこに、Home.vue User.vueというファイルを作り、以下の様にそれぞれ編集します。
<template>
<div>
<h1>Home</h1>
<router-link :to="{ name: 'user' }">User</router-link>
</div>
</template>
<template>
<div>
<h1>User</h1>
<router-link :to="{ name: 'home' }">Home</router-link>
</div>
</template>
確認
以下のコマンドでビルトインサーバーを立ち上げ、
$ php artisan serve
http://127.0.0.1:8000/
にアクセスして確認してください。
最初のgifの様な動きが確認できるはずです。
あとはこれを土台に好きな様に弄り回してSPAで色々作れると思います。
以上！！
一言
最初SPAの構築ができた時、めちゃくちゃ興奮して無駄にページ行き来しまくりました。
SPAすごい技術だなぁ……。
参考
readouble アセットのコンパイル
Vue Router
Laravel6.xとVue Routerでvue.jsのSPA構築