Сборка Vue приложения в связке с CMS движком или как интегрировать реактивный JS фреймворк в свой сайт

VUE – реактивный js фреймфорк, пользующийся большой популярностью при создании пользовательских интерфейсов и разработке single page applications.

Многие веб-разработчики для создания современных веб-приложений/сайтов с нуля используют именно VUE фреймворк, за счёт его простоты, скорости и динамичности в решении многих пользовательских задач.

Но вот задача !

У нас есть сайт - проект/интернет-магазин, который реализован на каком-нибудь php движке (CMS), к примеру на WordPress, OpenCart, ImageCms и т.п..Б.

Есть необходимость привязать к нему определённое приложение написанное на js с помощью Vue 3, со всеми его подходами компонентной разработки.

Т.е. проект разворачивать с нуля необходимости нет, а переносить весь функционал с php на js фреймворк сами понимаете чего стоит ..., да и зачем это надо.

Конечно, можно подключить на странице ссылку CDN фреймворка и использовать его функционал на своём сайте в таком виде, как обычную библиотеку. Но данный подход лишает возможности разрабатывать большие и расширяемые, за счёт своей компонентности, приложения на Vue.

На примере попробуем реализовать данную возможность по связке Vue фреймворка версии 3 с CMS движком ImageCms, под капотом у которого находится PHP фреймворк CodeIgniter 3.

Исходя из того что у всех популярных CMS движков сайтов схожая  файловая структура, принципы и подходы в разворачивании Vue в вашем проекте будут схожи. Необходимо просто проявить определённую смекалку, учитывая синтетические особенности своей CMS.

Итак, Let,s go !

Шаг 1 - Устанавливаем Node.js:

Node.js - среда выполнения кода JavaScript на движке V8.

В данном примере устаналивать будем на Windows (что сути не меняет) - https://nodejs.org/en

Шаг 2 - Устанавливаем Vue CLI:

Vue CLI - инструмент взаимодействия Vue с помощью командной строки операционной систмеы.

Производим установку с помощью командной строки терминала (в данном случае терминал редактора кода VS Code), предварительно удалив предыдущие версии, если они были установлены (npm uninstall vue-cli –g).

npm install -g @vue/cli

Устанавливаем глобально, о чём свидетельствует флаг –g (для возможного использования данной утилиты во всех наших проектах, при необходимости).

Наш проект/сайт kaktotak.net. Но в данном случае не важно с какой позиции в терминале (с корня или ещё какой-либо папки) будем вводить данную команду.

После чего проверим версию установленной утилиты командой:

vue --version

Шаг 3 - Создаём проект на Vue 3

До выполнения данной процедуры, перейдем в корневую паку CMS. Целесообразнее создать папку будущего Vue проекта на самом верхнем уровне, назвав её, к примеру, vue.

Заходим в эту папку с помощью нашего терминала:

И уже непосредственно в ней создаём проект, к примеру, с названием по умолчанию hello-world, командой:

vue create hello-world

При установке по умолчанию выбираем версию Vue 3 c default настройками.

Проект создан в корневой папке vue/hello-world.

Чтобы убедится в этом, в папке нашего проекта в терминале выполним команду:

npm run serve

Она запустит локальный сервер разработки по адресу http://localhost:8080, перейдя на который мы увидим наш проект.

Т.е., все файлы vue проекта установлены в указанную папку и теперь можно переходить к его разработке.

В данном виде vue функционирует только в среде dev (разработки).

Скомпилируем (соберём) наш проект и проверим что получится:

npm run build

При компиляции (сборки webpack), с помощью пакетного менеджера npm, файлы продакшен версии будут размещены в папке dist нашего проекта.

В таком виде, страницы сайта, в которые мы хотели бы интегрировать наш vue проект, доступа не получат к нему. Если это и можно сделать, то это ручная работа, с необходимостью постоянного изменения названий js и css файлов, при каждой новой компиляции.

Шаг 4: Интегрируем проект Vue 3 в структуру нашего сайта

В нашем примере необходимо получить доступ к этим production файлам, но из папки insert каталога corporate (папки templates) нашего CMS движка. Полный путь указан на скине. Целевая папка add от корня сайта.

Теперь мы создаём страницу сайта через админку движка (с которой хотим связать vue проект), указав шаблон её вывода, к примеру - page_ .tpl, в который, в свою очередь, через метод php include выведем наш целевой шаблон service.tpl (ВАЖНО ! - добавить в этот файл блок div c id="app", куда и будет монтироваться приложение Vue).

{include_tpl('insert/calculations_service_payable/572/service.tpl')}

Вопрос состоит теперь в том, как перенаправить при компиляции production версии файлы в эту папку add.

Открываем файл vue.config.js (в папке нашего vue проекта - hello-world) и подключаем необходимую библиотеку path для правильного определения vue абсолютного пути:

const path = require("path");

И добавляем свойству outputDir объекта defineConfigследующее значение:

path.resolve(__dirname,"../../templates/corporate/insert/calculations_service_payable/572/add")

Теперь в терминале заходим в папку нашего проекта (hello-world) и устанавливаем саму библиотеку с помощью команды:

npm install path

Для проверки работы Vue проекта, в компоненте HelloWorld.vue добавим в блоке <script></script> методу data ()переменную result с каким-нибудь значением и выводом её в блоке <template></template>.

Сохранив изменения, проверим работу dev версии.

Всё работает.

Компилируем наш Vue проект с помощью команды:

npm run build

Таким образом, все файлы production версии уже находятся в папке add нашего сайта.

Для того, чтобы при загрузке нашей старицы всё названия файлов и их путь прописывался в автоматическом режиме, добавим в файл библиотеки (уже самого движка (CMS)) application/libraries/lib_my.php следующий метод, через который будет решаться данная задача:

В шаблоне файла service.tpl реализуем работу этого метода следующей конструкцией:

Теперь загрузим страницу сайта к которой мы подключили Vue проект.

Как видим, всё работает. И теперь только остаётся написать само Vue приложение.

Сборка Vue приложения в связке с CMS движком или как интегрировать реактивный JS фреймворк в свой сайт - Как-то Так!