rick-and-morty-vue3

Форк
0

README.md

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

Использование cookies

Мы используем файлы cookie в соответствии с Политикой конфиденциальности и Политикой использования cookies.

Нажимая кнопку «Принимаю», Вы даете АО «СберТех» согласие на обработку Ваших персональных данных в целях совершенствования нашего веб-сайта и Сервиса GitVerse, а также повышения удобства их использования.

Запретить использование cookies Вы можете самостоятельно в настройках Вашего браузера.