CakePHPにVue.jsを導入したい

はじめに

CakePHPのアプリケーションで、jQueryじゃちょっと動的ページを作成するのしんどいなってなったので、一部ページにVue.jsを導入することになりました。

CakePHP + Vue.jsの記事が全くないので(そりゃそうだ)備忘録がてらに残しておきます。

インストール

公式サイト

<script> 直接組み込み

ダウンロードページ

ボタンをクリックすると、vue.jsというファイルがダウンロードされます。
CakePHPプロジェクトに移動し、app/webroot/jsの下にコピーすれば完了です。

Vueを使いたいファイル.ctp

<?php
$this->Html->script('vue', ['inline' => false]);

としてあげればVueが使えるようになります。

CDN (プロトタイピングや学習を目的とする場合におすすめ)

Vueを使いたいファイル.ctp

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
または
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
(バージョンは公式サイト確認して都度変えてください)

と記述すればいいです。いちばんかんたん

NPM (大規模プロジェクトで利用する場合におすすめ)

ターミナル

$ cd CakePHPプロジェクトのパス
$ cd app/webroot
$ npm install --save vue

とすると、webroot直下にnode_modulesというフォルダが生成されています。
node_modules/vue/dist/の中にvue.jsファイルがあります。

ちなみに

• vue.js　→開発用
• vue.min.js →本番用
  となっているので、使い分けてください。

Vueを使いたいファイル.ctp

<?php
$this->Html->script('../node_modules/vue/dist/vue.js', ['inline' => false]);

とすればOKです。　この方法と同じようにAxiosもインストールする事ができます！