У нас на 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.
Комментарии ()