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.
• Кнопка “Вверх”: Для удобства пользователя реализована кнопка, позволяющая быстро вернуться в начало страницы.

Установка и запуск:

1. Клонируйте репозиторий:

   git clone https://github.com/username/repository.git
   

2. Перейдите в директорию проекта:

   cd repository
   

3. Установите зависимости:

   npm install
   

4. Запустите локальный сервер разработки:

   npm run dev