Vue + Tailwind CSS | Создание приложения с нуля (Часть 4/5)
24Разработка реального проекта на 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-FhWbGlJPfZT3F2xzehT2sJJdx1y9Aby
👀 Другие курсы:
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 - 85. Универсальная функция для обновления объектов timeline items
08:40 - 86. Универсальная функция для обновления активностей
11:21 - 87. Рефакторинг прокрутки
18:39 - 88. Рефакторинг прокрутки к текущему часу
22:02 - 89. Роутинг с помощью динамического компонента
28:24 - 90. Хук onActivated
33:28 - 91. Базовый компонент иконок
42:05 - 92. Модуль иконок
50:59 - 93. CSS классы иконок
55:59 - 94. Шаблон страницы прогресса
01:01:33 - 95. Компонент ProgressItem
01:10:14 - 96. Заполнение шкалы прогресса
01:18:50 - 97. Цвет шкалы прогресса
01:24:28 - 98. Рефакторинг и исправление багов
01:33:55 - 99. Обновление прогресса времени
01:39:57 - 100. Изолирование глобальных модулей
01:48:24 - 101. Зависимости вычисляемого свойства
01:54:38 - 102. Составные функции (composables)
02:01:27 - 103. Рефакторинг компонента ActivitySecondsToComplete
02:07:46 - 104. Составная функция useStopwatch
02:12:11 - 105. Изолирование составной функции useStopwatch
02:21:24 - 106. Упрощение реализации секундомера
02:31:16 - 107. Пустое состояние страницы прогресса
02:35:13 - 108. Составная функция useTotalProgress
02:49:23 - 109. Улучшения шкалы прогресса
02:56:04 - 110. Индикатор временной шкалы
03:07:53 - 111. Изменение позиции индикатора временной шкалы
03:16:15 - 112. Оптимизация индикатора временной шкалы