CakePHPで、Vue.jsを利用には、webpackを導入する場合が多いと思います。
しかしながら、webpackは、細かい環境設定が可能ですが、環境構築が大変です。
この環境構築の手間を大幅に省いてくれる便利な「AssetMixプラグイン」を利用することで、環境構築がとても簡単にできます。
このプラグインは、インストールも簡単で、導入しやすいプラグインです。
詳細については、公式サイトを参照していただければと思います。
ishanvyas22/asset-mix
GitHub - ishanvyas22/asset-mix: Provides helpers functions for CakePHP to use Laravel Mix.
Provides helpers functions for CakePHP to use Laravel Mix. - GitHub - ishanvyas22/asset-mix: Provides helpers functions ...
github.com
Via composer
|
1 2 3 4 5 6 7 8 9 10 11 |
[hoge@dev]$ composer require ishanvyas22/asset-mix Warning from https://repo.packagist.org: Support for Composer 1 is deprecated and some packages will not be available. You should upgrade to Composer 2. See https://blog.packagist.com/deprecating-composer-1-support/ Using version ^1.4 for ishanvyas22/asset-mix ./composer.json has been updated Loading composer repositories with package information Warning from https://repo.packagist.org: Support for Composer 1 is deprecated and some packages will not be available. You should upgrade to Composer 2. See https://blog.packagist.com/deprecating-composer-1-support/ Updating dependencies (including require-dev) Package operations: 1 install, 0 updates, 0 removals - Installing ishanvyas22/asset-mix (1.4.0): Downloading (100%) Writing lock file Generating autoload files |
プラグインのロード
|
1 2 3 |
[hoge@dev]$ bin/cake plugin load AssetMix /home/hoge/dev/public_html/app/src/Application.php modified |
Generate basic Javascript, CSS & Sass scaffolding
|
1 2 3 4 5 |
[hoge@dev]$ bin/cake asset_mix generate --dir=resources 'package.json' file created successfully. 'webpack.mix.js' file created successfully. 'resources' directory created successfully. Note: You should run "npm install && npm run dev" to compile your updated scaffolding. |
assets関連のコンパイル
npm install
|
1 2 |
[hoge@dev]$ npm install ?#####?????????????? ? idealTree:webpack-dev-server: sill fetch manifest klona@^2.0.5 |
npm run dev
|
1 2 |
[hoge@dev]$ npm run dev ? Compiled Successfully in 2635ms |
npm run watch
|
1 2 |
[hoge@dev]$ npm run watch ? webpack compiled successfully |
npm run prod
|
1 |
[hoge@dev]$ npm run prod |
ヘルパー修正
AssetMix
プラグインから
AppView.php
ファイルにヘルパーをロードします。
|
1 |
$this->loadHelper('AssetMix.AssetMix'); |
