Laravel + Vue + Vue-Router + Bootstrup-Vueの環境を作る

タイトルが長い・・・

タイトルの環境でSPAを作ろうとして、意外とはまったのでメモ
多分、メモしながら作業しないと、2回目作るときも同じ失敗をしそう・・・

Laravelプロジェクト作成

これはいつも通りの手順で・・・

$ laravel new VueEnv

Bootstrup-Vue

ここがはまったポイントのひとつ目
すでにLaravelに入っていると思ったけど、npmで新規インストールする必要があった

$ cd VueEnv
$ npm i bootstrap-vue

Vue-Router

こちらもnpmでインストールできます

$ npm install vue-router

以上でフレームワークのインストールは完了です。

Laravelアプリの変更

\VueEnv\resources\js\app.jsapp.js
Bootstrup-vueとVue-Routerの公式サイトにあるサンプルコードを貼り付ける。
サンプルコードはそれぞれ
Vue-Router
https://router.vuejs.org/ja/installation.html
https://router.vuejs.org/ja/guide/#javascript

Bootstrup-Vue
https://bootstrap-vue.js.org/docs/
を、使いました。
全体像はこんな感じになります。

// Vue-Routerの設定
import Vue from 'vue'
import VueRouter from 'vue-router'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(VueRouter);
Vue.use(BootstrapVue);

// 0. モジュールシステムを使っている場合 (例: vue-cli 経由で)、Vue と VueRouter をインポートし、`Vue.use(VueRouter)` を呼び出します。

// 1. ルートコンポーネントを定義します
// 他のファイルからインポートすることもできます
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. ルートをいくつか定義します
// 各ルートは 1 つのコンポーネントとマッピングされる必要があります。
// このコンポーネントは実際の `Vue.extend()`、
// またはコンポーネントオプションのオブジェクトでも構いません。
// ネストされたルートに関しては後で説明します
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. ルーターインスタンスを作成して、ルートオプションを渡します
// 追加のオプションをここで指定できますが、
// この例ではシンプルにしましょう
const router = new VueRouter({
  routes // `routes: routes` の短縮表記
})

// 4. root となるインスタンスを作成してマウントします
// アプリケーション全体がルーターを認知できるように、
// ルーターをインジェクトすることを忘れないでください。
const app = new Vue({
  router
}).$mount('#app')

// これで開始です!

Laravelコントローラなどの作成

Laravelコントローラを作成して、とりあえず動くようにします。
この手順については、以前の記事「LARAVELでSPAアプリケーションページを作成する」と同様になるため、省略します。
RestfulAPI用のコントローラと、エントリポイントとなるView「app.blade.php」を作成します。

app.blade.phpの編集

コントローラとビューが出来たら、app.blade.phpの内容をこれまたそれぞれの公式ページをもとに、内容を変更してみます。
テンプレートの中身は、「Starter Templates」をベースにカスタマイズしてみます。
全体像はこんな感じ

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <title>My first Bootstrap-Vue app</title>
    <link href="{{asset('css/app.css')}}" rel="stylesheet">
  </head>

  <body>
    <!-- Our application root element -->
    <div id="app">
      <b-container>
        <b-jumbotron header="Bootstrap Vue"
                     lead="Bootstrap 4 Components for Vue.js 2"
        >
          <p>For more information visit our website</p>
          <b-btn variant="primary" href="https://bootstrap-vue.js.org/">More Info</b-btn>
        </b-jumbotron>

      </b-container>

      <b-container>
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>

        <router-view></router-view>
      </b-container>
    </div>

    <script src="{{asset('js/app.js')}}"></script>
  </body>
</html>

ビルドして動作確認

以上で、Laravel + Vue + Vue-Router + Bootstrup-Vueの環境ができたはずです。
WebPackにてリソースをビルド後、動作を確認してみましょう。
プロジェクトディレクトリで、以下のコマンドでビルドします

npm run watch

メモ
初回のnpm run watch実行時に以下のエラーが発生した

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Sheltie\AppData\Roaming\npm-cache\_logs\2018-10-10T22_08_22_834Z-debug.log

npm installでパッケージをインストールしたら直った

$ npm install

動作確認

実際に動きを確認します。以下のURLにアクセス
http://vue-env.test/ enter image description here

「Go to Foo」「Go to Bar」のリンクをそれぞれクリックすると、URLと画面表記が変わることが確認できるかと思います。 enter image description here enter image description here

終わりに

これでLaravel + Vue + Vue-Router + Bootstrup-Vueの環境ができました。
今回取り入れたかった要素はすべてそろったので、やっとこさアプリ開発に取り組むことができそうです。