Структура проекта с Vuetify

Установка и настройка

Проект на Vue.js с использованием Vuetify обычно начинается с инициализации через Vue CLI. Команда vue create <project-name> создаёт базовую структуру проекта. После этого подключение Vuetify выполняется с помощью команды:

vue add vuetify

Эта команда автоматически интегрирует Vuetify в проект, создавая необходимые файлы конфигурации и добавляя зависимости в package.json. При установке доступен выбор между предустановленным шаблоном (Default) и минимальной конфигурацией (Minimal), что влияет на структуру и набор готовых компонентов.

Директории и ключевые файлы

После установки структура проекта выглядит следующим образом:

project/
├─ node_modules/
├─ public/
│  ├─ index.html
├─ src/
│  ├─ assets/
│  ├─ components/
│  ├─ layouts/
│  ├─ pages/
│  ├─ plugins/
│  ├─ router/
│  ├─ store/
│  ├─ App.vue
│  └─ main.js
├─ package.json
├─ vue.config.js
└─ babel.config.js
  • src/assets/ — хранение статических ресурсов: изображения, шрифты, стили.
  • src/components/ — переиспользуемые Vue-компоненты, включая элементы интерфейса, созданные на Vuetify.
  • src/layouts/ — шаблоны страниц с использованием v-app, навигационных панелей и футеров.
  • src/pages/ — основные страницы приложения, обычно подключаемые через Vue Router.
  • src/plugins/ — инициализация сторонних библиотек и плагинов, включая Vuetify.
  • src/router/ — маршрутизация приложения с помощью Vue Router.
  • src/store/ — состояние приложения, управляемое через Vuex.

Инициализация Vuetify

Файл src/plugins/vuetify.js содержит конфигурацию библиотеки:

import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: '#1976D2',
        secondary: '#424242',
        accent: '#82B1FF',
        error: '#FF5252',
        info: '#2196F3',
        success: '#4CAF50',
        warning: '#FB8C00'
      },
    },
  },
});
  • theme — определяет цветовые схемы для светлой и тёмной темы.
  • Vue.use(Vuetify) — подключает Vuetify как плагин Vue, делая компоненты доступными во всех шаблонах.

Основной файл приложения

src/main.js служит точкой входа:

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app');

Ключевые моменты:

  • vuetify подключается через объект конфигурации Vue.
  • render: h => h(App) создаёт корневой компонент, содержащий весь интерфейс приложения.

Компонентная структура с Vuetify

Vuetify использует систему компонентов Material Design. Основная рекомендация — разделять UI на переиспользуемые компоненты:

  1. Молекулы и атомы — базовые элементы (v-btn, v-text-field, v-icon), хранятся в components/ui/.
  2. Организмы — сложные блоки интерфейса (v-toolbar с меню, v-data-table с фильтрацией), хранятся в components/layout/.
  3. Страницы — собирают организмы в конкретные представления (pages/Home.vue, pages/Profile.vue).

Пример базового компонента с Vuetify:

<template>
  <v-card class="pa-4">
    <v-card-title>Пользователь</v-card-title>
    <v-card-text>
      <v-text-field label="Имя"></v-text-field>
      <v-text-field label="Email"></v-text-field>
    </v-card-text>
    <v-card-actions>
      <v-btn color="primary">Сохранить</v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>
export default {
  name: 'UserCard',
};
</script>

Организация страниц и маршрутов

Структура маршрутов обычно хранится в src/router/index.js:

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../pages/Home.vue';
import Profile from '../pages/Profile.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home },
  { path: '/profile', component: Profile },
];

const router = new VueRouter({
  mode: 'history',
  routes,
});

export default router;

Маршруты связывают компоненты страниц с URL и обеспечивают навигацию через v-toolbar и v-navigation-drawer.

Стили и темы

Vuetify поддерживает глобальные и локальные стили:

  • Глобальные стили хранятся в src/assets/styles/ и подключаются через main.js или в vuetify.js.
  • Локальные стили компонентов определяются внутри <style scoped> в .vue файлах.

Использование темы позволяет динамически менять цвета:

this.$vuetify.theme.themes.light.primary = '#FF0000';

Плагины и расширения Vuetify

Дополнительные функции интегрируются через плагины:

  • vuetify/lib/directives — подключение директив, например v-ripple.
  • vuetify/lib/components — импорт отдельных компонентов для уменьшения размера сборки.
  • Настройка через vuetify.js позволяет включать только нужные элементы, оптимизируя бандл.

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

  1. Разделение логики и представления — UI-компоненты должны содержать только визуальную часть, бизнес-логику хранить в Vuex или composables.
  2. Переиспользуемые блоки — кнопки, поля ввода, таблицы оформлять как отдельные атомарные компоненты.
  3. Единая тема — использовать Vuetify-темы для всех компонентов, чтобы обеспечить консистентный интерфейс.
  4. Модули маршрутизации и состояния — хранить в отдельных директориях, избегать загромождения main.js.

Структура проекта с Vuetify обеспечивает масштабируемость, лёгкость поддержки и высокую консистентность интерфейса благодаря строго разделённым слоям: компоненты, страницы, маршруты, состояния и стили.

Оглавление