Интегрирование Vue.js с фреймворком CakePHP

CakePHP – отличный фреймворк для быстрого создания веб-приложений. Но каждое приложение требует интерактивности, и часто это нужно делать без загрузки или обновления всей веб-страницы. Множество JavaScript – библиотек и фреймворков, таких как Vue, React и многие другие, что упрощает добавление интерактивности в ваше приложение.

При этом Vue или React могут упростить создание внешнего интерфейса, но не могут заменить его. Поэтому очень важно правильно интегрировать как интерфейс, так и серверную часть.

Хотя интегрировать современные JS-фреймворки (Vue или React) с CakePHP действительно просто, нет руководства или ресурса, которые точно рассказывали бы, как это должно быть сделано.

Я пытаюсь ответить на их вопрос о том, как интегрировать Vue.js с CakePHP. Пока я сосредотачиваюсь на Vue.js как на интерфейсе, общая концепция будет такой же для React, Svelte или любых других интерфейсных фреймворков.

Установка

  1. Сначала создадим новый проект CakePHP через composer :
composer create-project --prefer-dist cakephp/app:~4.0 cakephp-vuejs-app
  1. Теперь установите плагин AssetMix :
composer require ishanvyas22/asset-mix

Этот плагин помогает нам легко интегрировать Laravel Mix с фреймворком CakePHP. Он возьмет на себя всю тяжелую работу, чтобы мы могли сосредоточиться на создании приложения с Vue.js и CakePHP.

Конфигурация

  1. Загрузите плагин, используя команду ниже:
bin/cake plugin load AssetMix
  1. Сгенерируйте каркасы Vue.js:
bin/cake asset_mix generate --dir=resources
  1. Установите интерфейсные зависимости:

Используя npm :

npm install

или

Используя yarn :

yarn install
  1. Скомпилируйте свои активы:
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 еще раз, чтобы увидеть результат.

Ответить