vueschool.io
Изучите Vue.js и современные, передовые технологии от экспертов отрасли с нашими премиальными учебниками и курсами vue.js.
Создание Drag and Drop доски Trello с Vue.js
Build a Drag-and-Drop Trello Board with Vue.js
★5 (всего оценок - 10)
Продолжительность
1 ч 32 мин
Категория
VueКоличество уроков
16 Видео
Дата добавления
17 июл. 2023 г., 21:47
Язык
Английский
Дата обновления
29 апр. 2026 г., 18:27
Освойте создание интерактивных Kanban‑досок и научитесь использовать возможности Vue.js и библиотеки Vue Draggable для построения гибких интерфейсов управления задачами. Этот материал улучшает подачу курса и помогает читателю быстрее понять пользу и структуру обучения.
Что представляет собой курс
Курс посвящён созданию полноценной Drag and Drop доски наподобие Trello. В процессе вы шаг за шагом построите рабочее приложение, научитесь организовывать данные, управлять состоянием и реализовывать гибкое перетаскивание элементов.
- Создание и редактирование задач
- Добавление и настройка столбцов
- Перетаскивание задач и колонок
- Клонирование задач с помощью Alt/Option + Drag
- Настройка внешнего вида с Tailwind CSS
- Использование возможностей VueUse и TypeScript
Кому подойдёт этот курс
Материал будет полезен как начинающим разработчикам, так и тем, кто уже знаком с Vue.js, но хочет прокачать навыки построения сложных UI‑компонентов и управления интерфейсными данными.
- Новичкам, желающим освоить современные практики фронтенд‑разработки
- Разработчикам, стремящимся улучшить навыки работы с Vue 3
- Тем, кто хочет создавать удобные интерфейсы для управления задачами
Что вы изучите
Работа с Vue Draggable
Вы узнаете, как правильно подключить библиотеку, настроить списки и элементы для перетаскивания, управлять событиями и обрабатывать изменение их порядка.
Современная верстка с Tailwind CSS
Курс покажет, как использовать утилитарный подход Tailwind для создания аккуратного, адаптивного и гибко настраиваемого интерфейса.
Продвинутые возможности Vue и VueUse
Практические примеры помогут освоить реактивность, computed‑значения, слежение за состоянием, а также полезные хуки из VueUse.
Типизация с TypeScript
Вы научитесь добавлять статическую типизацию в свой проект на Vue, избегать ошибок и повышать читаемость кода.
Результат прохождения курса
В итоге вы создадите приложение, которое будет выглядеть современно и работать плавно. Полученные навыки можно использовать при создании:
- личных или командных планировщиков задач
- дашбордов и внутренних инструментов компании
- интерактивных widget‑систем
- обучающих проектов для портфолио
Преимущества обновлённой структуры статьи
- Четко разделенные блоки делают контент легче для восприятия
- Добавлены акценты на ценности курса и его практическую пользу
- Расширенный список навыков повышает привлекательность программы
- Улучшена логическая последовательность изложения
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
- Урок 1. 00:03:21What We Are Building
- Урок 2. 00:05:03Bootstrap the Project
- Урок 3. 00:05:19Create Simple Board and Task TS Types
- Урок 4. 00:08:37Provide the Board Data and Structure the HTML
- Урок 5. 00:06:24Style the Board with Tailwind CSS
- Урок 6. 00:08:01Create a Task Component and Style it with Tailwind CSS
- Урок 7. 00:06:01Sort the Columns with Vue Draggable
- Урок 8. 00:04:54Draggable Transition and Drag Handle
- Урок 9. 00:06:08Drag and Drop Tasks Between Columns
- Урок 10. 00:04:22Alt Drag to Clone Tasks
- Урок 11. 00:05:52Vue Draggable Sortable Classes
- Урок 12. 00:04:52Add a New Task
- Урок 13. 00:08:17Delete Tasks with Backspace
- Урок 14. 00:10:59Edit, Add, and Remove Columns
- Урок 15. 00:03:09Persist Tasks to Local Storage
- Урок 16. 00:01:23Course Conclusion
Автор - vueschool.io
Комментарии