【Laravel × Vue】Laravel6でVueを使用したSPAの設定方法! 俺用メモ!

どうもきよです!

今回はLaravel6にVueを導入からSPAにするまでの方法をメモします。

環境は下記です。

◇環境
・Laravel6.
・Vue 2.5
・VueRouter 3.1

スポンサーリンク




1.Vueをインストール

Laravel6では、Vueをインストールするときに、

「laravel/ui」というパッケージが必要になります。

下記を実行しパッケージのインストールをします。

composer require laravel/ui --dev

パッケージがインストールできたら、VueとVueRouterを入れていきます。

下記を実行。

php artisan ui vue
npm install vue-router
npm install

これで必要なものは揃いましたので、

SPAの設定に移ります。

2.SPAの設定

SPAの設定に必要な手順は下記です。

1.web.phpの修正
2.app.blade.php作成(ファイル名は任意)
3.router.js作成
4.app.jsの修正

1.web.phpの修正

web.phpを下記のように設定します。

Route::get('/{any}', function () {
    return view('app');// 今回はapp.blade.phpを常に表示するのでapp
})->where('any', '.*');

※ファイル名に合わせてview()の中は修正してください

2.app.blade.php作成(ファイル名は任意)

SPAはJSで表示を一部切り替えるだけなので、基本はBladeファイル一枚。

<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内に書いちゃっても大丈夫です)

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の設定を読み込ませます。

require('./bootstrap');

window.Vue = require('vue');
import router from './router.js';

const app = new Vue({
    el: '#app',
    router
});

最後に npm run dev を実行すれば完了です。

「/hoge」にアクセスすると、ExampleComponent.vue

の内容が出てるはずです。

それでは!

以上、よろしくお願いいたします。

スポンサーリンク




シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク




%d人のブロガーが「いいね」をつけました。