Олег Десятников olegopro
Fullstack-разработчик Vue 3 / Laravel · 7+ лет опыта
Рейтинг
1 718
№ 577 в каталоге
Отзывы
0
Профессионализм
-/10
Коммуникация
- /10
Город
Краснодар
Опыт работы
7 лет
На сайте с
2026 года
Юридический статус
Самозанятый

SPA и админ-панели на Vue 3 и TypeScript: таблицы, формы, роли доступа

Описание

Ко мне приходят с интерфейсом, в котором сотрудники проводят весь рабочий день: списки на тысячи строк с фильтрами и сортировкой, формы с валидацией, разграничение прав, данные, которые должны обновляться сами. Обычно это два сценария. Либо проект запускается с нуля и нужно сразу заложить архитектуру, чтобы через полгода в него можно было добавлять разделы. Либо фронтенд писали несколько команд подряд, он оброс копиями компонентов, и каждая новая правка ломает соседний экран.

Решение

Собираю SPA на Vue 3 с Composition API и строгой типизацией TypeScript. Состояние на Pinia, маршруты с проверкой прав, база компонентов Quasar или PrimeVue. Повторяющееся выношу в общие компоненты: таблица с серверной пагинацией и фильтрами, формы, модалки, уведомления, чтобы новый раздел собирался из готового, а не писался заново. Где нужны живые данные, подключаю WebSocket. Легаси перевожу с Vue 2 на Vue 3, Vuex меняю на Pinia, попутно разбирая дубли компонентов и приводя стили к одному виду.

Результат

Интерфейс перестаёт быть узким местом: страницы открываются предсказуемо, новые разделы собираются из готовых блоков, типизация ловит ошибки до выкладки. По этой схеме собран фронтенд платформы мониторинга чрезвычайных ситуаций, которую я запускал с нуля и вёл почти два года: карты, происшествия, реагирование, отчётность, роли операторов экстренных служб.

Оценили проект:

Другие проекты

Все проекты →
Веб-разработка и IT Автоматизация рутины и парсинг: выгрузки, сценарии в браузере, отчёты
Автоматизация рутины и парсинг: выгрузки, сценарии в браузере, отчёты
17
Веб-разработка и IT Интеграции по API: платежи, CRM, 1С, уведомления и вебхуки
Интеграции по API: платежи, CRM, 1С, уведомления и вебхуки
19
Веб-разработка и IT Backend на Laravel и PHP 8: REST API, очереди, интеграции
Backend на Laravel и PHP 8: REST API, очереди, интеграции
18
Веб-разработка и IT NestJS и WebSocket: чаты, уведомления и обновления в реальном времени
NestJS и WebSocket: чаты, уведомления и обновления в реальном времени
14