VuetifyJS — строим свое приложение в стиле Material Design

Если Вы уже хорошо знакомы с VueJS и имеете за плечами несколько завершенных на нем проектов, то предлагаем познакомиться с компонентным фреймворком VuetifyJS.

Об инструменте

VuetifyJS — это огромный пак готовых компонентов для приложения на VueJS. Кастомных компонентов настолько много, что, по началу, можно легко запутаться в них. Здесь есть и своя разметка, и своя типографика и т.д. В общем, полный набор для интерфейса приложения.

Первая мысль, которая приходит при использовании VuetifyJS , состоит в ощущении того, что Вы «обмазываетесь» компонентами с ног до головы. И обратно. Очень важно с самого начала делать все по документации. Кстати, последняя на русском языке и вполне практичная.

Начало пользования

Устанавливаем с помощью NPM:

Или подключаем из CDN:

Итак, фреймворк подключен. Можно интегрировать его в свой проект. Закидываем в main.js:

Если ставите пакеты через NPM, то не забудьте подключить файл стилей:

Поскольку Vuetify крепко связан с Material Icons, самым простым способом будет подключить иконки в разметке:

Или локально в приложение:

Если требуется, подключаем и шрифты:

В целом, необходимые пакеты установлены и подключены. Рекомендуем помнить о полифилах и не забывать подключать их в проект.

Использование VuetifyJS

Любое приложение должно строиться по примерно такой структуре:

Тут отметим, что ВСЕГДА необходимо оборачивать все компоненты Vuetify в компонент v-app (подробнее). Если этого не сделать, то можно с легкостью убить пару часов на банальные проблемы.

На сайте фреймворка можно найти полноценную документацию по всем компонентам и возможностям.

Итоги

Можно сказать, что Vuetify — это очень раздутый инструмент, который становиться полезным после основного изучения. Так что, будьте готовы потратить 2-3 часа на чтение мануалов. В конечном результате этот фронтенд-пак становится приятным фактором в разработке приложений. В нем можно найти готовое решение для интерфейса практически любой задачи.