modPrimeVueExtra - заготовка для разработки с Vue / Компоненты / getTables

Решил перейти на реактивные UI фреймворки и сделал заготовку для более удобной разработки с ними, с MODX и с gtsAPI — компонент API для MODX
У нас на MODX много функционала и сразу перейти на какой-то JS фреймворк нельзя. Как и задумывалось заготовка реализует какой-то смешанный режим разработки между стандартным для Vue путем и путем компонентов MODX.
В заготовке сделан GRUD таблицы базы данных MODX.

В компоненте gtsAPI есть сниппет mixedVue и с помощью него можно вывести блок с компонентом на основе modPrimeVueExtra с любом месте сайта.

{'!mixedVue' | snippet : [
    'app'=>'modPrimeVueExtra'
]}

(только стили бутстрап и PrimeVue друг другу мешают :-()

Быстрый старт
Необходимо установленая NodeJs и VSCode.
Заготовка на гитхабе https://github.com/touol/modPrimeVueExtra
Клонирум ее к себе в папку домен_сайта_разработки/Extras/modPrimeVueExtra. Открываем папку modPrimeVueExtra редактором VSCode.
В терминале устанавливаем пакеты node

npm install

Запускаем скрипт копирования и переименования заготовки

npm run copy

Вводим новое имя пакета, например, PackageName.
В папке домен_сайта_разработки/Extras создается папка PackageName и все ссылки на modPrimeVueExtra в PackageName заменяются на PackageName.

Дальше открываем в VSCode домен_сайта_разработки/Extras/PackageName и редактируем схему базы пакета в файле домен_сайта_разработки/Extras/PackageName/_build\configs\schema.xml

В файле домен_сайта_разработки/Extras/PackageName/_build\configs\gtsapirules.js редактируем правила gtsAPI для этого пакета.

Редактируем PackageName/.env и прописываем свой VITE_APP_HOST

Запускаем скрипт получения токена для разработки

npm run get_token

Вводим логин и пароль. Полученный токен сохраняется в файле PackageName/.env

Запускаем скрипт загрузки и установки пакета в модекс

npm run upconfig

На нужной странице в модекс прописываем вызов сниппета

{'!mixedVue' | snippet : [
    'app'=>'PackageName'
]}

Для режима разработки с Vite в системных параметрах модекс меняем gtsapi_debug_mode на включенно.

Запускаем разработку с Vite

npm run dev

Теперь страница сайта автоматически изменяется при изменение кода в PackageName/src

В папке PackageName/src пишем нужный нам функционал.

После того как окончили разработку отключаем dev режим (q + enter в терминале) и запускаем

npm run build

В папке домен_сайта_разработки/core/packages появиться транспортный пакет который можно скопировать и установить на любой сайт MODX 2.x с установленых gtsAPI.

Комментарии ()