Стилизуем приложение с Vuetify (Material design). Spring Boot REST
Spring Boot Rest Application: оформляем наше приложение в стилях Material Design с фреймворком Vuetify. Данный фреймворк позволит сделать наш сайт адаптивным и красиво оформленным без каких-либо глубоких познаний в CSS и адаптивной верстке.
Код из видео:
https://github.com/drucoder/sarafan/t...
Сайт проекта Vuetify:
https://vuetifyjs.com/
Видео о том, как установить и использовать NPM:
• Node.js: NPM - пакетный менеджер (для...
Видео о том, как настраивать и использовать WebPack:
• Webpack - сборщик web приложений (в п...
Перед тем, как мы приступим к навешиванию стилей на интерфейс, нам необходимо подключить в webpack конфиг специальные загрузчики стилей
https://vue-loader.vuejs.org/ru/guide...
Далее мы настроим основной шаблон - файл index.html нашего приложения, в соответствии с рекомендациями на сайте Vuetify:
https://vuetifyjs.com/en/getting-star...
Далее мы делаем разметку всех наших страниц с помощью предопределённых шаблонов Vuetify:
https://vuetifyjs.com/en/layout/pre-d...
Для того, чтобы понять, как настраивать свои шаблоны, можно поиграться с конструктором:
https://vuetifyjs.com/en/layout/grid#...
Для оформления верхней панели берём пример с соответствующей страницы:
https://vuetifyjs.com/en/components/t...
Оформление кнопок:
https://vuetifyjs.com/en/components/b...
Иконки для кнопок берём со специального сайта:
https://material.io/tools/icons/?icon...
Оформление текстовых полей ввода:
https://vuetifyjs.com/en/components/t...
Сообщения на странице оформляем как карточки:
https://vuetifyjs.com/en/components/c...
Настройка отступов осуществляется с помощью стилей. Понять, как они работают можно на соответствующей странице с конструктором отступов:
https://vuetifyjs.com/en/layout/spacing
➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖
➡ Твиттер: / letscodedru
➡ Чат в Discord: / discord
➡ Группа Вконтакте: https://vk.com/letscodedru
➡ Канал в Telegram: https://t.me/letsCode_dru
➡ Чат в Telegram: https://t.me/joinchat/FeiP9xEhqHajfqh...
➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖
Поддержать проект:
➡ Patreon / letscodedru
➡ Яндекс.Деньги https://money.yandex.ru/to/4100145167...
➡ PayPal paypal.me/letscodedru
➡ Qiwi https://qiwi.me/letscode
➡ WebMoney/BitCoin https://funding.webmoney.ru/d/drucoder
➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖
➡ Ссылка на канал: / @letscodedru
➡ Ссылка на Яндекс.Дзен: https://zen.yandex.ru/media/id/5ac209...
