Интегрирование Vue.js с фреймворком CakePHP
CakePHP – отличный фреймворк для быстрого создания веб-приложений. Но каждое приложение требует интерактивности, и часто это нужно делать без загрузки или обновления всей веб-страницы. Множество JavaScript – библиотек и фреймворков, таких как Vue, React и многие другие, что упрощает добавление интерактивности в ваше приложение.
При этом Vue или React могут упростить создание внешнего интерфейса, но не могут заменить его. Поэтому очень важно правильно интегрировать как интерфейс, так и серверную часть.
Хотя интегрировать современные JS-фреймворки (Vue или React) с CakePHP действительно просто, нет руководства или ресурса, которые точно рассказывали бы, как это должно быть сделано.
Я пытаюсь ответить на их вопрос о том, как интегрировать Vue.js с CakePHP. Пока я сосредотачиваюсь на Vue.js как на интерфейсе, общая концепция будет такой же для React, Svelte или любых других интерфейсных фреймворков.
Установка
- Сначала создадим новый проект CakePHP через composer :
composer create-project --prefer-dist cakephp/app:~4.0 cakephp-vuejs-app
- Теперь установите плагин AssetMix :
composer require ishanvyas22/asset-mix
Этот плагин помогает нам легко интегрировать Laravel Mix с фреймворком CakePHP. Он возьмет на себя всю тяжелую работу, чтобы мы могли сосредоточиться на создании приложения с Vue.js и CakePHP.
Конфигурация
- Загрузите плагин, используя команду ниже:
bin/cake plugin load AssetMix
- Сгенерируйте каркасы Vue.js:
bin/cake asset_mix generate --dir=resources
- Установите интерфейсные зависимости:
Используя npm :
npm install
или
Используя yarn :
yarn install
- Скомпилируйте свои активы:
npm run dev
5. Добавьте строку ниже в метод src/View/AppView.php
файла initialize()
:
$this->loadHelper('AssetMix.AssetMix');
Теперь мы готовы использовать Vue.js с CakePHP.
После того, как вы загрузили AssetMix
, помощник имеет доступ к script()
, css()
и т.д. Все это метод, которые вы можете использовать, чтобы вызвать ваши скомпилированные активы.
Чтобы включить app.js
файл, который вы только что скомпилировали, добавьте в свой файл templates/layout/default.php
приведенный ниже код :
$this->AssetMix->script('app')
Теперь создайте файл представления templates/Pages/greet.php
чтобы вызвать компонент Vue, чтобы увидеть его в действии. Добавьте ниже код внутри этого файла:
<div id="app">
<h1>Greetings</h1>
<app-greet></app-greet>
</div>
Теперь запустите команду bin/cake server
, чтобы быстро запустить сервер разработки, и перейдите по URL-адресу чтобы увидеть результат. Вы увидите текст, напечатанный на странице.
Теперь, чтобы изменить текст, отредактируйте файл resources/js/components/AppGreet.vue
:
<template>
<div>Welcome to CakePHP + Vue.js world!</div>
</template>
Запустите npm run dev
, чтобы скомпилировать активы, или вы также можете запустить npm run watch
, который будет следить за изменениями внутри каталога ресурсов и автоматически скомпилирует активы. Теперь перезагрузите страницу http: // localhost: 8765 / pages / greet еще раз, чтобы увидеть результат.