Laravel × Vue.js × Bulmaの環境構築の手順

PHP

Laravel × Vue.js × Bulmaの組み合わせが非常に使いやすかったので、プロジェクトのセットアップまでを備忘録代わりに投稿します。

 

Laravelプロジェクトを作成

ここでは、laravel-bulma_appというプロジェクトを作成します。

$ composer create-project --prefer-dist laravel/laravel laravel-bulma_app

 

 

Bulmaをインストール

// プロジェクトディレクトリに移動
$ cd laravel-bulma_app

// bulmaのみをパッケージ化する
$ npm install bulma --save

 

node_modules内にbulmaディレクトリが確認できたらOKです。webpackの仕組みがなんとなくわかったところで、すべてのモジュールをパッケージ化していきます。

// package.jsonをすべてパッケージ化する
$ npm install

 

Sassでの使用をbulmaに変更

resources/assets/sass/app.scss

bootstrapのimport先を以下のようにbulmaに変更します。

// Bulma
@import '~bulma/bulma';

 

resources/assets/js/bootstrap.js

13行目付近にある以下の部分を削除

require('bootstrap');

 

 

Vue.js・Bulmaのテンプレート側の設定

LaravelにはデフォルトでVue.jsがモジュールで組み込まれているので、インストールなどは不要です。phpファイルに<link>と<script>で定義していきます。

 

index.blade.phpの作成

新たに、index.blade.phpを作成し、以下のように定義。

// index.blade.php

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>laravel-bulma-app</title>
  <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>

<div id="app"></div>

<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

 

index.blade.phpをルーティングに登録

// welcomeをindexに変更
Route::get('/', function () {
  return view('index');
});

 

ビルドする

$ npm run watch

これで、エラーがでなかったら<div id=”app”>内でVue.jsが有効になります。エラーがでた場合は、npm run watchのログを見て対応してください。

 

Bulma製のVueコンポーネントの作成

Vue.js×bulmaのヘッダーコンポーネントの作成

Vueコンポーネントで、bulma製のヘッダーを作成してみます。(MyHeader.vueの名前は任意)

resources/assets/js/components/MyHeader.vue

<template>
  <nav class="navbar" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
          <a class="navbar-item" href="https://bulma.io">
              <img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
          </a>

          <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
              <span aria-hidden="true"></span>
              <span aria-hidden="true"></span>
              <span aria-hidden="true"></span>
          </a>
      </div>
  </nav>
</template>


<script>
  export default {
      name: "MyHeader"
  }
</script>

 

MyHeader.vueコンポーネントの登録

resources/assets/js/app.js にMyHeader.vueコンポーネントを登録する

// bootstrap読み込むと表示速度が4秒程増加
// require('./bootstrap');

window.Vue = require('vue');

let Myheader = require('./components/MyHeader.vue');

const app = new Vue({
  el: '#app',
  components:{Myheader}
});

 

ビルドする

$ npm run watch

これで、エラーがでなかったらコンポーネントが有効になります。エラーがでた場合は、npm run watchのログにそって対応してください。

 

テンプレートにコンポーネントを表示させる

MyHeader.vueをテンプレートで表示

先ほど作成した、MyHeader.vueコンポーネントをテンプレートで表示させていきます。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>laravel-bulma-app</title>
  <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>

<div id="app">
  //追加
  <Myheader></Myheader>
</div>

<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

これで、動作確認してヘッダーが表示されたら成功です。

 

コンポーネントを編集の仕方

以下のコマンド実行してからコンポーネントなど、ビルドが必要なファイルの編集を行うようにしましょう。

$ npm run watch

※ 上記のコマンドは、ビルド監視モードにできます。常にリアルタイムで変更を読み取って更新してくれます。間違っている時には、エラーを履いてくれるのでとても便利です。

 

以下の記事も合わせてご覧ください!

ロリポップにcomposerをインストールしてLaravel5.5を公開する
当ブログでも使っているロリポップで、Laravelで作ったアプリを公開しました。(2018年9月現在開発中)その時の手順を備忘録がわりに記事にします。 【環境】 MacOS Sierra 10.13 ロリポップ ス...