本番環境では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 を作る。
<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 を認識させる。
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 を作成する。
.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;
}