🌊

WindowsでLaravel9+Vue3+Pug+TailwindCSSの環境を作る

2022/04/08に公開

Laravel

経緯

最新のLaravel9+Vue3での開発に慣れたいと思い、環境を作ってみることにしました。

動作環境

OS:Windows10
シェル: PowerShell

環境構築

PHPのインストール

Laravel9はPHP8.0以上が必要なので、PHP8.1をインストールします。
といってもWindowsのPHPはインストーラとかはないので、Program FilesフォルダにPHP公式からダウンロードしたファイルを保存して、パスを設定するだけです。

PHPのダウンロード

PHP 8.1 Windowsダウンロードページを開いて、VS16 x64 Thread SafeのZipをダウンロードしてください。

Program Filesに保存

ダウンロードしたZipファイルを解凍してProgram Filesフォルダに保存します。
フォルダ名はバージョンがわかりやすいようにphp-8.1.4にします。

※Program Filesフォルダにインストールしているプログラムが少ないですが、Windows Sandboxを使っているためです

環境変数設定

Windowsの環境変数 Pathに先程保存したフォルダパスを追加してください。

インストール確認

Powershellでphp -vコマンドを叩いてバージョンを確認します。
バージョンが出ればOKです。

PS C:\Users\WDAGUtilityAccount> php -v
PHP 8.1.4 (cli) (built: Mar 16 2022 09:33:31) (ZTS Visual C++ 2019 x64)
Copyright (c) The PHP Group
Zend Engine v4.1.4, Copyright (c) Zend Technologies

より詳細な手順を知りたい方は下記を参考にしてください。

Composerのインストール

LaravelはComposer経由でインストールするので、Composerをインストールします。

インストール

ここからWindows Installerをダウンロードします。

ダウンロードしたインストーラを実行すれば、そのままインストールできます。
プロキシなどの設定は割愛しますので、必要な方は検索してください。

インストール確認

Powershellでcomposer -Vコマンドを叩いて
Composerのバージョンが確認できればOKです。

PS C:\Users\WDAGUtilityAccount> composer -V
Composer version 2.3.4 2022-04-07 21:16:35

node.jsのインストール

Vue,pug,tailwindcssはnpmでインストールしますのでnode.jsをインストールします。

インストール

ここのWindows Installer(.msi)をダウンロードします。
特に理由も無ければLTSでいいでしょう。

ダウンロードしたインストーラを起動してインストールします。

インストール確認

Powershellでnode -vコマンドを叩いて
node.jsのバージョンが確認できればOKです。

PS C:\Users\WDAGUtilityAccount> node -v
v16.14.2

これで環境構築は終わりになります。
次からLaravelプロジェクトの作成からVue環境の構築, pug, tailwindcss準備まで行います。

ここでちょっとコーヒーでも飲んで休憩しましょう（笑）

プロジェクト作成

PHP.iniの設定

phpをインストールしたフォルダを開き、現在あるphp.iniを
_php.iniにリネームして退避させ、
php.ini-developementをphp.iniにリネームします。

リネームしたphp.iniファイルを開き、必要なエクステンション,ディレクトリ設定の
リマークを解除します。

ディレクトリ設定

; Directory in which the loadable extensions (modules) reside.
; https://php.net/extension-dir
;extension_dir = "./"
; On windows:
;extension_dir = "ext"

↓

; Directory in which the loadable extensions (modules) reside.
; https://php.net/extension-dir
;extension_dir = "./"
; On windows:
extension_dir = "ext"

curlエクステンション

;extension=curl

↓

extension=curl

fileinfoエクステンション

;extension=fileinfo

↓

extension=fileinfo

opensslエクステンション

;extension=openssl

↓

extension=openssl

Laravel Project作成

Powershellで下記のコマンドを入力すればlaravel9のプロジェクトが作成できます。

composer create-project "laravel/laravel=9.*" 【プロジェクト名】

今回は「example-app」というプロジェクト名で作りました。

PS C:\src> composer create-project "laravel/laravel=9.*" example-app
Creating a "laravel/laravel=9.*" project at "./example-app"
Installing laravel/laravel (v9.1.4)
  - Installing laravel/laravel (v9.1.4): Extracting archive
Created project in C:\src\example-app
> @php -r "file_exists('.env') || copy('.env.example', '.env');"
Loading composer repositories with package information
Updating dependencies
<省略>

プロジェクト作成には少し時間がかかりますのでお待ち下さい。
作成が完了したら、プロジェクトのフォルダに入ってphp artisan -Vコマンドで
バージョンを確認します。

PS C:\src\example-app> php artisan -V
Laravel Framework 9.7.0

これでLaravelのプロジェクト作成は完了です。

Vue3の準備

Laravelプロジェクト内のフォルダでnpm install vue --save-devを実行します。

PS C:\src\example-app> npm install vue --save-dev

実行が完了したらpackage.jsonを確認します。

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.25",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vue": "^3.2.31"
    }
}

Vue3がインストールされていることを確認できました。

動作確認

ルートフォルダ/resource/jsフォルダにComponentフォルダを作って、
下記の内容でApp.vueファイルを作成しましす。

App.vue

<template>
 <h1>Hello World Laravel9+Vue</h1>
</template>

ルートフォルダ/resource/jsフォルダにあるapp.jsを
Vueを使うように書き換えます。
慣例として、最初に実行するコンポーネントはApp.vueというコンポーネントにします。

app.js

require('./bootstrap');
import { createApp } from "vue";
import App from "./components/App.vue";

createApp(App).mount("#app");

最後に、laravelのスタートページであるwelcome.blade.phpを
Vueコンポーネントを呼び出すように書き換えます。

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>Laravel9+Vue3</title>

        <!-- Scripts -->
        <script src="{{ asset('js/app.js') }}" defer></script>
	
	<!-- Styles -->
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    </head>
    <body>
	<div id="app"></div>
    </body>
</html>

最後に、webpack設定もvueを使うように追加しておきます。

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

これでLaravel+Vueの環境が完成しました。
Vueをビルドします。

PS C:\src\example-app> npm run dev
.
.
.
Laravel Mix v6.0.43


✔ Compiled Successfully in 172ms
┌─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┬──────────┐
│                                                                                                                        File │ Size     │
├─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┼──────────┤
│                                                                                                                  /js/app.js │ 1.31 MiB │
│                                                                                                                 css/app.css │ 1 bytes  │
└─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┴──────────┘
webpack compiled successfully

ビルドが完了したので、php artisan serveでサーバーを起動して確認します。

PS C:\src\example-app> php artisan serve
Starting Laravel development server: http://127.0.0.1:8000

これでLarval+Vueは完了!

Pugの準備

npmでpugをインストールします。

まずはnpmでインストール。

PS C:\src\example-app> npm install pug pug-plain-loader --save-dev

プロジェクトのルートフォルダにあるwebpack.mix.jsに
pugを使う設定を追加します。

webpack.mix.js

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

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .webpackConfig({
        module: {
          rules: [{
            test: /\.pug$/,
            loader: 'pug-plain-loader'
          }],
        }
     })
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

設定が終わったら、App.vueをPugを使ったコードに書き換えます。

App.vue

<template lang="pug">
h1 HelloWorld Laravel9 Vue Pug
</template>

npm run buildして、php artisan serveでサーバーを起動して確認します。

pugが反映されたことが確認できました!

tailwindcssの準備

公式そのままセットアップします。

PS C:\src\example-app> npm install tailwindcss postcss autoprefixer --save-dev

コンフィグファイルを作ります。

PS C:\src\example-app> npx tailwindcss init

Created Tailwind CSS config file: tailwind.config.js

tailwindコンフィグファイルをこのように設定します。
contentの*.blade.php, *.jsは対象にならない場合は不要です。

tailwind.config.js

module.exports = {
  content: [
	'./resources/**/*.blade.php',
	'./resources/**/*.js',
	'./resources/**/*.vue',
	],
  theme: {
    extend: {},
  },
  plugins: [],
}

example-app\resources\cssフォルダにあるapp.cssに
tailwindcssのディクレティブを追加します。

app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

webpack設定でtailwindcssが生成したCSSファイルがlaravelのpublicフォルダに反映されるように設定します。

webpack.mix.js

const mix = require('laravel-mix');
// コメントは省略
mix.js('resources/js/app.js', 'public/js')
    .vue()
    .webpackConfig({
        module: {
          rules: [{
            test: /\.pug$/,
            loader: 'pug-plain-loader'
          }],
        }
     })
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss')
    ]);

最後に、App.vueファイルをtailwindcssを適用したスタイルにします。

App.vue

<template lang="pug">
.text-gray-800.text-2xl.bg-gray-300.text-center HelloWorld Laravel9 Vue Pug tailwindcss
</template>

npm run buildしてphp artisan serveで動作を確認します。

無事反映されました!

経緯

動作環境

環境構築

PHPのインストール

PHPのダウンロード

Program Filesに保存

環境変数設定

インストール確認

Composerのインストール

インストール

インストール確認

node.jsのインストール

インストール

インストール確認

プロジェクト作成

PHP.iniの設定

ディレクトリ設定

curlエクステンション

fileinfoエクステンション

opensslエクステンション

Laravel Project作成

Vue3の準備

動作確認

Pugの準備

tailwindcssの準備

Discussion