Help us understand the problem. What is going on with this article?

Laravelの開発環境にVue.jsを導入する

はじめに

Laravelの環境構築方法を書いた記事の続きで書いています。
[Laradock使用]Dockerで複数のLaravelプロジェクトを並行して開発できるよう構築する

Laravelの開発環境をDockerで構築済みである前提で、Vue.jsを導入する方法を書いていきます。

こちらの記事は↓を参考にまとめた備忘録に近い内容になってます。
Vue.js + LaravelでシンプルなSPA構築チュートリアル:概要編
Vue.js + LaravelでシンプルなSPA構築チュートリアル:Vueフロントエンド編

ゴール

Laravelの環境構築をしたときに作成されている、ExampleComponent.vueを画面に表示させる

導入の流れ

2. Dockerのworkspaceコンテナにログイン

docker-composer exec workspace bash

Laravel/uiのインストール

$ composer require laravel/ui:1.*

$ composer require laravel/uiだけ実行するとエラーとなるのでバージョン1を指定。

参考:Composer requireでエラー

laravel/ui vueインストール

$ php artisan ui vue

パッケージインストール

$ npm install

Vue Routerインストール

SPAでルーティングを書くために必要

$ npm install --save vue-router

ビルド

$ npm run dev

常に変更を反映させる方法

以下のコマンドを実行していれば、Vueファイルを変更したら即時にビルドされる。
開発中はこちらのコマンドを実行しておくのがオススメ。

$ npm run watch-poll

.gitigonoreに追加

コンパイルして出力されるディレクトリのためgit管理不要

/public/js
/public/css

routes/web.phpファイルを修正

最初のリクエストをLaravel側で受け取るようルーティングを変更。
すでに書かれているルーティングの記述は消す。

Route::get(‘/{any}’, function () {
        *return* view(‘app’);
})->where(‘any’, ‘.*’);

最初のリクエストで表示されるbladeファイルを作成。

resources/views/app.blade.phpを作成する。

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- CSRF Token -->
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>{{ config('app.name', 'Vue Laravel SPA') }}</title>

  <!-- Styles -->
  <link href="{{ mix('/css/app.css') }}" rel="stylesheet">
</head>

<body>
  <div id="app">
    <example-component></example-component>
  </div>
  <!-- Scripts -->
  <script src="{{ mix('/js/app.js') }}" defer></script>
</body>

</html>

http://localhost:80
にアクセスして以下のようにbootstrapが効いて画面表示されていれば導入完了!

image.png

MasanoriOgw
▶︎新卒でSIer入社 ▶︎2年半後、会社員に絶望しフリーランスへ ▶︎Javaの常駐フリーランスで働くも仕事内容に満足できない日々 ▶︎Web系プログラミングの勉強を始める 未経験からPHP,Vue.js,WordPress,React案件を受注 ▶︎2019年12月〜夫婦二人で2ヶ月間セブ生活 ▶︎現在は兵庫を拠点にしつつ、夫婦で日本や世界を旅しながら仕事をしています。
https://masanoriblog.org/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした