Vue 3 SPA "Rick and Morty Api"
Описание проекта
Этот проект представляет собой простое веб-приложение на основе Vue.js, использующее API Rick and Morty для отображения информации о персонажах, локациях и эпизодах популярного мультсериала "Рик и Морти". Приложение позволяет пользователям искать персонажей по имени, статусу и полу, а также осуществлять пагинацию и выбор количества отображаемых карточек на странице.
Используемые технологии:
Vite.js
Vue.js
JavaScript (ES6+)
CSS
API Rick and Morty
Основные компоненты:
Main.vue: Основной компонент, который управляет отображением карточек персонажей, фильтрацией и пагинацией.
Card.vue: Компонент для отображения информации о персонаже, включая его имя, статус, пол, последнее местоположение и место первого появления.
Button.vue: Универсальный компонент кнопки с поддержкой событий и стилей.
Select.vue: Компонент для создания выпадающих списков фильтров по статусу и полу.
Pagination.vue: Компонент для управления пагинацией, позволяющий переключаться между страницами с персонажами.
ItemsPerPage.vue: Компонент для выбора количества карточек, отображаемых на странице (10, 25, 50).
ScrollToTop.vue: Компонент кнопки, позволяющий пользователю быстро вернуться в начало страницы.
Loader.vue: Компонент для отображения индикатора загрузки данных.
Функциональность:
Фильтрация персонажей: Пользователь может искать персонажей по имени, а также фильтровать их по статусу (живой, мёртвый, неизвестно) и полу (мужской, женский, бесполый, неизвестно).
Пагинация: Реализована возможность перехода между страницами списка персонажей с помощью кнопок "Вперед" и "Назад".
Выбор количества карточек на странице: Пользователь может выбрать, сколько карточек отображать на одной странице (10, 25, 50).
Информация об общем количестве данных: Приложение отображает общее количество персонажей, локаций и эпизодов на основе данных из API.
Кнопка "Вверх": Для удобства пользователя реализована кнопка, позволяющая быстро вернуться в начало страницы.
Установка и запуск:
Клонируйте репозиторий:
git clone https://github.com/username/repository.git
Перейдите в директорию проекта:
cd repository
Установите зависимости:
npm install
Запустите локальный сервер разработки:
npm run dev
vwebio.github.io/rick-and-morty-vue3/ github.com/vwebio/rick-and-morty-vue3
Пожаловаться
