LoginSignup
2

More than 5 years have passed since last update.

LaravelとVue.jsを使って開発するための初期設定

Last updated at Posted at 2018-12-07

LaravelとVue.jsを使ってプロジェクトを作成してみる

どちらも便利なフレームワークなんだけど、共存させたらどの程度便利なのか、それとも不便になるところがあるのかを確認してみたいと思ったので、便利だったときのために、その手順をメモ。

Laravelでプロジェクトを作成

laravel-install.sh
$ composer create-project "laravel/laravel" laravel-vue

Vue.jsのインストール

最近のLaravelには、最初からVue.jsがpackage.jsonに入っているので、インストールは下記コマンドだけ。

vue.js-install.sh
$ cd laravel-vue
$ cat package.json | grep vue
        "vue": "^2.5.17"
$ npm install

Vue.jsのコンポーネントの準備

vue.js-preparation.sh
$ npm run dev
$ ls public/js/app.js
$ ls public/css/app.css

assetの監視設定

これをしておくことで、assetを変更すると自動的にコンパイルしてくれるようになる。
ただし、動き続けるので、ターミナルは1つ犠牲に・・・

watch-script.sh
$ npm run watch

Bladeテンプレートの修正

  • welcome.blade.php
    1. <head>内
      • <meta name="csrf-token" content="{{ csrf_token() }}">
      • <link rel="stylesheet" href="{{ mix('/css/app.css') }}">
    2. <body>内
      • <div id="app"> <example-component></example-component> </div>
    3. <body>最終行
      • <script src=" {{ mix('js/app.js') }} "></script> ※ Laravelをディレクトリー配下に設置する場合は、mix()だとおかしなことになるので、その場合は、asset()を使う。

Laravelのデバッグ用のサーバーを起動

ローカルサーバーを立ち上げる。
ただし、動き続けるので、ターミナルは、もう1つ犠牲に・・・

start-server.sh
$ php artisan serve

Vue.js関連ファイル

  • JS
    resources/js/
  • SASS
    resources/sass/

最後に

色々書いたものの、ターミナルを2つも占有してしまう(npm run watch/php artisan server)ことを考えると、Dockerで専用の環境を提供した方がいろいろ良さそうな気がしてきた・・・

変更履歴

  • 2018/12/12: mix()の問題を見つけたのでコメントを追加。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2