Vue + Tailwind CSS | Создание приложения с нуля (Часть 2/5)
15Разработка реального проекта на 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 - 29. Типы кнопок
06:43 - 30. Скрипт инициализации модуля компонента
09:56 - 31. Генерация опций выпадающего списка активностей
17:54 - 32. Удаление активностей
25:31 - 33. Форма создания активностей
30:16 - 34. Создание активностей
37:22 - 35. Компонент формы создания активности
41:20 - 36. Директива v-model
46:27 - 37. Утилита nextTick
50:29 - 38. Альтернативный компонент вместо пустого списка активностей
55:50 - 39. Функция для генерации активностей
01:02:53 - 40. Исправление ошибок валидации активностей
01:07:42 - 41. Рефакторинг процесса создания активностей
01:12:03 - 42. Рефакторинг компонента выпадающего списка
01:23:57 - 43. Выбор активности для каждого часа дня
01:36:10 - 44. Сброс id активностей при удалении
01:40:50 - 45. Сброс активностей
01:45:23 - 46. Выбор времени для активностей
01:56:02 - 47. Рефакторинг процесса выбора активностей
02:03:49 - 48. Генерация списка опций временных периодов
02:10:44 - 49. Разметка секундомера
02:15:34 - 50. Компонент секундомера
02:22:52 - 51. Выбор активностей случайным образом
02:29:04 - 52. Запуск / остановка / сброс секундомера
02:37:34 - 53. Отключение кнопок секундомера
02:41:45 - 54. Прокрутка к текущему часу
02:50:12 - 55. Улучшение прокрутки к текущему часу
02:58:32 - 56. Прокрутка к определенному часу