本番環境ではnode.jsを利用せず、Laravel7とVue.js使いたかった開発環境メモ。

Composerのインストール

Composer-Setup.exeをダウンロードしてインストールする。
Developer modeはチェックしない。
環境変数PATHにC:\Users\ユーザー名\AppData\Roaming\Composer\vendor\binを追加する。

Laravelインストーラーのダウンロード

composer global require laravel/installer

ひたすら待つ。
WindowsではC:\Users\ユーザー名\AppData\Roaming\Composer\vendor\laravel\installer
にダウンロードされる。

Laravelプロジェクトの作成

否応なく最新Laravelでプロジェクトを作る時は、下記のどちらか。
ひたすら待つ。

laravel new SampleProject

composer create-project --prefer-dist SampleProject

Laravelのバージョンを指定したプロジェクトを作る時。(下記は7系の最新)
予め求めているバージョンを決定している時は、バージョンを細かく指定すればいい。
バージョンは、Composer - laravel/laravelで管理されているバージョンが指定できる。

v7の最新バージョンで作りたい場合

composer create-project --prefer-dist "laravel/laravel=7.*" SampleProject

v6.12.0で作りたい場合

composer create-project --prefer-dist "laravel/laravel=6.12.0" SampleProject

--prefer-dist は、zipでダウンロードしてくるオプションなので、指定した方が早くダウンロードしてセットアップが終わるらしい。

Laravelバージョン確認

cd SampleProject
php artisan -V

で表示されるバージョンは、laravel/laravelのものではなくて、laravel/frameworkのもの。

Laravel起動を試す

cd SampleProject
php artisan serve

んで出てきたURLにアクセスすると動く。
Ctrl+Cで終了させる。

node.jsインストール

node.jsから推奨版をダウンロードしてインストールする。
次へ次へでいい。

モジュールのインストール

cd SampleProject
npm install

SampleProject/node_modules が作られる。
なんか警告でまくるけどよくわからんので放置。

vue.jsのインストール

cd SampleProject
npm install vue

コンポーネントの作成

SampleProject/resources/js/HeaderComponent.vue を作る。

HeaderComponent.vue

<template>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <h1>This is header!</h1>
      </div>
    </div>
  </div>
</template>

Viewの作成

SampleProject/resources/views/welcome.blade.php を作る。

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel</title>
    <!-- laravelmix style -->
    <meta name="csrf-token" content="{{ csrf_token() }}"> 
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
    <link rel="stylesheet" href="{{ mix('css/welcome.css') }}">
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div id="app">
     <header-component></header-component>
   </div>
    <!-- laravelmix-style -->
    <script src="{{ mix('js/app.js') }}"></script>
  </body>
</html>

app.jsの修正

SampleProject/resources/js/app.js を修正する。
HeaderComponent.vue を認識させる。

app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('header-component', require('../components/HeaderComponent.vue').default);

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

cssの追加

SampleProject/resources/sass/welcome.scss を作成する。

welcome.scss

.container {
  h1 {
    color: red;
  }
}

webpack.mix.jsの修正

SampleProject/webpack.mix.js を修正する。
作成したwelcome.scss をcssとして利用できるようにする。

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

mix.sass('resources/sass/welcome.scss', 'public/css');

npmでコンパイル

cd SampleProject
npm run dev

SampleProject/public 配下に、jsやcssが出来上がる。

prodで実施するとjsやcssがminimizeされるのとvue.jsのライセンスファイルが作られる。

npm run prod

実行

cd SampleProject
php artisan serve

vueが処理しきる前に一瞬表示されるのを防ぐ

v-cloak を利用すると防げる。

<div id="app" v-cloak>

[v-cloak] {
  display: none;
}