Команды разработки и сборки

Quasar CLI является основным инструментом для управления проектами на базе Quasar Framework. Установка осуществляется через npm:

npm install -g @quasar/cli

После установки доступна команда quasar, которая обеспечивает управление проектом, запуск разработки, сборку и деплой. Проверка версии производится командой:

quasar -v

Для инициализации нового проекта используется:

quasar create <имя_проекта>

CLI предложит выбрать предустановки, включая поддержку TypeScript, ESLint, Vuex и другие. Все настройки сохраняются в файле quasar.config.js.

Структура команд

Quasar CLI поддерживает несколько ключевых команд, разделённых по этапам жизненного цикла проекта:

  1. Разработка

    • quasar dev: запуск локального сервера разработки с горячей перезагрузкой. Поддерживает платформу веб, а также мобильные и десктопные приложения через Cordova и Electron.

    • Параметры команды:

      quasar dev -m <платформа>

      где <платформа> может быть spa, pwa, cordova, capacitor, electron.

  2. Сборка

    • quasar build: создание оптимизированной версии приложения для указанной платформы.

    • Ключи команды:

      quasar build -m <платформа> -T <цель>

      где -T указывает на цель, например, android для Cordova или mac для Electron.

  3. Линтинг и тестирование

    • quasar lint: проверка кода на соответствие правилам ESLint.
    • quasar test: интеграция с тестовыми фреймворками для автоматизированного тестирования.

Особенности работы команд разработки

Горячая перезагрузка (Hot Reload) Команда quasar dev отслеживает изменения файлов .vue, .js и .scss, мгновенно обновляя отображение в браузере или эмуляторе. Это сокращает время разработки и упрощает отладку.

Выбор платформы Quasar позволяет запускать одну и ту же команду для различных платформ. Например, запуск для PWA и Electron отличается лишь параметром:

quasar dev -m pwa
quasar dev -m electron

Конфигурация среды Все параметры сборки и разработки управляются через quasar.config.js, включая:

  • пути к исходным файлам и ассетам;
  • настройки Webpack;
  • параметры PWA и мобильных платформ.

Оптимизация сборки

Минификация и Tree Shaking quasar build автоматически минифицирует код и удаляет неиспользуемые модули. В сочетании с Lazy Loading компонентов можно существенно сократить размер бандла.

Кэширование и Service Worker Для PWA можно включить кэширование статических ресурсов через Service Worker. Настройка производится в блоке pwa конфигурации:

pwa: {
  workboxPluginMode: 'GenerateSW',
  workboxOptions: {},
  manifest: { ... }
}

Разделение кода (Code Splitting) Quasar поддерживает динамическую загрузку компонентов через import(), что позволяет разбивать приложение на чанки и загружать только необходимое.

Интеграция с мобильными и десктопными платформами

  • Cordova / Capacitor: команды quasar dev -m cordova или quasar build -m capacitor обеспечивают запуск приложения на реальных устройствах и эмуляторах.
  • Electron: quasar dev -m electron запускает десктопное приложение с поддержкой горячей перезагрузки и дебагом через DevTools.

Дополнительно можно указать цель сборки, например, для Windows или macOS:

quasar build -m electron -T win

Управление средами и переменными

Quasar поддерживает переменные окружения через файлы .env. Можно создавать отдельные файлы для разных конфигураций, например:

  • .env.development — для локальной разработки.
  • .env.production — для сборки релизной версии.

Доступ к переменным осуществляется через объект process.env:

const apiUrl = process.env.API_URL;

Автоматизация команд

Quasar CLI позволяет комбинировать команды через npm-скрипты. Например, для быстрого запуска разработки PWA можно добавить в package.json:

"scripts": {
  "dev:pwa": "quasar dev -m pwa",
  "build:pwa": "quasar build -m pwa"
}

Это упрощает управление проектом и интеграцию с CI/CD.

Оглавление