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

35573 ワード
Laravel Pug Vue.js Tailwind CSS tech テキストリンク

経緯

最新の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

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

https://webkaru.net/php/windows-php-confirmation/

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の準備

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

https://tailwindcss.com/docs/guides/laravel 
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で動作を確認します。

無事反映されました!

自宅にKnowledgeを設定した
ALDS 1_7_A のC++のコードを解読しRustで再実装する