Что такое Quasar, CLI и Vite-режим
↑ 5.3 Quasar · → Следующая
Зачем это на собесе
Quasar — основной UI-фреймворк в стеке; спрашивают, что он даёт кроме набора компонентов.
Объяснение
Quasar — фреймворк на Vue для создания SPA, SSR, PWA, мобильных (Capacitor/Cordova) и десктопных (Electron) приложений из одной кодовой базы. Включает: 70+ компонентов Material Design, CLI, сборку (Vite/webpack), утилиты, плагины, CSS-инструменты, i18n-пакеты, иконки.
npm init quasar # создание проекта (Vite-режим, TS, Pinia, Router)
npm run dev # quasar dev
quasar build # SPA сборка
quasar build -m pwa|ssr|electron|capacitor
quasar mode add ssr # добавить режим| Элемент | Что даёт |
|---|---|
| Quasar CLI | dev, build, режимы, генерация иконок, расширения |
Vite-режим (@quasar/app-vite) | быстрый dev-сервер и сборка Vite (рекомендуется); webpack-режим (@quasar/app-webpack) — legacy |
| Tree-shaking | в prod попадают только использованные компоненты (авто-импорт через плагин) |
| Плагины/утилиты | Notify, Dialog, Loading, LocalStorage, Cookies, Dark, Meta |
| Директивы | v-ripple, v-close-popup, v-touch-*, v-intersection |
| CSS | flex/grid-классы, типографика, отступы (q-pa-md), видимость (gt-sm, lt-md) |
| Расширения (AE) | готовые модули и генераторы |
Альтернативы: Vuetify (Material, компонентная библиотека), PrimeVue, Element Plus, Naive UI, Nuxt UI. Отличие Quasar: единая кодовая база для web/mobile/desktop и собственный CLI.
Установка вручную в существующий Vite-проект: плагин @quasar/vite-plugin, app.use(Quasar, { plugins: {...} }).
Нюансы и подводные камни
- Компонент Quasar подключается автоматически: не нужно ручных импортов, но убедитесь, что включён авто-импорт.
- Версия Quasar v2 работает с Vue 3; v1 — с Vue 2.
- Материал-дизайн по умолчанию: кастомный дизайн требует настройки темы.
- Режимы (SSR/Electron) имеют свои ограничения API.
Практика
- Создайте проект Quasar в Vite-режиме с TypeScript и Pinia.
- Соберите SPA и PWA, сравните вывод.
- Найдите компонент и плагин из документации для типичной задачи.
Вопросы с ответами
Что такое Quasar?
Фреймворк на Vue с UI-компонентами и инструментами сборки для SPA/SSR/PWA/мобильных/десктопных приложений из одной кодовой базы.
Vite-режим или webpack?
Vite — рекомендуется (быстрее); webpack — для унаследованных проектов.