Laravelとかインストール

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

# Composerのインストール

1. [Composer-Setup.exe](https://getcomposer.org/doc/00-intro.md#installation-windows)をダウンロードしてインストールする。  
Developer modeはチェックしない。
2. 環境変数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](https://packagist.org/packages/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](https://nodejs.org/ja/)から推奨版をダウンロードしてインストールする。
次へ次へでいい。

# モジュールのインストール
```
cd SampleProject
npm install
```
SampleProject/node_modules が作られる。
なんか警告でまくるけどよくわからんので放置。

# vue.jsのインストール
```
cd SampleProject
npm install vue
```

# コンポーネントの作成
SampleProject/resources/js/HeaderComponent.vue を作る。

```html: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 を作る。

```html
<!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 を認識させる。

```js: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 を作成する。

```scss:welcome.scss
.container {
  h1 {
    color: red;
  }
}
```

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

```js
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](https://jp.vuejs.org/v2/api/#v-cloak) を利用すると防げる。

```html
<div id="app" v-cloak>
```

```css
[v-cloak] {
  display: none;
}
```