Книга посвящена созданию с нуля пользовательских интерфейсов и фронтенд-приложений с помощью Vue.js — современной платформы JavaScript. На практических примерах разработчики поэтапно познакомятся с инструментами и библиотеками экосистемы Vue.js и научатся создавать полноценные веб-приложения. Рассматриваются ключевые аспекты работы с Vue.js: создание компонентов, добавление реактивности, управление состоянием с помощью Pinia, настройка системы маршрутизации с использованием Vue Router, а также создание базовых анимационных эффектов. Подробно описана настройка фронтенда с помощью инструмента сборки для управления кодом Vite.js, создание повторно используемых компонентов, передача приложению данных с внешнего сервера, тестирование с использованием Vitest и Playwright. Показано, как управлять потоком приложения, реализовывать статическую и динамическую маршрутизацию, а также интегрировать Vue.js в существующие проекты.
Изучите основные концепции Vue.js — современной платформы JavaScript для создания фронтенд-приложений и интерфейсов с нуля. С помощью кратких, практических и понятных примеров эта книга шаг за шагом познакомит веб-разработчиков с инструментами и библиотеками в экосистеме Vue.js и покажет, как создавать полноценные приложения для реальных веб-проектов.
Вы узнаете, как управлять передачей данных между компонентами с помощью архитектуры Pinia, как разработать систему маршрутизации фронтенд-проекта для управления потоком приложения и создать базовые эффекты анимации.
В книге показано, как:
- создавать повторно используемые системы компонентов с помощью Vue.js;
- добавлять реактивность в существующее статическое приложение;
- настраивать фронтенд с помощью Vite.js — инструмента сборки для управления кодом проекта;
- создавать интерактивную систему управления состоянием фронтенда с помощью Pinia;
- подключать к приложению Vue данные с внешнего сервера;
- управлять потоком приложения с помощью статической и динамической маршрутизации посредством Vue Router;
- тестировать приложение с помощью Vitest и Playwright.
Предисловие…………………………………………………………………………………………… 11
Условные обозначения……………………………………………………………………………………………………………… 11
Использование примеров кода…………………………………………………………………………………………………. 12
Благодарности…………………………………………………………………………………………………………………………… 13
Глава 1. Добро пожаловать в мир Vue.js!……………………………………………….. 15
Что такое Vue.js?………………………………………………………………………………………………………………………… 15
Преимущества Vue в современной веб-разработке………………………………………………………………… 16
Установка Node.js………………………………………………………………………………………………………………………. 16
NPM………………………………………………………………………………………………………………………………….. 17
Yarn………………………………………………………………………………………………………………………………….. 19
Инструменты разработчика Vue………………………………………………………………………………………………. 20
Инструмент управления сборкой Vite.js………………………………………………………………………………….. 21
Создание нового приложения Vue……………………………………………………………………………………………. 22
Файловая структура проекта……………………………………………………………………………………………………. 23
Резюме…………………………………………………………………………………………………………………………………………. 24
Глава 2. Как работает Vue: основы………………………………………………………… 25
Виртуальный DOM “под капотом”…………………………………………………………………………………………… 25
Проблема обновления компоновки……………………………………………………………………………….. 26
Что такое виртуальный DOM?………………………………………………………………………………………. 27
Как виртуальный DOM работает вместе с Vue……………………………………………………………. 27
Экземпляр приложения Vue и Options API………………………………………………………………………………. 29
Изучаем Options API………………………………………………………………………………………………………………….. 30
Синтаксис шаблонов…………………………………………………………………………………………………………………. 32
Создание локального состояния в свойстве data()…………………………………………………………………. 33
Как работает реактивность в фреймворке Vue……………………………………………………………………….. 36
Двустороннее связывание с помощью v-model……………………………………………………………………….. 38
Использование модификатора v-model.lazy…………………………………………………………………………….. 41
Связывание реактивных данных и передача свойств с помощью v-bind……………………………… 42
Привязка к классу и атрибутам стиля……………………………………………………………………………………… 44
Перебор коллекции с помощью v-for……………………………………………………………………………………….. 47
Перебор свойств объекта……………………………………………………………………………………………….. 50
Уникальная привязка элемента с помощью атрибута key………………………………………….. 51
Обработка событий v-on…………………………………………………………………………………………………………… 52
Использование модификаторов v-on…………………………………………………………………………….. 53
События клавиатуры с помощью модификаторов клавиш………………………………………… 56
Условный рендеринг элементов с помощью v-if, v-else и v-else-if………………………………………….. 57
Условная видимость элементов с помощью v-show………………………………………………………………… 60
Динамическая отрисовка HTML-кода с помощью v-html………………………………………………………. 61
Отображение текста с помощью v-text…………………………………………………………………………………….. 62
Оптимизация рендеринга с помощью v-once и v-memo…………………………………………………………… 62
Глобальная регистрация компонентов……………………………………………………………………………………. 65
Резюме…………………………………………………………………………………………………………………………………………. 66
Глава 3. Создание более сложных компонентов…………………………………….. 67
Структура однофайлового компонента…………………………………………………………………………………… 67
Использование defineComponent() для поддержки TypeScript………………………………………………. 70
Хуки жизненного цикла компонента………………………………………………………………………………………… 71
setup…………………………………………………………………………………………………………………………………. 73
beforeCreate…………………………………………………………………………………………………………………….. 75
created……………………………………………………………………………………………………………………………… 75
beforeMount…………………………………………………………………………………………………………………….. 75
mounted……………………………………………………………………………………………………………………………. 75
beforeUpdate……………………………………………………………………………………………………………………. 76
updated…………………………………………………………………………………………………………………………….. 76
beforeUnmount…………………………………………………………………………………………………………………. 76
unmounted………………………………………………………………………………………………………………………… 76
Методы……………………………………………………………………………………………………………………………………….. 80
Вычисляемые свойства……………………………………………………………………………………………………………… 82
Наблюдатели……………………………………………………………………………………………………………………………… 84
Наблюдение за изменениями вложенных свойств………………………………………………………. 87
Использование метода this.$watch()……………………………………………………………………………… 89
Возможности слотов………………………………………………………………………………………………………………….. 91
Именованные слоты в теге template с директивой v-slot………………………………………………………… 95
Использование ссылок ref…………………………………………………………………………………………………………. 98
Общая конфигурация компонентов с помощью миксинов…………………………………………………… 100
Локальные стили в компонентах……………………………………………………………………………………………. 104
Применение локальных CSS-стилей к дочернему компоненту………………………………… 107
Применение локальных стилей к содержимому слота……………………………………………… 108
Использование данных компонента в стиле с помощью псевдокласса v-bind()…….. 108
Определение стилей компонентов с помощью CSS-модулей………………………………………………. 110
Резюме………………………………………………………………………………………………………………………………………. 112
Глава 4. Взаимодействие компонентов…………………………………………………. 113
Вложенные компоненты и поток данных в Vue……………………………………………………………………. 113
Использование props для передачи данных в дочерние компоненты……………………… 114
Объявление входных параметров с валидацией и значениями по умолчанию……… 117
Объявление входных параметров с проверкой пользовательских типов……………….. 119
Объявление входных параметров с помощью defineProps()и withDefaults()………….. 122
Взаимодействие компонентов через пользовательские события………………………………………… 123
Определение пользовательских событий с помощью defineEmits()……………………………………. 127
Взаимодействие компонентов с помощью provide/inject…………………………………………………….. 129
Использование provide для передачи данных…………………………………………………………… 129
Использование inject для получения данных…………………………………………………………….. 130
Teleport API………………………………………………………………………………………………………………………………. 131
Реализация модального окна с помощью Teleport и элемента <dialog>……………….. 133
Проблема рендеринга при использовании Teleport………………………………………………….. 140
Резюме………………………………………………………………………………………………………………………………………. 141
Глава 5. Composition API………………………………………………………………………. 143
Создание компонентов в Composition API…………………………………………………………………………….. 143
Управление данными с помощью ref() и reactive()……………………………………………………………….. 144
Использование ref()………………………………………………………………………………………………………. 144
Использование reactive()……………………………………………………………………………………………… 149
Хуки жизненного цикла в Composition API……………………………………………………………………………. 151
Наблюдатели в Composition API……………………………………………………………………………………………. 154
Использование computed()………………………………………………………………………………………………………. 157
Создание многократно используемых компосаблов……………………………………………………………. 159
Резюме………………………………………………………………………………………………………………………………………. 163
Глава 6. Загрузка внешних данных……………………………………………………… 165
Что такое Axios?………………………………………………………………………………………………………………………. 165
Установка Axios……………………………………………………………………………………………………………………….. 166
Загрузка данных с помощью хуков жизненного цикла и Axios…………………………………………… 166
Проблема асинхронных запросов в режиме выполнения……………………………………………………. 170
Создание повторно используемого компонента для выполнения запросов………………………. 173
Хранение данных на стороне браузера………………………………………………………………………………… 176
Резюме………………………………………………………………………………………………………………………………………. 177
Глава 7. Продвинутый рендеринг, динамические компоненты
и плагины…………………………………………………………………………………………….. 179
Функция рендеринга и JSX……………………………………………………………………………………………………… 179
Использование функции рендеринга………………………………………………………………………….. 179
Использование функции h для создания VNode………………………………………………………… 180
JavaScript XML в функции рендеринга……………………………………………………………………….. 182
Функциональный компонент………………………………………………………………………………………………….. 183
Определение props и emits для функционального компонента……………………………………………. 185
Пользовательская функциональность глобального уровня с помощью плагинов Vue…….. 185
Динамический рендеринг с помощью тега <component>……………………………………………………. 188
Кеширование экземпляра неактивного компонента с помощью <keep-alive>…………………… 189
Резюме………………………………………………………………………………………………………………………………………. 191
Глава 8. Маршрутизация……………………………………………………………………… 193
Что такое маршрутизация?…………………………………………………………………………………………………….. 193
Использование Vue Router………………………………………………………………………………………………………. 194
Установка Vue Router…………………………………………………………………………………………………… 194
Определение маршрутов……………………………………………………………………………………………… 196
Создание экземпляра маршрутизатора……………………………………………………………………… 199
Подключение экземпляра маршрутизатора к приложению Vue……………………………… 200
Рендеринг текущей страницы с помощью RouterView………………………………………………. 201
Панель навигации с помощью компонента RouterLink…………………………………………….. 202
Передача данных между маршрутами………………………………………………………………………………….. 204
Передача параметров маршрута с помощью props……………………………………………………………… 208
Навигационные хуки……………………………………………………………………………………………………………….. 209
Глобальные навигационные хуки………………………………………………………………………………. 209
Навигационные хуки уровня маршрута…………………………………………………………………….. 210
Навигационные хуки уровня компонента………………………………………………………………….. 211
Создание вложенных маршрутов…………………………………………………………………………………………… 213
Создание динамических маршрутов……………………………………………………………………………………… 215
Переход назад и вперед с помощью экземпляра маршрутизатора…………………………………….. 218
Обработка неопределенных маршрутов……………………………………………………………………………….. 219
Резюме………………………………………………………………………………………………………………………………………. 221
Глава 9. Управление состояниями с помощью Pinia…………………………….. 223
Что такое управление состояниями в Vue?……………………………………………………………………………. 223
Что такое Pinia………………………………………………………………………………………………………………………….. 225
Создание хранилища pizzas для Pizza House………………………………………………………………………… 226
Создание хранилища cart для Pizza House……………………………………………………………………………. 230
Использование хранилища cart в компоненте………………………………………………………………………. 231
Добавление элементов в корзину из галереи………………………………………………………………………… 232
Отображение элементов корзины с помощью действий………………………………………………………. 235
Удаление товаров из хранилища cart……………………………………………………………………………………. 239
Модульное тестирование хранилищ Pinia…………………………………………………………………………….. 241
Подписка на изменения хранилища и добавление побочных эффектов…………………………….. 241
Резюме………………………………………………………………………………………………………………………………………. 244
Глава 10. Переходы и анимация в Vue…………………………………………………. 245
Что такое CSS-переходы и CSS-анимация?…………………………………………………………………………… 245
Компонент transition в Vue……………………………………………………………………………………………………… 246
Использование атрибутов с пользовательскими классами переходов……………………. 249
Эффект перехода при первом рендеринге с помощью appear………………………………….. 250
Создание перехода для группы элементов……………………………………………………………………………. 251
Создание переходов для маршрутов……………………………………………………………………………………… 252
Использование событий перехода для управления анимацией………………………………………….. 253
Резюме………………………………………………………………………………………………………………………………………. 255
Глава 11. Тестирование в Vue………………………………………………………………. 257
Общие сведения о модульном и сквозном тестировании……………………………………………………… 257
Vitest как инструмент для модульного тестирования…………………………………………………………… 259
Настройка Vitest с помощью параметров и файла конфигурации……………………………………… 259
Создание вашего первого теста……………………………………………………………………………………………… 261
Тестирование компосаблов, не использующих хуки жизненного цикла……………………………. 266
Тестирование компосаблов с хуками жизненного цикла…………………………………………………….. 269
Тестирование компонентов с помощью Vue Test Utils………………………………………………………….. 274
Тестирование событий компонента……………………………………………………………………………………….. 277
Пользовательский интерфейс Vitest……………………………………………………………………………………….. 279
Использование Vitest с инструментами для оценки покрытия кода……………………………………. 280
Сквозное тестирование с помощью PlaywrightJS………………………………………………………………….. 284
Отладка сквозных тестов с помощью расширения Playwright Test для VSCode………………… 291
Резюме………………………………………………………………………………………………………………………………………. 293
Глава 12. Непрерывная интеграция и непрерывное развертывание
Vue-приложений…………………………………………………………………………………… 295
CI/CD в разработке программного обеспечения………………………………………………………………….. 295
Непрерывная интеграция…………………………………………………………………………………………….. 296
Непрерывная доставка………………………………………………………………………………………………… 296
Непрерывное развертывание………………………………………………………………………………………. 296
Конвейер CI/CD с помощью GitHub Actions………………………………………………………………………….. 297
Непрерывное развертывание с помощью Netlify………………………………………………………………….. 301
Развертывание с помощью Netlify CLI…………………………………………………………………………………… 303
Резюме………………………………………………………………………………………………………………………………………. 304
Глава 13. Рендеринг на стороне сервера в фреймворке Vue………………….. 305
Рендеринг на стороне клиента в Vue……………………………………………………………………………………… 305
Рендеринг на стороне сервера (SSR)……………………………………………………………………………………… 306
Рендеринг на стороне сервера с помощью Nuxt.js……………………………………………………………….. 311
Генератор статических сайтов (SSG)…………………………………………………………………………………….. 319
Напоследок………………………………………………………………………………………………………………………………. 320
Предметный указатель…………………………………………………………………………. 323
Об авторе……………………………………………………………………………………………… 331
Об изображении на обложке………………………………………………………………… 333
