Создание расширения используя Quasar CLI
Для создания через CLI можно воспользоваться стандартным конструктором quasar:
npm init quasarВыбрать Quasar UI kit
Затем Quasar v2 (Vue 3 | latest and greatest)
После чего выбрать Vue component & Quasar App Extension.
По-умолчанию Quasar Extension создает скрипты на yarn, поэтому где надо меняем на npm.
Выполняем команды для установки всех зависимостей проекта ui:
cd ui
npm i
Внутри директории app-extension можно сделать проверку на используемые в расширении библиотеки, систему сборки (vite, webpack) и расширить как угодно итоговый quasar.config.js.
При каждом обновлении внутри директории ui файлов на javascript и css не забывайте выполнять сборку. Сборку всего проекта можно выполнить следующей командой из директории ui:
npm run buildПодключение расширения через Quasar Ext
В основном проекте нужно добавить в package.json путь к расширению. Пока расширение не опубликовано в репозиторий npm, можно использовать файловую систему, npm позволяет это сделать следующей командой, на моем компьютере путь будет такой:
npm add --include=dev /Users/myuser/my-example/app-extension
npm add --include=dev /Users/myuser/my-example/uiУбедитесь что пакеты правильно установились в package.json.
Установка расширения
Перед установкой убедитесь, что у вас установлен пакет quazar/app-webpack.
В директории родительского проекта выполняем следующую команду, где my-example будем названием вашего расширения:
./node_modules/.bin/quasar ext invoke my-exampleЧтобы не перезапускать проект каждый раз после модификации файлов директории ui, можно добавить слежение за обновлением файлов в основном проекте в файле quasar.config.js:
devServer: {
// где "my-example" название вашего расширения
watchFiles: [
'/node_modules/quasar-app-extension-my-example/*'
]
}Удаление расширения
Для удаления используйте команду, где my-example имя загруженного расширения:
quasar ext remove my-exampleЕсли все расширения удаляются, то я рекомендую удалить заодно и файл quasar.extensions.json находящийся в корне основного проекта.
Starter Kit
Внутри Quasar CLI добавляет много лишнего, зато не читает компоненты написанные на расширении .vue. Мне это не понравилось и я решил создать свой стартовый плагин с именем quasar-app-extension-my-example. Я так же добавил простой компонент, чтобы воспользоваться которым, достаточно просто определить его в верстке.