Стилизуем приложение с Vuetify (Material design). Spring Boot REST HD

Spring Boot Rest Application: оформляем наше приложение в стилях Material Design с фреймворком Vuetify. Данный фреймворк позволит сделать наш сайт адаптивным и красиво оформленным без каких-либо глубоких познаний в CSS и адаптивной верстке. Код из видео: https://github.com/drucoder/sarafan/tree/vuetify Сайт проекта Vuetify: https://vuetifyjs.com/ Видео о том, как установить и использовать NPM: https://youtu.be/TsM4Mekj_54 Видео о том, как настраивать и использовать WebPack: https://youtu.be/QyfzMzo9QGs Перед тем, как мы приступим к навешиванию стилей на интерфейс, нам необходимо подключить в webpack конфиг специальные загрузчики стилей https://vue-loader.vuejs.org/ru/guide/#%D0%BA%D0%BE%D0%BD%D1%84%D0%B8%D0%B3%D1%83%D1%80%D0%B0%D1%86%D0%B8%D1%8F-%D0%B2%D1%80%D1%83%D1%87%D0%BD%D1%83%D1%8E Далее мы настроим основной шаблон - файл index.html нашего приложения, в соответствии с рекомендациями на сайте Vuetify: https://vuetifyjs.com/en/getting-started/quick-start#existing-applications Далее мы делаем разметку всех наших страниц с помощью предопределённых шаблонов Vuetify: https://vuetifyjs.com/en/layout/pre-defined Для того, чтобы понять, как настраивать свои шаблоны, можно поиграться с конструктором: https://vuetifyjs.com/en/layout/grid#example-spacer Для оформления верхней панели берём пример с соответствующей страницы: https://vuetifyjs.com/en/components/toolbars Оформление кнопок: https://vuetifyjs.com/en/components/buttons Иконки для кнопок берём со специального сайта: https://material.io/tools/icons/?icon=exit_to_app&style=baseline Оформление текстовых полей ввода: https://vuetifyjs.com/en/components/text-fields Сообщения на странице оформляем как карточки: https://vuetifyjs.com/en/components/cards Настройка отступов осуществляется с помощью стилей. Понять, как они работают можно на соответствующей странице с конструктором отступов: https://vuetifyjs.com/en/layout/spacing ➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖ ➡ Твиттер: https://twitter.com/letsCodeDru ➡ Чат в Discord: https://discord.gg/xs6XxSx ➡ Группа Вконтакте: https://vk.com/letscodedru ➡ Канал в Telegram: https://t.me/letsCode_dru ➡ Чат в Telegram: https://t.me/joinchat/FeiP9xEhqHajfqhLr4z-Nw ➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖ Поддержать проект: ➡ Patreon https://www.patreon.com/letscodedru ➡ Яндекс.Деньги https://money.yandex.ru/to/41001451675086 ➡ PayPal paypal.me/letscodedru ➡ Qiwi https://qiwi.me/letscode ➡ WebMoney/BitCoin https://funding.webmoney.ru/d/drucoder ➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖ ➡ Ссылка на канал: https://www.youtube.com/channel/UC1g3kT0ZcSXt4_ZyJOshKJQ ➡ Ссылка на Яндекс.Дзен: https://zen.yandex.ru/media/id/5ac20956168a91ffeae449c5