【自分用備忘録】LaravelとVue.jsで作成したコードの追い方

一般的に、LaravelとVue.jsで構成されたWebサイトのコードディレクトリ構成を教えてください。

LaravelとVue.jsを組み合わせたWebサイトの場合、一般的なコードディレクトリ構成は以下のようになります。

- app/
  - Http/
    - Controllers/
    - Models/
  - Providers/
- resources/
  - js/
    - components/
    - views/
- routes/
- database/
- public/

// ホーム画面に遷移したときはこんな感じ
Route::get('/', 'HomeController@index');

// ログインするときはこんな感じ
Route::post('/login', 'Auth\LoginController@login');

// どっかで参照できるnameなるものも付けられるらしい
Route::post('/login', 'Auth\LoginController@login')->name('login');

// middlewareなるものを使うときはこういう書き方をするっぽい
Route::middleware('middleware')->group(function () {
    Route::get('/', 'HomeController@index');
});

Route::get('/', 'HomeController@index');

public function index()
{
    return view('home.index');
}

public function index()
{
   $variable = 'こんな感じで変数を入れてあげる';
    return view('home.index')
        ->with([
            'variable'=> $variable
        ]);
}

@extends('layouts.layout')

@section('head')
@endsection

@section('title') ホーム画面 @endsection

@section('content')
    <div class="home-container">
        <home-title :title="Hello, World"></home-title>
    </div>
@endsection

page('/', () => {
  import(/* webpackChunkName: "home" */ './Home').then(
    ({ Home }) => {
      return new Home();
    },
  );
});

import Vue from 'vue';
import HomeTitleComponent from '../components/HomeTitle.vue';

class Home {
  constructor() {
    const app = new Vue({
      el: '#app',
      components: {
        'home-title': HomeTitleComponent,
      },
    });
    app.$mount('#app');
  }
}

export { Home, Vue };