https://github.com/mrplotnik/contact-management
https://github.com/mrplotnik/contact-management
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/mrplotnik/contact-management
- Owner: mrPlotnik
- Created: 2024-07-12T08:25:01.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-07-12T08:58:22.000Z (almost 2 years ago)
- Last Synced: 2025-10-28T00:22:40.087Z (7 months ago)
- Language: Vue
- Size: 167 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Управление контактами на Vue 3
## Описание
Проект "Управление контактами" на Vue 3 предоставляет простое приложение для добавления, редактирования и управления списком контактов с использованием Vue CLI и TypeScript.
## Основные компоненты
- **App.vue**: Основной компонент приложения, включает ContactList, ContactForm и SearchBar.
- **ContactList.vue**: Отображает список контактов с помощью ContactItem.
- **ContactItem.vue**: Компонент для отображения информации о контакте и управления им (редактирование, удаление).
- **ContactForm.vue**: Форма для добавления и редактирования контактов с валидацией данных (имя, email).
- **SearchBar.vue**: Компонент для поиска контактов по имени.
## Технические особенности
- **Vue CLI + TypeScript**: Проект создан для улучшения типизации и структурирования кода.
- **Хранение данных**: Данные о контактах сохраняются в localStorage для сохранения состояния приложения.
- **Валидация формы**: Добавлена валидация для обязательных полей и формата email.
## Дополнительные возможности
- **Анимации**: Используются Vue Transition для плавного добавления, редактирования и удаления контактов.
- **Тестирование**: Реализованы простые юнит-тесты с использованием Jest для одного из компонентов.
## Стилизация
- Минимальная стилизация с использованием CSS фреймворка Bootstrap для улучшения внешнего вида приложения.
- Используется препроцессор CSS SCSS для удобства разработки и поддержки стилей.
## Руководство по запуску
1. **Установка зависимостей**:
```bash
npm install
1. **Запуск в режиме разработки**:
```bash
npm run serve
1. **Сборка проекта для production**:
```bash
npm run build
1. **Запуск тестов**:
```bash
npm run test:unit