rick-and-morty-vue3
Vue 3 SPA "Rick and Morty Api"
Описание проекта
Этот проект представляет собой простое веб-приложение на основе Vue.js, использующее API Rick and Morty для отображения информации о персонажах, локациях и эпизодах популярного мультсериала "Рик и Морти". Приложение позволяет пользователям искать персонажей по имени, статусу и полу, а также осуществлять пагинацию и выбор количества отображаемых карточек на странице.
Используемые технологии:
- Vite.js
- Vue.js
- JavaScript (ES6+)
- SCSS
- 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
Языки
Vue
- CSS
- HTML
- JavaScript