aircolor memolog

Web制作・テクノロジー、たまに旅行記

Laravel 5.7: VueJS 開発環境を構築する

仕事でLaravel PHPを使えそうだったのでようやっと学習を開始した。 このフレームワーク、学習コストが低いと言われているけど、フルスタックフレームワークなだけあって覚えることはかなり多い。
この記事ではlaravel/installerにデフォルトでセットアップされているVueJS 諸々を使えるようにするための手順を、備忘録がてら紹介します。

開発環境

  • MacOS 10.12.6
  • Laravel Installer 1.1
  • Laravel PHP: 5.7

構築するために必要な手順

  1. Laravel installerセットアップ
  2. プロジェクト作成
  3. テンプレート書き換え
  4. 開発コマンド実行・確認

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が不要な場合は、別途削除すればよい。

参考