Vue 3: кабинет сотрудников «Команда»
«Команда» — кабинет вымышленных сотрудников Анны, Павла и Ирины. Сначала вы получите локальный интерфейс и изучите собственные механизмы Vue: шаблон, ref, computed, ключи, props, events, слоты и composables. Затем свяжете экраны маршрутизатором, выделите общий источник, проверите внешний JSON и построите редактор с отдельной основой версии. Это самостоятельная Vue-серия; знакомство с React не требуется.
Предпосылки: HTML, CSS, массивы, объекты, модули и асинхронный JavaScript. Профиль документации на 11 октября 2026 года: Vue 3.5.43, Vue Router 5.4.0, Vite 8.3.4, plugin-vue 6.0.10, Node от 22.12.0. Официальные выпуски прочитаны, зависимости не устанавливались. В архиве нет lockfile и серверной реализации API.
Последовательность проекта
| Урок | Новый результат |
|---|---|
| 1. Компонент Vue и исходные данные команды | Показать трёх участников в одном SFC. |
| 2. Реактивное состояние и обновление интерфейса | Менять занятость сотрудника через ref. |
| 3. Вычисляемый список и поиск сотрудников | Получать отфильтрованный список без второго хранилища. |
| 4. Ключи списка и независимость карточек | Сохранить идентичность строк при изменении порядка. |
| 5. Свойства и события карточки сотрудника | Разделить родительское состояние и намерение дочернего компонента. |
| 6. Форма добавления участника и проверка полей | Передавать проверенный черновик без изменения props. |
| 7. Слоты панели и повторное оформление | Собрать панель с независимым содержимым. |
| 8. Composition API и локальный composable | Выделить независимое состояние списка в функцию. |
| 9. Наблюдатель и сохранение фильтра | Сохранять только настройки и корректно читать storage. |
| 10. Vue Router и адрес карточки участника | Связать экран списка и карточку с маршрутом. |
| 11. Общее состояние между маршрутами | Получать одну коллекцию из двух экранов. |
| 12. Контракт API и проверка ответа | Отделить транспорт от модели участника. |
| 13. Загрузка и отмена устаревшего запроса | Связать результат только с актуальным запросом. |
| 14. Сохранение участника и ошибки формы | Сохранять изменение после подтверждения сервером. |
| 15. Версия записи и конфликт редактирования | Объяснить 409 и сохранить черновик при конфликте. |
| 16. Передача Vue-проекта и границы кабинета | Собрать договор запуска, доступа и проверки результата. |
Исходники и самостоятельное воспроизведение
Скачать исходники всех шестнадцати шагов. Сначала прочитайте base/README.md, затем наложите полные файлы lesson-01 … lesson-NN в порядке выбранной главы. Служебные README и snippets не копируются в приложение. Для показанных фрагментов архив содержит полные итоговые составные файлы. Последняя глава передаёт договор дальнейшей подготовки.
example_execution = not_run: код, SQL, HTTP, миграции, приложения и очереди не запускались; пакеты не устанавливались. Описанные изменения и ответы являются ожидаемыми. Проверка этой работы ограничена чтением документации и авторской инвентаризацией файлов, слов и соответствия листингов.
Границы результата
Состояния 01–11 используют вымышленные локальные данные. После HTTP-перехода нужен same-origin сервер CONTRACT.md: чтение ограничивается текущим пользователем, запись проверяет сессию, CSRF, право и версию атомарно. Фронтенд не выдаёт отправленное намерение за подтверждённое сохранение. Отказ и 409 сохраняют черновик, а явная замена получает актуальную основу. Оптимистическая запись, SSR, создание реальных аккаунтов и приглашения не реализованы.
Загрузка имеет отдельного владельца App, отменяет прежнее чтение и допускает результат только актуального поколения. После подтверждённого PATCH прежняя загрузка также теряет право заменить новое состояние. Основу редактора нельзя молча обновлять новой props-версией: пользователь должен понимать, по каким данным начал изменение.