Разработка отличного пользовательского интерфейса с нуля может потребовать больших усилий. Помимо навыков, необходимых для создания восхитительного пользовательского опыта, вам придется побеспокоиться о таких вещах, как создание собственной системы дизайна — со своими собственными значками, цветовыми сочетаниями, типографикой и т. то, к чему привыкли ваши пользователи, чтобы они не дезориентировались в стиле. Конечно, вы также должны помнить, что ваши приложения должны быть мобильными, чтобы они оставались функциональными и эстетически привлекательными на устройствах всех размеров.
К счастью, существует множество библиотек пользовательского интерфейса CSS, которые помогают упростить этот процесс и работать с различными средами JavaScript. В частности, для Vue.js Vuetify является одной из самых популярных платформ, которую вы можете использовать для быстрого создания красивых и отзывчивых приложений.
Представляем Vuetify
Vuetify — это библиотека компонентов пользовательского интерфейса с открытым исходным кодом, которая позволяет создавать веб-приложения с потрясающими визуальными эффектами без особых усилий. Вы можете легко добавить общие функции пользовательского интерфейса, такие как карусели, панели инструментов, навигационные панели, карточки, диалоги и таблицы, которые уже отлично смотрятся в вашем приложении. такой Он имеет более 33 000 звезд на GitHub и часто обновляется разработчиками. Он основан на известной системе Material Design, разработанной Google и используемой компанией практически во всех своих приложениях и веб-сайтах. Как указано на его официальном сайте:
Материал — это адаптируемая система руководств, компонентов и инструментов, поддерживающая лучшие практики проектирования пользовательского интерфейса. Благодаря открытому исходному коду Material упрощает сотрудничество между дизайнерами и разработчиками и помогает командам быстро создавать красивые продукты.
Этим все сказано. Использование Material Design для ваших веб-сайтов и приложений было бы действительно разумным шагом. Это был язык дизайна каждой основной неиндивидуализированной версии Android, начиная с Android Lollipop (5.1), который был выпущен еще в 2014 году. Из-за его популярности принятие рекомендаций по материальному дизайну придаст вашим приложениям согласованный дизайн, который огромное количество людей там уже знакомы.
Создание приложения
В этом уроке мы собираемся создать простой проект Vue.js, который использует несколько функций Vuetify. Вот как будет выглядеть наша домашняя страница, когда мы закончим:
Когда пользователь вводит сообщение и нажимает кнопку Shout
, появляется уведомление с кричащей формой сообщения.
Создание нового проекта
Для начала используйте Vue CLI, чтобы создать новый проект Vue в окне оболочки. Назовем его vuetify-app
:
vue create vuetify-app
Давайте перейдем в каталог нашего проекта в оболочке с помощью этой команды:
cd vuetify-app
Давайте добавим Vuetify в наш проект с помощью Vue CLI. Хотя есть и другие способы включить Vuetify в приложение Vue.js, это один из самых простых и простых способов:
vue add vuetify
Когда вас попросят выбрать предустановку, выберите Default
. Этот пресет подходит и рекомендуется для большинства проектов, включая тот, который мы будем создавать.
После установки Vuetify запустите проект с помощью npm start
или yarn start
и перейдите к localhost:8080
на новой вкладке браузера. Вы увидите, что стандартный шаблон Vue.js был изменен на шаблон Vuetify:
Давайте откроем src/App.vue
в каталоге нашего проекта и очистим этот шаблон, пока у нас не останется это:
src/App.vue <template> <v-app> <v-main> </v-main> </v-app> </template> <script> export default { name: 'App', data: () => ({ // }), }; </script>
Компонент v-app
теперь является корнем нашего приложения. Он заменил точку входа Vue по умолчанию (которая была <div id=”app”>
в шаблоне Vue.js). Предполагается, что компонент v-main
служит корнем основного содержимого нашего приложения — точно так же, как HTML-элемент main
.
Сразу бросается в глаза префикс v-
в именах компонентов. Все компоненты Vuetify имеют этот префикс. Это соглашение об именах, используемое для указания того, что компоненты являются частью его библиотеки, аналогично тому, как именуются пользовательские директивы в Vue.
Давайте добавим в приложение текстовое поле, используя компонент v-text-field
. Мы будем использовать свойство label
для установки значения заполнителя. Мы также создаем свойство message
для двусторонней привязки ввода к текстовому полю, поэтому всякий раз, когда пользователь редактирует текст в текстовом поле, message
будет обновляться соответствующим образом. Эта переменная пригодится для отображения уведомления.
src/App.vue <template> <v-app> <v-main> <v-container> <v-text-field label="Message" v-model="message"></v-text-field> </v-container> </v-main> </v-app> </template> <script> export default { name: 'App', data: () => ({ message: '', }), }; </script>
Обратите внимание, что мы обернули v-text-field
в компонент v-container
. v-container
добавляет некоторые отступы между своими дочерними компонентами и другими компонентами вне его.
Украсьте с помощью Vuetify
Полное руководство по созданию элегантных веб-приложений с помощью платформы Vuetify Material Design.
Скачать бесплатную копию здесь!
Добавление кнопки и снэкбара
Далее добавим кнопку с помощью компонента v-btn
. Мы центрируем этот элемент, заключив его в div и назначив div класс text-center
. Этот класс предоставляется Vuetify для центрирования текста, как следует из названия. Мы предоставим метод с именем shout()
для обработки кликов по кнопке.
Мы также добавим закусочную для уведомлений, используя компонент v-snackbar
. В обработчике кликов shout()
мы установим для нового свойства showSnackbar
значение true. v-snackbar
привязан к этому свойству. Если установить его на true
, появится закусочная. Через несколько секунд v-snackbar
вернет этой переменной значение false
, чтобы закусочную можно было снова скрыть.
src/App.vue <template> <v-app> <v-main> <v-container> <v-text-field label="Message" v-model="message"></v-text-field> <div class="text-center"> <v-btn color="primary" @click="shout">Shout</v-btn> </div> </v-container> </v-main> <v-snackbar v-model="showSnackbar"></v-snackbar> </v-app> </template> <script> export default { name: 'App', data: () => ({ message: '', showSnackbar: false, }), methods: { shout() { this.showSnackbar = true; }, }, }; </script>
Отображение кричащего сообщения
Прямо сейчас нажатие на кнопку просто отображает пустое уведомление. Чтобы закусочная отображала кричащую версию сообщения, введенного пользователем, мы создадим новую переменную, loudMessage
. В обработчике кликов shout()
мы установим эту переменную в заглавную форму значения message
, используя строковый метод JavaScript toUpperCase()
, и соединим ее с тремя восклицательными знаками. Мы сделаем это сообщение текстовым потомком элемента v-snackbar
.
src/App.vue <template> <v-app> <v-main> <v-container> <v-text-field label="Message" v-model="message"></v-text-field> <div class="text-center"> <v-btn color="primary" @click="shout">Shout</v-btn> </div> </v-container> </v-main> <v-snackbar v-model="showSnackbar">{{loudMessage}}</v-snackbar> </v-app> </template> <script> export default { name: 'App', data: () => ({ message: '', showSnackbar: false, loudMessage: '', }), methods: { shout() { this.loudMessage = `${this.message.toUpperCase()}!!!`; this.showSnackbar = true; }, }, }; </script>
Изменение перехода и положения снэк-бара
Давайте настроим закусочную. В настоящее время он исчезает в нижней центральной части экрана. Давайте сделаем так, чтобы он скользил снизу слева, изменив некоторые свойства элемента. Есть много других значений, которые мы могли бы установить для свойства transition
, но для наших целей нам нужно установить его на slide-y-reverse-transition
. Чтобы переместить закусочную влево, мы установим для свойства left
значение true
. Обратите внимание, что мы используем двоеточие (:
) перед left
, чтобы true
оценивалось как логическое значение true
вместо строки «true».
src/App.vue <template> <v-app> <v-main> <v-container> <v-text-field label="Message" v-model="message"></v-text-field> <div class="text-center"> <v-btn color="primary" @click="shout">Shout</v-btn> </div> </v-container> </v-main> <v-snackbar v-model="showSnackbar" transition="slide-y-reverse-transition" :left="true" >{{ loudMessage }}</v-snackbar > </v-app> </template> ...
Наше приложение Vuetify готово!
Я надеюсь, что даже с этим небольшим приложением вы смогли убедиться сами, сколько работы библиотеки пользовательского интерфейса, такие как Vuetify, могут сэкономить вам. Без использования каких-либо CSS или пользовательских стилей мы смогли за короткое время разработать красивое и полнофункциональное веб-приложение.
Подпишитесь на нашу еженедельную рассылку, чтобы быть в курсе последних советов по Vuetify и Vue.
Получить обновленную статью на codingbeautydev.com.