Лучшая практика интеграции VueJS с CakePHP 3
Я хотел бы знать, какой будет наилучший способ интеграции Vue.js структура внутри приложения CakePHP 3?
Я надеюсь, что есть способ извлечь выгоду из всех инструментов, поставляемых с VueCLI (webpack и т. Д.). при этом все еще работает без необходимости копировать сгенерированный файл внутри приложения CakePHP.
Итак, каков наиболее упрощенный процесс разработки приложения с использованием CakePHP 3 в качестве серверной части и Vue.js как внешний интерфейс внутри того же проект.
Большое спасибо!
2 answers
Хорошо, вот быстрая настройка:
1) установите vuejs в дополнительный каталог webroot (например, webroot/vuedev)
2) настройте свой маршрутизатор vue для использования режима истории:
export default new Router({
mode:'history',
routes: [
3) Измените путь публикации активов зоны сборки на assetsPublicPath: '', в webroot/vuedev/config/index.js
4) Поскольку в режиме разработки ваше приложение работает на локальном хосте:8080 и ваш вызов ajax ваш-домен.dev у вас будут проблемы с CORS. Добавьте заголовок к вашим вызовам ajax :
axios.get(url,{headers: {"Access-Control-Allow-Origin": "*"}}).then...
Используйте префикс "api" для ваших вызовов ajax: ваш-домен.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 ваш-домен.xxx/api/контроллер/действие будут выполняться в обычном режиме. Каждый звонит your-domain.com/xxx будет перенесен на страницы контроллера, отображение действий.
6) Скопируйте index.html содержимое вашего веб-корня/vuedev в вашем домашнем шаблоне (src/Шаблон/Страницы/home.ctp) и добавьте к вашему отображению действие вашего контроллера.
$this->viewBuilder()->setLayout(false);
7) Для производства : Запустите процесс строительства:
npm run build.
Скопируйте webroot/vuedev/dist/static в webroot/static
Скопируйте содержимое webroot/vuedev/dist/index.html на ваш src/Шаблон/Страницы/home.ctp
Если кто-то вручную вызовет определенную страницу или обновит браузер (т.Е.: ваш домен.xxx/Продукты), контроллер ваших страниц отправит index.html содержание. Вы можете добавить те параметр: страница вашего шаблона/Страницы/home.ctp в глобальном теге var в скрипте, который будет использоваться маршрутизатором:
<script>var routeToJump=<?php echo $yourvar;?>; </script>
И в вашем приложении.vue:
export default {
name: 'App',
created() {
this.$router.push(routeToJump);
...
Вы не уйдете, не скопировав файлы, за исключением того, что вас не волнует размер и время загрузки. Просто добавьте все в свой webroot/js, затем загрузите все необходимые файлы в свои представления, и все будет в порядке. Vue - это JS, просто JS, ничего больше. Также я не понимаю, почему совладание, которое происходит автоматически, плохо.
Приложения IMO JS - это огромный беспорядок, каким-то образом склеенный сценариями сборки.
Если вам нужна оптимизированная сборка, используйте npm и webpack и настройте Webpack для сборки ваше приложение Vue и определите свой веб-каталог в качестве целевой папки. Webpack позволит вам автоматически разделять файлы и выдаст вам предупреждение, когда файл станет большим.
Мы разместили все наши интерфейсные материалы в /resources/js и /scss и так далее, создали их и включили горячую перезагрузку, чтобы мы могли видеть изменения сразу после нажатия кнопки сохранить. Это просто для развития. При развертывании в наших живых системах JS создается в живой системе, мы не добавляем никаких сборок в наш git хранилище.
Однако "создание" приложений JS для внешнего интерфейса - это заноза в заднице, если вы не придерживаетесь 100% чистого приложения JS для внешнего интерфейса. Реального стандартного способа сделать это не существует. Даже "импорт" имеет свои причуды и больше похож на взлом, чем на хорошее решение проблемы, и при этом он не решает проблему упаковки файлов для уменьшения запросов и размера файла.
Как только вы склеили все дерьмо вместе, это обычно работает хорошо, но очень печально, что в 2018 году не рекомендуется стандарт для создания JS для веб-приложений. Я действительно надеюсь, что то, как все делается сегодня, скоро умрет в пользу веб-сборки.
Если вы не хотите использовать Webpack, есть require.js и другие тоже, но для нас webpack работал лучше всего.