Яндекс.Метрика
qr-код - Как-то так стрелка - Как-то так
Экономика + ... пиктограмма - Как-то Так THIS     АКТУАЛЬНЫЕ ВЕЩИ - ПРОСТЫМИ СЛОВАМИ
Персональная помощь в решении задач экономики и WEB-разработки
+ WEB = Laravel + Vue + Inertia + Tailwind !

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

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

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

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

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

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

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

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

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

Оптимальным вариантом в данном случа является разворачивание на базе своего CMS движка такого инструмента, как Vue CLI, включающего возможности webpack (сборщика пакетов модулей) и webpack-dev-server (для серверной разработки).

На примере попробуем реализовать данную возможность по связке 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

'сборка Vue приложения в связке с CMS движком на PHP - 1

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

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

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

npm install -g @vue/cli

'сборка Vue приложения в связке с CMS движком на PHP - 2

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

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

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

vue --version

'сборка Vue приложения в связке с CMS движком на PHP - 3

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

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

'сборка Vue приложения в связке с CMS движком на PHP - 4

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

'сборка Vue приложения в связке с CMS движком на PHP - 5

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

vue create hello-world

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

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

'сборка Vue приложения в связке с CMS движком на PHP - 6

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

npm run serve

'сборка Vue приложения в связке с CMS движком на PHP - 7

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

'сборка Vue приложения в связке с CMS движком на PHP - 8

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

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

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

npm run build

'сборка Vue приложения в связке с CMS движком на PHP - 10

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

'сборка Vue приложения в связке с CMS движком на PHP - 9

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

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

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

'сборка Vue приложения в связке с CMS движком на PHP - 11

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

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

'сборка Vue приложения в связке с CMS движком на PHP - 12

Вопрос состоит теперь в том, как перенаправить при компиляции 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")

'сборка Vue приложения в связке с CMS движком на PHP - 13

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

npm install path

'сборка Vue приложения в связке с CMS движком на PHP - 14

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

'сборка Vue приложения в связке с CMS движком на PHP - 15

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

'сборка Vue приложения в связке с CMS движком на PHP - 16

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

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

npm run build

'сборка Vue приложения в связке с CMS движком на PHP - 17

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

'сборка Vue приложения в связке с CMS движком на PHP - 17_1

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

'сборка Vue приложения в связке с CMS движком на PHP - 19

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

'сборка Vue приложения в связке с CMS движком на PHP - 20

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

'сборка Vue приложения в связке с CMS движком на PHP - 21

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

Вот так, с помощью такого простого, незамысловатого способа можно расширить функциональные возможности практически любого проекта/сайта, разработанного на CMS движке PHP, используя крутой js фреймворк Vue 3.

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

Подписывайтесь на мой телеграмм канал - Мои заметки - ЭКОНОМИКА +

Если у вас есть какая-либо потребность в решении определённой задачи, связанной с экономикой, финансами или web-разработкой     telegram или форма обратной связи

Administrator
432
0
Имя
E-mail
Рейтинг
Отзыв

Конвертер валют
RUB RUB-icon
USD USD-icon
EUR EUR-icon
CNY CNY-icon
BYN BYN-icon
UAH UAH-icon
KZT KZT-icon
ЗАМЕТКИ ЭКОНОМИСТА
SHORT - о чём речь
ЭКОНОМИЧЕСКАЯ ГРАМОТНОСТЬ
РЕКОМЕНДУЮ
Хочу Всё Знать. Полезные Советы