Larvel+vue.jsで管理画面を作成します。
デザイン知識が乏しいのでCoreUIのFree版でUIをサクッと作ってみる。

CoreUIとは

そもそもCoreUIとは、VueとBootstrapで作られた管理画面UIのフレームワークです。
Free版でも十分な部品がありますが、有料のProにすると毎回作るのが面倒なカレンダーやdatepickerなどの部品やプレミアムサポートもついてます。
ライセンスはMIT
https://coreui.io/index.html

Laravelをインストール

公式ガイド通りにインストールします。

Laravel:5.6
vue:2.5.7（Laraelに付属しているバージョン）

http://localhost でwelcomeページが出ることを確認

SPA用のviewを作成

resources/views/app.blade.php を新規作成します。

app.blade.php

<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>{{ config('app.name', '管理画面') }}</title>

        <link rel="stylesheet" href="{{ mix('css/app.css') }}"></script>

        <script>
            window.Laravel = {
                csrfToken: "{{ csrf_token() }}"
            };
        </script>
    </head>
    <body>
        <div id="app">
            <div class="container">
                <router-view></router-view>
            </div>
        </div>
    </body>
    <script src="{{ mix('js/app.js') }}"></script>
</html>

webの向き先をSPAにする

/routes/web.phpを下記に書き換える。

web.php

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

これにより全てのwebアクセスがapp.blade.phpに向きます。

エイリアス設定

webpack.mix.js

mix.webpackConfig({
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': __dirname + '/resources/assets/js'
    }
  },
})

CoreUIを乗せる

CoreUIのVue Versionからgit cloneもしくはダウンロードします。
- https://github.com/mrholek/CoreUI-Vue
ダウンロードすると下記ディレクトリ構成になっているので、 Vue_Full_Project を使用します。

 CoreUI-Vue/
├── Vue_Full_Project/
├── Vue_Starter/

CoreUIのVue_Full_ProjectからLaravelのディレクトリへソースをコピーします。

CoreUI	Laravel
Vue_Full_Project/src/*	resources/assets/js/.
Vue_Full_Project/scss/*	resources/assets/sass/.
Vue_Full_Project/static/*	resources/assets/static (新規作成)

resources/assets/js/app.jsを削除して、同ディレクトリにあるmain.jsをapp.jsにリネームします。
app.jsのimportファイル名を変更します。

app.js

 import App from './Main'

resources/assets/js/App.vueをMain.vueにリネームします。
resources/assets/js/Main.vue内のscssディレクトリ名をsassに変更します。

Main.vue


<style lang="sass">
  // Import Main styles for this application
  @import '../sass/style';
</style>

resources/sass/core/_variables.scss内のimageパスを変更します。

_variables.scss

$navbar-brand-logo:                   url('../static/img/logo.png') !default;

$navbar-brand-minimized-logo:         url('../static/img/logo-symbol.png') !default;

npmでモジュールインストール

Laravelのプロジェクトにpackage.jsonがあるのでnode_moduleをインストール

npm install

routingはjs側で行うのでvue-routerやCoreUIに必要なモジュールをインストール

npm install bootstrap-vue --save
npm install vue-chartjs --save
npm install vue-router --save
npm install chart.js --save
npm install vue-loader --save
npm install css-loader --save
npm install flag-icon-css --save
npm install font-awesome --save
npm install simple-line-icons --save

動作確認

composer dump-autoload

npm run watch

Laravel+vueにCoreUIを乗せて管理画面を作る