https://github.com/mrplotnik/vue-test-zhilfond
Управление контактами (Vue 3 (Composition API), Vue CLI, Vuex, SCSS, ESLint, REST API, Axios)
https://github.com/mrplotnik/vue-test-zhilfond
Last synced: 4 months ago
JSON representation
Управление контактами (Vue 3 (Composition API), Vue CLI, Vuex, SCSS, ESLint, REST API, Axios)
- Host: GitHub
- URL: https://github.com/mrplotnik/vue-test-zhilfond
- Owner: mrPlotnik
- Created: 2024-08-09T20:59:49.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-09T21:27:09.000Z (almost 2 years ago)
- Last Synced: 2025-07-06T00:08:20.621Z (11 months ago)
- Language: Vue
- Size: 137 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Управление контактами
## Описание
Vue 3 (Composition API), Vue CLI, Vuex, SCSS, ESLint, REST API, Axios
## Технические особенности
**Разделение ответственности, декомпозиция логики, переиспользуемость:**
Вынесение бизнес-логики в store: Логика обработки данных (например, функции preParse, firstElementIsNumber) вынесена из компонента в отдельные утилиты (файл utils.js). Это сделает компонент более "чистым" и сосредоточенным на рендеринге, а не на обработке данных.
Функция load (файл load.js) обрабатывает запросы и ошибки, делая обработку ответов гибкой.
**Кэширование:**
Данные кэшируются, чтобы не делать повторные запросы на одни и те же данные, если они уже загружены.
**Использование BEM для именования классов:**
Проект использует методологию BEM для именования CSS-классов, чтобы улучшить структуру именования классов.
**Управление состоянием (State Management):**
SideBar и MainContent взаимодействуют с Vuex. Логика работы с состоянием вынесена в store. Компоненты используются только для отображения.
**Обработка ошибок и загрузок:**
Приложение делает асинхронные запросы, поэтому встроена логика обработки ошибок и состояний загрузки. Это влечет отображение спиннера и сообщений об ошибке для улучшения UX.
**Соблюдение принципов SOLID:**
Применены принципы SOLID, особенно Single Responsibility Principle (SRP), чтобы каждый компонент отвечал только за одну задачу.
**Использование модульного подхода в SCSS (миксины и переменные):**
Повторяющиеся CSS-стили вынесении в SCSS-переменные и миксины, чтобы облегчить поддержку стилей в будущем.
**Улучшение доступности:**
Добавлены атрибуты для доступности, таких как role и tabindex.
**Анимация**
Используются Vue Transition для плавного появления карточек.
## Руководство по запуску
1. **Установка зависимостей**:
```bash
npm install
2. **Запуск в режиме разработки**:
```bash
npm run serve
3. **Сборка проекта для production**:
```bash
npm run build