Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vwebio/rick-and-morty-vue3
Vue 3 SPA "Rick and Morty Api"
https://github.com/vwebio/rick-and-morty-vue3
rick-and-morty-api scss vitejs vue3 vue3-composition-api
Last synced: 20 days ago
JSON representation
Vue 3 SPA "Rick and Morty Api"
- Host: GitHub
- URL: https://github.com/vwebio/rick-and-morty-vue3
- Owner: vwebio
- Created: 2024-08-18T10:37:55.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-09-20T08:50:46.000Z (4 months ago)
- Last Synced: 2024-10-31T11:27:41.526Z (2 months ago)
- Topics: rick-and-morty-api, scss, vitejs, vue3, vue3-composition-api
- Language: Vue
- Homepage: https://vwebio.github.io/rick-and-morty-vue3/
- Size: 304 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue 3 SPA "Rick and Morty Api"
### Описание проекта
Этот проект представляет собой простое веб-приложение на основе Vue.js, использующее API [Rick and Morty](https://rickandmortyapi.com/) для отображения информации о персонажах, локациях и эпизодах популярного мультсериала "Рик и Морти". Приложение позволяет пользователям искать персонажей по имени, статусу и полу, а также осуществлять пагинацию и выбор количества отображаемых карточек на странице.
#### Используемые технологии:
- **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. Клонируйте репозиторий:
```bash
git clone https://github.com/username/repository.git
```
2. Перейдите в директорию проекта:
```bash
cd repository
```
3. Установите зависимости:
```bash
npm install
```
4. Запустите локальный сервер разработки:
```bash
npm run dev
```