Lumen8にLeravel Mixを使ってVue3の開発環境を作成する(その1)

Table of Content

はじめに

LumenとVue3の開発環境を作る試みです。ビルドツールはLaravel Mixを使用します。

LaravelだとLaravel Mixの設定がされており、「npm install」だけで必要なnpmがインストールされます。しかし、LumenはLaravel Mixが設定されていないので、自力でnpmをインストールしなければなりません。

本記事ではLumenでLaravel Mixをインストールし、Vueの構築ができるところまで設定していきます。

ソフトウェア バージョン
PHP 7.4.13
composer 2.0.8
node v12.20.2
npm 6.14.11

Lumenのインストール

まずは、composerでLumenのインストールを行います。

composer create-project --prefer-dist laravel/lumen .

Laravel Mixの構築

Laravel Mixのインストール

npmコマンドでlaravel-mixをインストールします。

npm init -y
npm install laravel-mix --save-dev

「.gitignore」で「./node_modules」を加えておきます。

/vendor
/.idea
Homestead.json
Homestead.yaml
.env
.phpunit.result.cache
/node_modules

webpack.mix.jsの定義

Laravel Mixの定義ファイルである「./webpack.mix.js」を作成します。

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

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

デプロイ

「./resources/js/app.js」を作成します。

alert('Hello World');

「./resources/sass/app.scss」を作成します。

$primary: red;

body {
    color: $primary;
};

npxコマンドでデプロイします。

npx mix

次の様なメッセージが表示されnpmの追加を促されます。

Additional dependencies must be installed. This will only take a moment.
Running: npm install sass-loader@8.* sass resolve-url-loader@^3.1.2 postcss@^8.1 --save-dev --legacy-peer-deps

メッセージに従ってインストールを行います。

npm install sass-loader@8.* sass resolve-url-loader@^3.1.2 postcss@^8.1 --save-dev --legacy-peer-deps

ここまでのpackage.jsonは次の通りとなります。

"devDependencies": {
  "laravel-mix": "^6.0.11",
  "postcss": "^8.2.6",
  "resolve-url-loader": "^3.1.2",
  "sass": "^1.32.8",
  "sass-loader": "^8.0.2"
}

再度npxコマンドでデプロイを行います。

npx mix

次の様なメッセージが表示されればデプロイは終了です。

webpack compiled successfully

ファイル修正後に「npx mix」を実行するのは手間です。関連ファイルを監視して、変更を感知して自動的にデプロイしたい場合は、「npx mix watch」コマンドで行います。

プロダクション環境へのデプロイを行いたい場合は、次の通りのコマンドとなります。

npx mix --production

ビューの作成と表示

「./resources/views/welcome.blade.php」を作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Lumen</title>
    <link rel="stylesheet" href="css/app.css">
</head>
<body>
    <h1>Hello World</h1>
    <script src="js/app.js"></script>
</body>
</html>

「./routes/web.php」を次の様に書き換えます最後に。

$router->get('/', function () use ($router) {
    return view('welcome');
});

ブラウザでアクセスして「Hello World」のダイアログが表示されれば、Laravel Mixまでのインストールは完了です。

スクリーンショット

最後に

長くなったので、今回はここまでです。
次回にVueをインストールしていきたいと思います。