Vue + Tailwind CSS | Создание приложения с нуля (Часть 1/5)
100Разработка реального проекта на Vue с использованием Composition API и последующим развертыванием на production.
🌐 Финальное приложение: https://ontrack.igorbabko.com
🧪 Репозиторий: https://github.com/igorbabko/ontrack
🧪 Исходные коды для каждого урока: https://github.com/igorbabko/ontrack/commits/main
🪄 Мои настройки VS Code: https://www.youtube.com/playlist?list=PL-FhWbGlJPfZmjF9sLoSVAF4-9R1cSXxo
🧪 Репозиторий с настройками: https://github.com/igorbabko/vscode-setup
🎨 Тема VS Code: https://marketplace.visualstudio.com/items?itemName=JoseMurilloc.aura-spirit-dracula
🎨 Иконки VS Code: https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
✍️ Шрифт: https://philpl.gumroad.com/l/dank-mono
🍿 Весь плейлист: https://www.youtube.com/playlist?list=PL-FhWbGlJPfaCm9Qx7G9wQqtt2_yBT92V
👀 Другие курсы:
VS Code Продуктивность | Мои Горячие Клавиши: https://www.youtube.com/playlist?list=PL-FhWbGlJPfajSvoq33fEZq4PBuXA25g-
Vite - сборщик нового поколения: https://www.youtube.com/playlist?list=PL-FhWbGlJPfZg649Ukk5vPa4nUjHhQ6o3
Vue Composition API с нуля: https://www.youtube.com/playlist?list=PL-FhWbGlJPfaCm9Qx7G9wQqtt2_yBT92V
Кастомная настройка Tailwind CSS: https://www.youtube.com/playlist?list=PL-FhWbGlJPfbF0sFMBNwVlzQNGCsASYQw
Tailwind CSS + JIT компилятор: https://www.youtube.com/playlist?list=PL-FhWbGlJPfY5OQNvcOU9nWvxZgooW-FA
Лендинг Tesla на Tailwind CSS: https://www.youtube.com/playlist?list=PL-FhWbGlJPfbmPBYt_sUH3IbBddvrx506
Верстка YouTube на Tailwind CSS: https://www.youtube.com/watch?v=LdbHAZiZexU&list=PL-FhWbGlJPfa2QOklK-4ED0gZFg6gbmyE
YouTube клон на Vue 3 и Tailwind CSS: https://www.youtube.com/playlist?list=PL-FhWbGlJPfbiWrsWnvUy8HzbG85K722U
Настройка VS Code: https://www.youtube.com/playlist?list=PL-FhWbGlJPfZKlFiR0i3nLVgUMPg8Z4t-
#vue #vuejs #vue3 #tailwindcss #tailwind
🕛 Тайм-коды:
00:00 - 1. Установка Vite / Vue / Tailwind CSS
10:19 - 2. Шапка
19:31 - 3. Навигация
27:14 - 4. Директива v-for
33:42 - 5. Динамический компонент
36:51 - 6. Компоненты шапки и навигации
43:02 - 7. Наследование атрибутов
48:56 - 8. Подсветка активного пункта меню
57:46 - 9. Нормализация хеша страницы
01:03:17 - 10. Компоненты страниц
01:14:21 - 11. Кликабельные ссылки в шапке
01:20:36 - 12. Модуль с функциями
01:23:14 - 13. Разметка временной шкалы
01:27:06 - 14. Генерация данных временной шкалы
01:31:02 - 15. Компонент TimelineItem
01:36:27 - 16. Выпадающие списки
01:44:40 - 17. Базовые компоненты кнопки и выпадающего списка
01:52:37 - 18. Конфигурация внешних свойств (props)
01:57:45 - 19. Валидация внешних свойств (props)
02:05:54 - 20. Переиспользование валидаторов
02:09:34 - 21. Контроль состояния выпадающего списка
02:17:43 - 22. Валидаторы массивов объектов
02:21:59 - 23. Синхронизация состояния выпадающего списка
02:30:07 - 24. Вычисляемые свойства (computed properties)
02:42:46 - 25. Компонент для отображения часа
02:47:52 - 26. Страница активностей
02:54:40 - 27. Компонент активности
02:59:36 - 28. Валидация активностей