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/[email protected]"></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도 설치할 수 있습니다!