Vue + Tailwind CSS | Создание приложения с нуля (Часть 3/5)
19Разработка реального проекта на 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 - 57. Макрос defineExpose
09:36 - 58. Компонент для отображения оставшегося времени
15:29 - 59. Вычисление общего количества замеренного времени
28:48 - 60. Улучшение компонента оставшегося времени
35:11 - 61. Зависимость оставшегося времени активности от секундомера
44:37 - 62. Provide / Inject
54:20 - 63. Доступ к массиву TimelineItems через provide / inject
59:49 - 64. Доступ к массиву активностей через provide / inject
01:06:11 - 65. Доступ к массиву опций временных интервалов через provide / inject
01:09:38 - 66. Доступ к функции setTimelineItemActivity через provide / inject
01:16:42 - 67. Доступ к функции setActivitySecondsToComplete через provide/inject
01:23:35 - 68. Доступ к функции createActivity через provide / inject
01:27:29 - 69. Доступ к функции deleteActivity через provide / inject
01:31:07 - 70. Роутер
01:36:51 - 71. Рефакторинг функционала роутинга
01:45:13 - 72. Рефакторинг роутинга
01:49:23 - 73. Рефакторинг компонента NavItem
01:54:34 - 74. Рефакторинг структуры данных NAV_ITEMS
02:00:49 - 75. Символьные ключи для provide / inject
02:09:02 - 76. Общий рефакторинг
02:15:03 - 77. Модуль активностей
02:19:37 - 78. Сохранение реактивности при использовании provide / inject
02:23:28 - 79. Модуль timeline-items
02:26:52 - 80. Исправление функции удаления активностей
02:31:40 - 81. Рефакторинг модуля активностей
02:33:43 - 82. Рефакторинг модуля timeline items
02:39:57 - 83. Использование глобальных хранилищ вместо provide / inject
02:47:09 - 84. Синхронизация времени после удаления активности