Laravel 5.7: VueJS 開発環境を構築する
仕事でLaravel PHPを使えそうだったのでようやっと学習を開始した。
このフレームワーク、学習コストが低いと言われているけど、フルスタックフレームワークなだけあって覚えることはかなり多い。
この記事ではlaravel/installer
にデフォルトでセットアップされているVueJS 諸々を使えるようにするための手順を、備忘録がてら紹介します。
開発環境
構築するために必要な手順
- Laravel installerセットアップ
- プロジェクト作成
- テンプレート書き換え
- 開発コマンド実行・確認
Laravel installerセットアップ
Composerのインストール
Composerのインストールが済んでいない場合は、以下コードをコピペして実行。
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');" php -r "if (hash_file('sha384', 'composer-setup.php') === '93b54496392c062774670ac18b134c3b3a95e5a5e5c8f1a9f115f203b75bf9a129d5daa8ba6a13e2cc8a1da0806388a8') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;" php composer-setup.php php -r "unlink('composer-setup.php');"
installerのインストール
$ composer global require "laravel/installer=~1.1"
プロジェクト作成
プロジェクト名を決めて生成。--prefer-dist
とかのオプションが気になる場合はこの記事とかを見れ。
$ composer create-project laravel/laravel {{ Project名 }} --prefer-dist
Laravelに用意されているartisan(アルチザン)コマンドを通してserve
すると
http://localhost:8000/
で開発画面が確認できる。
$ php artisan serve
VueJSなどのフロントエンド環境構築
installerを通してLaravelをインストールすると、package.jsonが付いている。ざっとインストールされているものは以下。
"devDependencies": { "axios": "^0.18", "bootstrap": "^4.0.0", "cross-env": "^5.1", "jquery": "^3.2", "laravel-mix": "^4.0.7", "lodash": "^4.17.5", "popper.js": "^1.12", "resolve-url-loader": "^2.3.1", "sass": "^1.15.2", "sass-loader": "^7.1.0", "vue": "^2.5.17", "vue-template-compiler": "^2.5.21" }
laravel-mix
がセットアップ済みなので、これをそのままinstallすれば良い感じ。
$ npm install
テンプレート書き換え
デフォルトのテンプレートだとcsrf-x-csrf-token
や、element指定がされていないのでVueが動作しない。そのため、表示させるviewのhtmlテンプレートを以下のように書き換える必要がある。
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="csrf-token" content="{{ csrf_token() }}"> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> <title>Laravel</title> </head> <body> <div id="app"> <example-component></example-component> </div> <script src="{{mix('js/app.js')}}"></script> </body> </html>
※1 試すだけならデフォルト指定されているresources/views/welcome.blade.php
を書き換えるのが手早い
※2 <example-component>
は、デフォルトで用意されているresources/js/components/ExampleComponent.vue
を参照している
開発コマンド実行・確認
Laravelの開発環境に乗っかっているので、npm run dev
でvueを起動してlocalhost:8080で開発環境を見ようとしても、以下のように表示されてしまう。
Cannot GET /
Laravelの開発コマンドartisan serve
と、package.jsonに記述されているnpm run hot
コマンドを両方実行することでhttp://localhost:8000/
が開発画面として使えるようになる。
$ php artisan serve $ npm run hot
とりあえず、これで最小構成の開発環境を作成できる。jQueryやbootstrapが不要な場合は、別途削除すればよい。