本日はPHPフレームワークのLaravelと、JavaScriptフレームワークのVue.jsを組み合わせたチュートリアルを紹介していきます。
環境
- PHP v7.2.8
- Node.js v8.11.3
- npm v5.6.0
- Laravel v5.5.42
- Vue.js v2.5.7
Laravelのインストール
まずはLaravelのインストールを行っていきます。
→ Laravelについて詳しく知る
Vue.jsのインストール
Laravelでは最初からpackage.jsonにVue.jsで使用する一通りのパッケージが記載されているので、npm installだけでインストールを行うことができます。
インストール後、npm run devを叩くことでassetファイルのコンパイルを行います。
コンパイルが完了すると、public以下の各ディレクトリへ出力されます。
また、npm run watchを走らせておくことで、ファイルが変更される度に自動でコンパイルを行うようになります。
これがないとファイル変更後、毎回npm run devを叩く必要が出てきてしまうので、開発時は必ず走らせておくようにしましょう。
Laravel × Vue.js チュートリアル
Exampleを使ってみる
Vue.jsではデフォルトでExampleComponentというコンポーネントが用意されています。
HelloWorldを行う前に、まずはこちらの呼び出しを試してみましょう。
Viewファイルの編集後、http://localhost:8000へアクセスするとコンポーネントが呼び出されているのが確認できると思います。
Vue.js呼び出しのルール
- app.jsを読み込む（<script src=”{{ mix(‘js/app.js’) }}”></script>）
- <div id=”app”></div>で囲む
- <コンポーネント名></コンポーネント名>で呼び出し
HelloWorldをやってみる
続いてオリジナルのコンポーネントとして、HelloWorldComponentを作成して呼び出すところまでを行っていきます。
コンポーネント追加手順まとめ
- コンポーネントファイルを作成
- resources/assets/js/app.js へコンポーネントの定義を追記
- Viewファイルで呼び出し
以上で Laravel × Vue.js のHelloWorldまでが完了です。
これで自由にコンポーネントを追加して、Viewを整えていくことができます。
次回以降で vue-router ライブラリを使って、サーバーサイドとの連携までご紹介していこうと思います。