Vue + Tailwind CSS | Создание приложения с нуля (Часть 5/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 - 113. Составная функция useSecondsSinceMidnight
05:38 - 114. Глобальный модуль time
10:25 - 115. Реактивный объект даты
17:39 - 116. Зависимость компонентов от текущего времени
25:16 - 117. Улучшение компонента пункта навигации
31:43 - 118. Сохранение состояния приложения в локальном хранилище
42:15 - 119. Загрузка состояния приложения из локального хранилища
48:09 - 120. Устаревшее состояние приложения
57:09 - 121. Рефакторинг модуля storage
01:02:04 - 122. Возобновление состояния секундомера
01:07:21 - 123. Глобальный таймер для запуска секундомера при старте приложения
01:17:37 - 124. Синхронизация секунд простоя
01:24:44 - 125. Ограничение количества замеренных секунд
01:33:11 - 126. Рефакторинг
01:40:08 - 127. Глобальный рефакторинг логики секундомера
01:58:01 - 128. Модуль глобального таймера
02:00:17 - 129. Запуск и остановка секундомера при переключении между вкладками
02:07:55 - 130. Предотвращение сброса выбранных активностей
02:14:22 - 131. Инициализация состояния приложения
02:20:12 - 132. Рефакторинг модуля timeline items
02:25:16 - 133. Рефакторинг логики секундомера
02:29:55 - 134. Чистка проекта
02:34:18 - 135. Обновление реактивной даты на всех страницах
02:39:47 - 136. Сброс замеренного времени после полночи
02:46:06 - 137. Деплоймент