Наилучшая практика интеграции VueJS с CakePHP 3

Я хотел бы знать, как лучше всего интегрировать Vue.JS framework внутри приложения CakePHP 3?

Я надеюсь, что есть способ извлечь выгоду из всех инструментов, идущих с VueCLI (webpack,ect..) при этом все еще работает без необходимости копировать сгенерированный файл внутри приложения CakePHP.

Итак, каков наиболее упрощенный процесс разработки приложения, использующего CakePHP 3 в качестве бэкенда и Vue.js как frontend внутри того же проекта.

Спасибо а много!

2 3
vue.js vuejs2 cakephp

2 ответа:

Хорошо, вот быстрая настройка:

1) Установите vuejs в субдире webroot (например, webroot/vuedev)

2) настройте маршрутизатор vue на использование режима истории: 

export default new Router({
  mode:'history',
  routes: [
3) Измените assetsPublicPath зоны сборки на assetsPublicPath: '', в файле webroot/vuedev/config/index.js 4) потому что в режиме dev ваше приложение работает на localhost:8080 и ваш ajax вызов your-domain.dev у вас будут проблемы с CORS. Добавьте заголовок к вашим вызовам ajax: 
axios.get(url,{headers: {"Access-Control-Allow-Origin": "*"}}).then...

Используйте a префикс " api " для ваших вызовов ajax : your-domain.xxx / api / контроллер / действие...

5) измените маршрутизацию cakePHP для использования REST api : в config / routes.php: 

// add api prefix

Router::prefix('api', function ($routes) {
    $routes->fallbacks(DashedRoute::class);
});

// change default route :

Router::scope('/', function (RouteBuilder $routes) {

    $routes->connect('/:page',['controller'=>'Pages','action'=>'display']); 

    $routes->connect('/', ['controller' => 'Pages', 'action' => 'display', 'home']);
    $routes->connect('/pages/*', ['controller' => 'Pages', 'action' => 'display']);
    $routes->fallbacks(DashedRoute::class);
});

Ajax вызывает your-domain.xxx / api / controller / action будет выполняться нормально. Каждый призывает к your-domain.com/xxx будет перенесен на страницы контроллера, отображение действий.

6) скопируйте индекс.HTML-содержимого вашего антивируса Webroot/vuedev в шаблон дома (в src/шаблона/страницы/дома.ОСАГО) и добавить в ваше действие дисплея вашего контроллера. 
$this->viewBuilder()->setLayout(false);

7) для производства : Запуск процесса строительства: 

npm run build.

Копия антивируса Webroot/vuedev/дист/статический к Webroot/статический

Скопируйте содержимое webroot / vuedev / dist / index.html к вашему src / шаблону / страницам / дому.ctp

Если кто-то вручную вызовет определенную страницу или обновит браузер (ie: your-domain.xxx / Products) ваш контроллер страниц отправит индекс.содержимое HTML. Вы можете добавить te param: page в свой шаблон / Pages / home.ОСАГО в глобальный VAR в теге сценария, который будет использоваться маршрутизатором: 

<script>var routeToJump=<?php echo $yourvar;?>; </script>

И в вашем приложении.vue: 

export default {
  name: 'App',
  created() {
    this.$router.push(routeToJump);
    ...
1

Вы не уйдете, не скопировав файлы, за исключением того, что вы не заботитесь о размере и времени загрузки. Просто бросьте все в свой webroot / js, затем загрузите все необходимые файлы в свои представления, и вы в порядке. Vue - это JS, просто JS, ничего больше. Кроме того, я не понимаю, почему совладание, которое происходит автоматически, плохо.

Приложения IMO JS-это огромный беспорядок, склеенный каким-то образом сценариями сборки.

Если вы заботитесь об оптимизированной сборке, используйте npm и webpack и настройте Webpack для сборки вашего Приложение Vue и определить свой вирус в качестве целевой папки. Webpack позволит вам автоматически разделять файлы и даст вам предупреждение, когда файл станет большим.

Мы поместили все наши интерфейсные материалы в /resources/js и / scss и так далее, построили его и включили горячую перезагрузку, чтобы мы могли видеть изменения сразу после того, как нажмем save. Это только для развития. При развертывании в нашей Live-системы на JS-это построить на живую систему, мы не добавляем каких-либо построений на наш мерзавец хранилище.

Однако "создание" приложений JS для frontend-это боль в заднице, если вы не придерживаетесь 100% чистого приложения JS frontend. Нет никакого реального стандартного способа сделать это. Даже "импорт" имеет свои причуды и больше похож на взлом, чем на хорошее решение проблемы, а также не решает проблему упаковки файлов для уменьшения запросов и размера файла.

После того, как вы склеили все дерьмо вместе, это обычно работает хорошо, но это действительно печально, что в 2018 году не рекомендуется стандарт для построения JS для веб-приложений. Я очень надеюсь, что то, как все делается сегодня, скоро умрет в пользу веб-сборки.

Если вы не хотите использовать Webpack, есть require.js и другие тоже, но для нас webpack работал лучше всего.

1