Ручная установка и настройка

Для начала необходимо создать проект на Vue.js, если он ещё не создан. В терминале выполняется команда:

vue create my-vuetify-app

Выбирается нужная конфигурация, включающая Babel, Router и Vuex, если требуется. После этого проект готов к ручной установке Vuetify.

Установка через npm или yarn

Vuetify устанавливается как отдельный пакет:

npm install vuetify@next
# или
yarn add vuetify@next

Важно отметить, что @next указывает на версию Vuetify для Vue 3. Для Vue 2 используется обычная версия:

npm install vuetify

После установки библиотека становится доступной в проекте для ручной конфигурации.

Подключение Vuetify в проект

Создаётся отдельный файл для конфигурации Vuetify, например, vuetify.js или vuetify.ts для TypeScript. В этом файле выполняется импорт компонентов и плагина Vuetify:

// vuetify.js
import { createVuetify } from 'vuetify'
import 'vuetify/styles' // Импорт глобальных стилей
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default createVuetify({
  components,
  directives,
  theme: {
    defaultTheme: 'light',
    themes: {
      light: {
        colors: {
          primary: '#1976D2',
          secondary: '#424242',
          accent: '#82B1FF',
          error: '#FF5252',
          info: '#2196F3',
          success: '#4CAF50',
          warning: '#FB8C00'
        }
      }
    }
  }
})

Далее Vuetify подключается в главный файл проекта main.js или main.ts:

import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './vuetify'

const app = createApp(App)
app.use(vuetify)
app.mount('#app')

Настройка тем

Vuetify позволяет создавать собственные темы с набором цветов. В объекте themes можно определять несколько тем, например, light и dark. Для каждой темы задаются цвета основных элементов: primary, secondary, accent, error, info, success, warning.

Смена темы в рантайме выполняется через $vuetify.theme.global.name:

this.$vuetify.theme.global.name = 'dark'

Для динамического изменения отдельных цветов используется API:

this.$vuetify.theme.themes.value.light.primary = '#FF5722'

Подключение шрифтов и иконок

Vuetify поддерживает Material Design Icons, Font Awesome и другие наборы. Для подключения Material Design Icons добавляется в index.html:

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">

После этого иконки становятся доступны в компонентах:

<v-btn icon>
  <v-icon>mdi-home</v-icon>
</v-btn>

Для Font Awesome используется аналогичная логика с подключением стилей и настройкой aliases в Vuetify.

Настройка локализации

Vuetify поддерживает i18n. Для подключения необходимо установить пакет:

npm install vue-i18n

И подключить в конфигурации Vuetify:

import { createI18n } from 'vue-i18n'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const i18n = createI18n({
  locale: 'ru',
  messages: {
    ru: { $vuetify: { close: 'Закрыть', dataIterator: { noResultsText: 'Совпадений не найдено' } } }
  }
})

const vuetify = createVuetify({
  components,
  directives,
  locale: {
    locale: 'ru',
    fallback: 'en',
    messages: i18n.global.messages
  }
})

export default vuetify

Глобальная регистрация компонентов

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

import { VApp, VBtn, VCard } from 'vuetify/components'

export default createVuetify({
  components: { VApp, VBtn, VCard }
})

Это снижает размер сборки и ускоряет загрузку приложения.

Настройка директив

Vuetify предоставляет директивы для работы с ripple-эффектами, тултипами и другими визуальными элементами. Они подключаются через объект directives:

import { Ripple } from 'vuetify/directives'

export default createVuetify({
  directives: { Ripple }
})

Использование директивы в шаблоне:

<v-btn v-ripple>Кнопка с эффектом</v-btn>

Оптимизация производительности

При ручной настройке можно исключать компоненты и стили, которые не используются, чтобы уменьшить размер сборки. Например, импортировать только нужные функции из vuetify/styles:

import 'vuetify/styles/components/VBtn.css'

Или использовать динамическую подгрузку компонентов через defineAsyncComponent для крупных приложений.

Итоговый пример структуры проекта

src/
├─ main.js
├─ vuetify.js
├─ App.vue
└─ components/
   ├─ MyButton.vue
   └─ MyCard.vue

Такой подход позволяет полностью контролировать установку, подключение тем, локализацию, иконки и набор используемых компонентов, обеспечивая гибкость и оптимизацию Vue-проекта с Vuetify.

Оглавление