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

どうもきよです!

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

環境は下記です。

スポンサーリンク




1.Vueをインストール

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

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

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

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

下記を実行。

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

SPAの設定に移ります。

2.SPAの設定

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

1.web.phpの修正

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

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

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

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

※<router-view>の箇所が、Vueコンポーネントで切り替わる

3.router.js作成

今回は、routerの設定はrouter.jsに書くようにしました。

(app.js内に書いちゃっても大丈夫です)

※mode: ‘history’をつけると、 URLの「#」が付かなくなります。

4.app.jsの修正

app.jsにrouterの設定を読み込ませます。

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

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

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

それでは!

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

スポンサーリンク




シェアする

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

フォローする

スポンサーリンク




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