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もしくはダウンロードします。
-
ダウンロードすると下記ディレクトリ構成になっているので、
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