AssetMixプラグインを利用した、Vue.jsの環境構築

CakePHPで、Vue.jsを利用には、webpackを導入する場合が多いと思います。
しかしながら、webpackは、細かい環境設定が可能ですが、環境構築が大変です。

この環境構築の手間を大幅に省いてくれる便利な「AssetMixプラグイン」を利用することで、環境構築がとても簡単にできます。

このプラグインは、インストールも簡単で、導入しやすいプラグインです。

詳細については、公式サイトを参照していただければと思います。

ishanvyas22/asset-mix
Via composer
プラグインのロード
Generate basic Javascript, CSS & Sass scaffolding
assets関連のコンパイル
ヘルパー修正

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. - ishanvyas22/asset-mix

Via composer

[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

[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

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

プラグインのロード

[hoge@dev]$ bin/cake plugin load AssetMix

/home/hoge/dev/public_html/app/src/Application.php modified

[hoge@dev]$ bin/cake plugin load AssetMix

/home/hoge/dev/public_html/app/src/Application.php modified

Generate basic Javascript, CSS & Sass scaffolding

[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.

[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

[hoge@dev]$ npm install
?#####?????????????? ? idealTree:webpack-dev-server: sill fetch manifest klona@^2.0.5

1 2	[hoge@dev]$ npm install ?#####?????????????? ? idealTree:webpack-dev-server: sill fetch manifest klona@^2.0.5

npm run dev

[hoge@dev]$ npm run dev
? Compiled Successfully in 2635ms

1 2	[hoge@dev]$ npm run dev ? Compiled Successfully in 2635ms

npm run watch

[hoge@dev]$ npm run watch
? webpack compiled successfully

1 2	[hoge@dev]$ npm run watch ? webpack compiled successfully

npm run prod

[hoge@dev]$ npm run prod

1	[hoge@dev]$ npm run prod

ヘルパー修正

AssetMix
プラグインから
AppView.php
ファイルにヘルパーをロードします。

$this->loadHelper('AssetMix.AssetMix');

1	$this->loadHelper('AssetMix.AssetMix');

AssetMixプラグインを利用した、Vue.jsの環境構築

ishanvyas22/asset-mix

Via composer

プラグインのロード

Generate basic Javascript, CSS & Sass scaffolding

assets関連のコンパイル

npm install

npm run dev

npm run watch

npm run prod

ヘルパー修正

おススメ商品

Node.js超入門[第4版]

ハンズオンNode.js

実践Node.js入門―基礎・開発・運用

Node.jsデザインパターン第2版

入門Node.jsプログラミング

Node.jsフレームワーク超入門

ishanvyas22/asset-mix

Via composer

プラグインのロード

Generate basic Javascript, CSS & Sass scaffolding

assets関連のコンパイル

npm install

npm run dev

npm run watch

npm run prod

ヘルパー修正

おススメ商品

Node.js超入門[第4版]

ハンズオンNode.js

実践Node.js入門―基礎・開発・運用

Node.jsデザインパターン 第2版

入門Node.jsプログラミング

Node.jsフレームワーク超入門

Node.jsデザインパターン第2版