どうもきよです！
今回はLaravel6にVueを導入からSPAにするまでの方法をメモします。
環境は下記です。
|
1 2 3 4 |
◇環境 ・Laravel6. ・Vue 2.5 ・VueRouter 3.1 |
スポンサーリンク
１.Vueをインストール
Laravel6では、Vueをインストールするときに、
「laravel/ui」というパッケージが必要になります。
下記を実行しパッケージのインストールをします。
|
1 |
composer require laravel/ui --dev |
パッケージがインストールできたら、VueとVueRouterを入れていきます。
下記を実行。
|
1 2 3 |
php artisan ui vue npm install vue-router npm install |
これで必要なものは揃いましたので、
SPAの設定に移ります。
２.SPAの設定
SPAの設定に必要な手順は下記です。
|
1 2 3 4 |
1.web.phpの修正 2.app.blade.php作成（ファイル名は任意） 3.router.js作成 4.app.jsの修正 |
1.web.phpの修正
web.phpを下記のように設定します。
|
1 2 3 |
Route::get('/{any}', function () { return view('app');// 今回はapp.blade.phpを常に表示するのでapp })->where('any', '.*'); |
※ファイル名に合わせてview()の中は修正してください
2.app.blade.php作成（ファイル名は任意）
SPAはJSで表示を一部切り替えるだけなので、基本はBladeファイル一枚。
|
1 2 3 4 5 6 7 8 9 |
<html> <head></head> <body> <div id="app"> <router-view></router-view> </div> <script src="js/app.js"></script> </body> </html> |
※<router-view>の箇所が、Vueコンポーネントで切り替わる
3.router.js作成
今回は、routerの設定はrouter.jsに書くようにしました。
(app.js内に書いちゃっても大丈夫です)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import Vue from 'vue'; import VueRouter from 'vue-router'; // component import import Hoge from './components/ExampleComponent.vue'; Vue.use(VueRouter); const router = new VueRouter({ mode: 'history', // URLに#が付くのを防ぐ routes: [ {path: '/', component: Hoge} ] }); export default router; |
※mode: ‘history’をつけると、 URLの「#」が付かなくなります。
4.app.jsの修正
app.jsにrouterの設定を読み込ませます。
|
1 2 3 4 5 6 7 8 9 |
require('./bootstrap'); window.Vue = require('vue'); import router from './router.js'; const app = new Vue({ el: '#app', router }); |
最後に npm run dev を実行すれば完了です。
「/hoge」にアクセスすると、ExampleComponent.vue
の内容が出てるはずです。
それでは！
以上、よろしくお願いいたします。