Pull to refresh

Создание своего Quasar App Extension

Level of difficultyMedium

Создание расширения используя Quasar CLI

Для создания через CLI можно воспользоваться стандартным конструктором quasar:

npm init quasar
  1. Выбрать Quasar UI kit

  2. Затем Quasar v2 (Vue 3 | latest and greatest)

  3. После чего выбрать Vue component & Quasar App Extension.

По-умолчанию Quasar Extension создает скрипты на yarn, поэтому где надо меняем на npm.

Выполняем команды для установки всех зависимостей проекта ui:

cd ui
npm i
Команда npm run dev запускает сервер UI
Команда npm run dev запускает сервер UI

Внутри директории app-extension можно сделать проверку на используемые в расширении библиотеки, систему сборки (vite, webpack) и расширить как угодно итоговый quasar.config.js.

Пример файла install.js
Пример файла install.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. Я так же добавил простой компонент, чтобы воспользоваться которым, достаточно просто определить его в верстке.

Документация по созданию расширения

Tags:
Hubs:
You can’t comment this publication because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author’s username will be hidden by an alias.