Создание нового проекта

Для начала работы с Quasar необходимо установить глобально Quasar CLI через npm или yarn. Это позволяет создавать новые проекты и управлять конфигурацией приложений.

npm install -g @quasar/cli
# или
yarn global add @quasar/cli

После установки можно создавать новый проект командой:

quasar create имя-проекта

Процесс создания включает выбор предустановок: поддержку TypeScript, ESLint, Vue Router, Vuex, настройки стилей и тестовые фреймворки. Важно внимательно выбирать конфигурации, так как некоторые настройки трудно изменить после генерации проекта.

Структура нового проекта

Созданный проект Quasar имеет чёткую структуру:

  • /src – основной каталог исходного кода.

    • /components – переиспользуемые Vue-компоненты.
    • /layouts – шаблоны страниц, используемые в роутинге.
    • /pages – страницы приложения.
    • /boot – скрипты инициализации библиотек.
    • /store – состояние приложения при использовании Vuex.
    • /assets – статические файлы: изображения, шрифты, стили.

  • quasar.conf.js – главный конфигурационный файл Quasar, содержащий настройки сборки, плагинов, CSS и расширений.

  • package.json – зависимости и скрипты npm.

Эта структура позволяет удобно разделять логику, интерфейс и стили, а также интегрировать сторонние библиотеки.

Конфигурация проекта

Файл quasar.conf.js играет ключевую роль. Он содержит объекты и функции для настройки проекта:

  • framework – подключение компонентов Quasar, директив и плагинов. Например:
framework: {
  config: {},
  plugins: ['Notify', 'Dialog'],
  components: ['QBtn', 'QCard']
}
  • build – настройки сборки Webpack, включая оптимизацию, поддержку TypeScript и минификацию.
  • devServer – параметры локального сервера: порт, автоматическая перезагрузка, прокси.
  • animations – список подключаемых анимаций Quasar.
  • cssAddon – подключение дополнительных стилей и шрифтов.

Эти настройки позволяют гибко управлять проектом и минимизировать объём финального бандла.

Использование Boot-файлов

Boot-файлы используются для инициализации сторонних библиотек, глобальных настроек или Vue-плагинов. Каждый Boot-файл создаётся в /src/boot и регистрируется в quasar.conf.js:

boot: [
  'axios',
  'i18n'
]

Пример Boot-файла для Axios:

import { boot } from 'quasar/wrappers'
import axios from 'axios'

export default boot(({ app }) => {
  app.config.globalProperties.$axios = axios
})

Это позволяет обращаться к Axios через this.$axios внутри компонентов Vue.

Работа с Layouts и Pages

Layouts обеспечивают шаблонное оформление страниц. Один Layout может содержать шапку, боковое меню и футер. Pages подключаются через Vue Router и используют Layout:

<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>Мой заголовок</q-header>
    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

Страницы подключаются в маршрутах:

const routes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/IndexPage.vue') }
    ]
  }
]

Использование компонентов Quasar

Quasar предоставляет широкий набор компонентов: кнопки, карточки, таблицы, диалоги. Пример использования кнопки и уведомления:

<template>
  <q-btn label="Нажми меня" @click="showNotify" />
</template>

<script setup>
import { Notify } from 'quasar'

function showNotify() {
  Notify.create({
    message: 'Привет, Quasar!',
    color: 'green',
    position: 'top'
  })
}
</script>

Компоненты Quasar легко настраиваются через props, что позволяет быстро собирать сложный интерфейс.

Запуск проекта

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

quasar dev

Она запускает локальный сервер с горячей перезагрузкой, что ускоряет процесс разработки. Для сборки под продакшн:

quasar build

Quasar автоматически оптимизирует файлы, минимизирует JavaScript и CSS, генерирует необходимые HTML-шаблоны.

Интеграция с Vuex

Quasar полностью совместим с Vuex. Создание модуля состояния:

export const state = () => ({
  count: 0
})

export const mutations = {
  increment(state) {
    state.count++
  }
}

export const actions = {
  incrementAsync({ commit }) {
    setTimeout(() => commit('increment'), 1000)
  }
}

Компоненты могут получать доступ к состоянию через:

<script setup>
import { useStore } from 'vuex'
const store = useStore()
const increment = () => store.commit('increment')
</script>

Итоговая архитектура

Новый проект Quasar обеспечивает:

  • Чёткую организацию исходного кода;
  • Гибкую конфигурацию через quasar.conf.js;
  • Удобное подключение внешних библиотек через Boot-файлы;
  • Эффективное использование компонентов Quasar и Layouts;
  • Простую интеграцию с Vuex и Vue Router;
  • Оптимизированную сборку для продакшн и быструю разработку.

Это создаёт основу для масштабируемого, поддерживаемого и современного фронтенд-приложения на Vue 3 с использованием Quasar.

Оглавление