Изучение Vuetify 3

Когда вышел Vue 3, был период ожидания, пока другие библиотеки в экосистеме не догнали его. Но для одного из самых популярных инструментов в экосистеме Vue.js, Vuetify, это ожидание подошло к концу с выпуском Vuetify 3.

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

Vuetify 2 против Vuetify 3

Одним из наиболее заметных различий между Vuetify 2 и 3 является способ рендеринга компонентов. Vuetify 3 использует возможности Vue 3 Composition API для создания более производительной и модульной кодовой базы. В результате компоненты становятся легче и быстрее, что приводит к повышению общей производительности приложений.

Хотя в Vuetify 3 были добавлены новые компоненты, также были компоненты, которые не были перенесены из Vuetify 2, включая v-calendar и v-date-picker.

Давайте установим Vuetify 3, чтобы начать обучение.

Установка Vuetify 3

Для начала мы создадим проект Vuetify 3 с нуля в терминале, используя команду стартового набора Vuetify project для быстрого запуска приложения.

yarn create vuetify

//OR 

npm create vuetify

Далее мы назовем наш проект, а затем выберем для него пресет. Здесь у нас есть несколько вариантов. Перейдем к «Основам (Vuetify, VueRouter, Pina)».

Далее мы решаем, использовать ли TypeScript и какой менеджер пакетов использовать для установки зависимостей. Я буду придерживаться yarn, но вы можете использовать то, что предпочитаете.

Вы также можете вручную добавить Vuetify 3, выполнив шаги, описанные здесь.

Переход с Vuetify 2 на Vuetify 3

Если у вас уже есть проект в Vuetify 2, перейти на Vuetify 3 несложно. Руководство доступно на официальном сайте Vuetify.

Критические изменения

Важно отметить, что любой, кто обновится с Vuetify 2 до Vuetify 3, заметит несколько критических изменений, в том числе:

value prop был заменен на model-value для компонентов, поддерживающих v-model использование.
Событие @input было заменено на @update:model-value для компонентов, поддерживающих использование v-model.
background-color опора была переименована в bg-color.
v-simple-table был переименован в v-table.
v-tab-item был удален, используйте вместо него v-window-item.
Для v-btn свойство active-class было переименовано в selected-class; depressed был переименован в variant="flat"; retain-focus-on-click удалено; кнопки вместо этого используют :focus-visible.
Для v-checkbox, v-radio и v-swtich свойства on-icon и off-icon были переименованы в true-icon и false-icon.

Подробнее о критических изменениях можно узнать здесь.

Пример формы входа в Vuetify 3

Давайте создадим простой пример приложения, чтобы увидеть, как работает Vuetify 3. В этом примере мы создадим форму входа.

Создайте компонент заголовка

cd src/components
touch MyHeader.vue

Вставьте этот код в MyHeader.vue.

<template>
  <v-app-bar app color="primary" class="px-10" dark>
    <div class="d-flex align-center">
      <h2>My Company</h2>
    </div>

<v-spacer></v-spacer>

    <v-btn href="https://mycompany.com/contact-us" target="_blank" text>
      <span class="mr-2">Contact US</span>
      <v-icon>mdi-open-in-new</v-icon>
    </v-btn>
  </v-app-bar>
</template>

<script setup>
//
</script>

Что же мы добавили в этом компоненте?

Компонент v-app-bar. Это предлагает многое из коробки, в первую очередь внешний вид панели навигации, похожий на приложение. Это контейнер, который можно использовать для навигации, брендинга, поиска и действий.
Когда вы хотите заполнить доступное пространство или создать пространство между двумя компонентами, вы используете компонент v-spacer.
Компонент v-btn предоставляет нам кнопку с дополнительными функциями, такими как волновые эффекты, более высокие высоты, легкое добавление и добавление значков и многое другое. Мы можем сделать v-btn тегом привязки, используя атрибут href.
Компонент v-icon включает в себя большое количество иконок для использования в нашем приложении, а также возможность использовать их с двумя разными темами оформления (светлой и темной). Vuetify использует Значки дизайна материалов. Мы специально используем значок mdi-open-in-new.

Создать форму входа

Далее мы создадим компонент LoginForm:

cd src/components
touch LoginForm.vue

И мы вставим этот код в наш новый LoginForm.vue

<template>
  <v-container class="pt-10">
    <v-form @submit.prevent="handleSubmit">
      <legend>Welcome back!</legend>
      <v-text-field v-model="form.username" label="Username" name="username" />
      <v-text-field
        v-model="form.password"
        label="Password"
        name="password"
        type="password"
      />
      <v-btn type="submit">Login</v-btn>
    </v-form>
  </v-container>
</template>

<script setup>
import { reactive } from "vue";
const form = reactive({
  username: "",
  password: "",
});
const handleSubmit = () => {
  // make api request
  console.log(form);
};
</script>
<style lang="scss" scoped>
</style>

Давайте пройдемся по тому, что мы только что добавили:

v-container обеспечивает возможность центрирования и горизонтального заполнения содержимого. У него также есть жидкая опора, которая позволяет нам полностью расширять контейнер через окна просмотра.
v-form позволяет нам легко добавлять проверки ко всем нашим формам ввода и отправки вручную. Мы также можем использовать сторонние библиотеки проверки, такие как Vuelidate или Vee-validate.
v-text-field предоставляет поле ввода для сбора пользовательских данных, таких как адрес электронной почты, домашний адрес, имя, номер телефона и так далее. Он также включает в себя богатые API-интерфейсы, которые позволяют нам добавлять значки, префиксы и суффиксы, подсказки, добавлять заполнители, добавлять очистку (кнопка очистки, которая стирает ввод при нажатии), проверку на лету без использования внешнего библиотека и многое другое.

Обратите внимание, что в приведенном выше коде мы используем API композиции.

Обновить просмотры/Home.vue

Далее мы обновим наш Home.vue, чтобы использовать компоненты Vuetify.

<template>
  <v-responsive>
    <v-container fluid tag="section" aria-labelledby="title">
      <my-header />
      <v-main>
        <v-row>
          <v-col cols="4" offset="4">
            <login-form />
          </v-col>
        </v-row>
      </v-main>
    </v-container>
  </v-responsive>
</template>

<script setup>
import MyHeader from "@/components/MyHeader";
import LoginForm from "@/components/LoginForm.vue";
</script>

Что тут происходит?

Мы уже рассмотрели использование и потребность в v-container.
Основанный на системе компоновки приложений Vuetify, v-main позволяет нам правильно размещать наш основной контент, указывая порядок иерархии. Вы можете Подробнее об этом.
v-row и v-col — это компоненты системы сетки, которые позволяют нам легко создавать строки и столбцы. Они оба предоставляют надежные и богатые API-интерфейсы, которые позволяют нам устанавливать количество столбцов, смещения, точки останова, порядок, промежутки и многое другое. Подробнее здесь.

Запуск демонстрации

Давайте запустим демонстрацию, запустив сервер с помощью команды сборки.

yarn serve

Чтобы увидеть нашу работу, мы откроем браузер по адресу http://localhost:3000.

Вуаля! Мы видим наш интерфейс Vuetified:

Подведение итогов

Vuetify 3 — самая популярная библиотека компонентов пользовательского интерфейса в экосистеме Vue, с сотнями сотрудников и более чем 36 тысячами звезд Github. Если вы хотите узнать больше о Vuetify, вы можете ознакомиться с нашим курсом Улучшайте с помощью Vuetify.

Первоначально опубликовано на https://www.vuemastery.com 17 марта 2023 г.

Изучение Vuetify 3