Laravelやってみる#2―Vue&Bootstap-Vueの導入

Laravel 7.x

ぬにょす(挨拶)。

表題の通りですが、PHPフレームワークであるところのLaravelを使ってみようということで、やったこと・できたこと・できなかったこと等を自分の備忘録として残していきます。

#2の今回はフロントエンドパッケージのインストールです。

スカフォールドの実行

フロントエンドパッケージとしてVue.jsを使いたいと思います。Laravelフレームワークがスカフォールドを提供しているので、インストールします。

composer require laravel/ui php artisan ui vue --auth npm i npm run dev

npm run dev コマンドによりJavaScriptやCSSがコンパイルされます。コンパイルで出力されるファイルはGit管理から外しておきたいので、.gitignore ファイルに追記します。

.gitignore
/public/css /public/js /public/mix-manifest.json

スカフォールドを実行したことにより、Login画面とRegister画面が追加されました。

その他の設定

.env

データベース関係の値をセットします。

.env
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laravue DB_USERNAME=laravue DB_PASSWORD=laravue

config/app.php

タイムゾーンとロケールを設定します。

config/app.php
// 'timezone' => 'UTC', 'timezone' => 'Asia/Tokyo', // 'locale' => 'en', 'locale' => 'ja', // 'faker_locale' => 'en_US', 'faker_locale' => 'ja_JP',

データベースマイグレーション

スカフォールドによりUIが作成されましたが、データベースは空のままです。artisanコマンドでマイグレーションを実行できますが、その前に環境固有の修正を行います。

Specified key was too long への対応

私の環境(MariaDB 10.1.44)でデータベースのエンコードにutf8mb4を指定した場合、マイグレーションを実行すると以下のようなエラーが出ます。

Illuminate\Database\QueryException : SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 767 bytes (SQL: alter table `users` add unique `users_email_unique`(`email`))

公式ドキュメントの”Index Lengths & MySQL / MariaDB”という項に対応策が記載されているので、その通りにAppServiceProvider.phpを編集します。

app/Providers/AppServiceProvider.php
<?php namespace App\Providers; use Illuminate\Support\ServiceProvider; use Illuminate\Support\Facades\Schema; // <<< 追加 class AppServiceProvider extends ServiceProvider { /** * Register any application services. * * @return void */ public function register() { // } /** * Bootstrap any application services. * * @return void */ public function boot() { Schema::defaultStringLength(191); // <<< 追加 } }

マイグレーション実行

artisanコマンドはマジ神っすね。便利すぎる。
データベースを操作するのでゲストOSにログインして実行します。

php artisan migrate

動作確認

Register画面で適当なユーザーを登録、ログイン/ログアウトができました。

Bootstrap-Vueをインストール

Bootstrap-Vueをインストールして、コンポーネントを表示してみます。

まずはパッケージをインストールします。

npm i -D bootstrap-vue

app.jsを編集します。

resources/js/app.js
window.Vue = require('vue'); // 以下の3行を追加 import { BootstrapVue, IconsPlugin } from 'bootstrap-vue' Vue.use(BootstrapVue) Vue.use(IconsPlugin)

app.scssを編集します。

resources/sass/app.scss
// Fonts @import url('https://fonts.googleapis.com/css?family=Nunito'); // Variables @import 'variables'; // Bootstrap @import '~bootstrap/scss/bootstrap'; @import '~bootstrap-vue/src/index.scss'; // <<< 追加

home.blade.phpを編集して、Bootstrap-Vueが提供するコンポーネントを使ってみます。

resources/views/home.blade.php
<!-- You are logged in! --> <b-alert variant="success" show="">You are logged in!</b-alert>

動作確認

Alertコンポーネントが表示されました。

次回は

Hot Module ReplacementやBrowser Syncなどのビルド環境を整備します。

コメント

タイトルとURLをコピーしました