Перенос Vue проекта на TypeScript
36Пошаговая конвертация Vue приложения из JavaScript в TypeScript с нуля.
🧪 Репозиторий: https://github.com/igorbabko/vue-typescript-time-tracker
🧪 Исходные коды для каждого урока: https://github.com/igorbabko/vue-typescript-time-tracker/commits/main/
🛠️ Разработка Vue приложения: https://www.youtube.com/playlist?list=PL-FhWbGlJPfaCm9Qx7G9wQqtt2_yBT92V
🪄 Мои настройки VS Code: https://www.youtube.com/playlist?list=PL-FhWbGlJPfZmjF9sLoSVAF4-9R1cSXxo
🧪 Репозиторий с настройками: https://github.com/igorbabko/vscode-setup
🧪 Gist с настройками: https://gist.github.com/igorbabko/f78eaa07fb2c773d9d9d77e95268eb25
🧪 Gist с комбинациями клавиш: https://gist.github.com/igorbabko/ff9480733247abbb21274467ef6f23e2
🎨 Тема 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://www.youtube.com/playlist?list=PL-FhWbGlJPfaCRokstffYMwI-jkvhF15o
👀 Другие курсы:
Vite - сборщик нового поколения: https://www.youtube.com/playlist?list=PL-FhWbGlJPfZg649Ukk5vPa4nUjHhQ6o3
Настройка VS Code: https://www.youtube.com/playlist?list=PL-FhWbGlJPfZKlFiR0i3nLVgUMPg8Z4t-
VS Code Продуктивность | Мои Горячие Клавиши: https://www.youtube.com/playlist?list=PL-FhWbGlJPfajSvoq33fEZq4PBuXA25g-
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
#vue #typescript #tailwindcss #vue3 #tailwind
🕛 Тайм-коды:
00:00 - 1. Подготовка проекта
05:37 - 2. Настройка редактора
13:30 - 3. Настройка TypeScript
22:29 - 4. Настройка ESLint
28:43 - 5. Сортировка Tailwind CSS классов
34:55 - 6. Конвертация модуля активностей
45:16 - 7. Конвертация модуля констант
49:23 - 8. Конвертация модуля функций
55:24 - 9. Конвертация модуля роутера
01:02:51 - 10. Конвертация модуля хранилища
01:06:22 - 11. Конвертация модуля времени
01:09:56 - 12. Конвертация модуля timeline items
01:21:43 - 13. Конвертация модуля timeline item timer
01:26:11 - 14. Конвертация модуля валидации
01:28:55 - 15. Перемещение типов в файл types.ts
01:32:31 - 16. Обобщенный тип (generics)
01:38:20 - 17. Замена типов any
01:42:22 - 18. Типизация составных функций (composables)
01:46:04 - 19. Типизация компонента ActivityItem
01:50:22 - 20. Типизация компонента BaseButton
01:56:30 - 21. Типизация компонента BaseSelect
02:06:32 - 22. Обобщенный компонент
02:12:41 - 23. Типизация компонента NavItem
02:15:34 - 24. Типизация компонентов
02:19:42 - 25. Типизация компонента TheTimelineIndicator
02:25:50 - 26. Типизация компонента TimelineHour
02:30:00 - 27. Типизация оставшихся компонентов
02:33:40 - 28. Типизация модуля иконок
02:41:39 - 29. Удаление модуля валидации
02:45:01 - 30. Перечисление PageName
02:48:43 - 31. Перечисление ButtonType
02:52:54 - 32. Замена типа any
02:59:25 - 33. Конвертация файла vite.config.ts