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

К счастью, существует множество библиотек пользовательского интерфейса 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.