PHPフレームワーク Laravel実践開発 5章 メモ

Chapter 5 フロントエンドとの連携

5-1 Vue.jsを利用する

• Laravel 6.x系だと、Vue.js は規定で設定されていない。インストールする必要がある
• 参考
  • https://noumenon-th.net/programming/2020/02/09/laravel-6-vue-js/
  • https://readouble.com/laravel/6.x/ja/frontend.html
  • vagrant@homestead:~/laravel_app$ composer require laravel/ui:^1.0 --dev
  • vagrant@homestead:~/laravel_app$ npm install --no-bin-links
  • package.json 書き換える。
  • vagrant@homestead:~/laravel_app$ npm run dev
  • Vueインストール
  • vagrant@homestead:~/laravel_app$ php artisan ui vue
  • vagrant@homestead:~/laravel_app$ npm install --no-bin-links
  • vagrant@homestead:~/laravel_app$ npm run dev
• 以降、.js や .vue を変更したら、npm run dev を実行する必要がある
  • ファイル変更を検知してビルドするときは
    • npm run watch-poll (Windowsの場合は?)
• package.json確認
• 基本的なVue利用
• Component作成とaxios利用

5-2 Reactの利用

• Reactインストール
  • https://readouble.com/laravel/6.x/ja/frontend.html
  • Reactインストール
  • vagrant@homestead:~/laravel_app$ php artisan ui react
  • https://readouble.com/laravel/6.x/ja/frontend.html
  • vagrant@homestead:~/laravel_app$ composer require laravel/ui:^1.0 --dev
  • vagrant@homestead:~/laravel_app$ npm install --no-bin-links
  • package.json 書き換える。
  • vagrant@homestead:~/laravel_app$ npm run dev
  • vagrant@homestead:~/laravel_app$ php artisan ui vue
• package.json確認
• 基本的なReact利用
• Component作成とaxios利用

5-3 Angurlarの利用

• Skipped