Главная страницаКатегория vueVuetify: Создайте Приложение с Помощью Vue JS и Vuex - за 5 часов!

Vuetify: Создайте Приложение с Помощью Vue JS и Vuex - за 5 часов!

Name: Vuetify: Создайте Приложение с Помощью Vue JS и Vuex - за 5 часов!
Price: 13 USD
Rating: 5 (6 reviews)

Vuetify: Create an App with Vue JS & Vuex - in 5 Hours!

udemy

★5 (всего оценок - 6)

Продолжительность

5 ч 26 мин

Категория

Vue

Количество уроков

104 Видео

Дата добавления

21 апр. 2022 г., 09:50

Язык

Английский

Дата выхода

20 нояб. 2020 г., 02:00

Дата обновления

29 апр. 2026 г., 14:00

Освойте практическую разработку на Vue JS, используя мощь Vuetify и гибкость Vuex, чтобы создавать современное, удобное и полностью адаптивное приложение всего за несколько часов. Этот курс идеально подойдёт тем, кто хочет быстро перейти от теории к реальному, работающему проекту.

Что вы изучите в этом курсе

Курс подробно показывает, как шаг за шагом собрать функциональное приложение Todo, используя лучшие практики разработки интерфейсов на базе Vue и Vuetify.

Работа с компонентами Vuetify

Вы освоите интеграцию ключевых UI-элементов и узнаете, как использовать их в реальных сценариях.

Списки и текстовые поля
Диалоговые окна, меню и всплывающие элементы
Средства выбора даты и времени
Снэкбары и другие элементы уведомлений

Управление состоянием с Vuex

Вы научитесь правильно структурировать данные приложения с помощью Vuex:

работа с состоянием, мутациями и действиями;
создание и использование геттеров;
централизация бизнес-логики;
разделение приложения на дочерние компоненты.

Функциональность итогового приложения

В процессе разработки вы реализуете полноценную систему управления задачами.

Работа со списком задач

Создание новых задач
Редактирование названий задач
Добавление сроков выполнения
Удаление задач
Перетаскивание элементов для изменения порядка
Отметка задач как выполненных

Дополнительные функции

Вы добавите удобное расширяющееся поле поиска для фильтрации списка задач.

Маршрутизация и хранение данных

Настройка страниц

Вы настроите Vue Router и создадите удобную навигацию по приложению через панель ссылок.

Сохранение данных пользователя

Будете использовать IndexedDB и библиотеку Localbase, чтобы сохранять все данные в браузере пользователя, даже при обновлении или закрытии вкладки.

Отладка, тестирование и публикация

Курс включает практику тестирования приложения на реальных устройствах iOS и Android и обучение поиску и исправлению ошибок.

Деплой готового проекта

В финале курса вы научитесь разворачивать приложение на Netlify и получать готовый, доступный онлайн проект.

Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

Урок 1. 00:05:09
Introduction
Урок 2. 00:01:16
What is Vuetify?
Урок 3. 00:05:37
Editor & Software Setup
Урок 4. 00:00:53
Install Node.js & Vue CLI
Урок 5. 00:02:28
Create a Vue Project & Add Vuetify
Урок 6. 00:03:49
Folder & File Structure
Урок 7. 00:01:15
Install Vue Devtools on Chrome
Урок 8. 00:02:14
Vue.js Basics
Урок 9. 00:00:30
Clean up the Project
Урок 10. 00:01:05
Start with a Wireframe
Урок 11. 00:03:15
Setup the Drawer
Урок 12. 00:03:58
Setup Pages & Routes
Урок 13. 00:02:59
Get Pages Ready
Урок 14. 00:02:41
Header Styles
Урок 15. 00:02:06
Replace Image & Title
Урок 16. 00:02:27
Create a List of Tasks
Урок 17. 00:03:46
Add a Data Property for the Tasks
Урок 18. 00:06:56
Mark Task as Done
Урок 19. 00:02:52
Delete Task
Урок 20. 00:06:46
Add Task
Урок 21. 00:05:01
No Tasks Fallback
Урок 22. 00:06:07
What is Vuex?
Урок 23. 00:01:28
Move Tasks into Vuex Store
Урок 24. 00:05:00
Move addTask() Method into Vuex Store
Урок 25. 00:01:25
Move doneTask() Method into Vuex Store
Урок 26. 00:01:36
Move deleteTask() Method into Vuex Store
Урок 27. 00:00:59
Why Use Child Components?
Урок 28. 00:04:30
Create Add Task Field Child Component
Урок 29. 00:01:43
Create Task List Child Component
Урок 30. 00:03:20
Create Task Child Component
Урок 31. 00:02:40
Create “No Tasks” Child Component
Урок 32. 00:04:27
Create a Snackbar Component
Урок 33. 00:04:01
Show Snackbar when Task Added
Урок 34. 00:01:49
Show Snackbar when Task Deleted
Урок 35. 00:02:12
Make the Snackbar Text Dynamic
Урок 36. 00:03:12
Allow Snackbars to be Shown in Quick Succession
Урок 37. 00:01:53
Allow Snackbar to be Dismissed
Урок 38. 00:03:48
Show a “Prompt to Delete” Dialog
Урок 39. 00:02:33
Customize Dialog and Show on Delete Click
Урок 40. 00:02:07
Delete the Task when “Yes” Button Clicked
Урок 41. 00:01:29
Close the Dialog on “No” Click
Урок 42. 00:02:54
Add a Task Menu
Урок 43. 00:02:22
Add the Menu Items & Icons
Урок 44. 00:02:23
Handle Clicks
Урок 45. 00:03:33
Delete Task
Урок 46. 00:03:08
Create the Dialog
Урок 47. 00:01:44
Display Current Task Title in Dialog
Урок 48. 00:03:42
Save the Task
Урок 49. 00:01:46
Close the Dialog
Урок 50. 00:04:13
Field Validation
Урок 51. 00:04:01
Add Task Field Validation
Урок 52. 00:01:26
Show a Snackbar
Урок 53. 00:04:10
Setup the Data & Styles
Урок 54. 00:03:40
Filter the Date with date-fns
Урок 55. 00:03:38
Create the Dialog
Урок 56. 00:02:05
Show Dialog and Select Current Date
Урок 57. 00:04:24
Save Due Date & Close Dialog
Урок 58. 00:01:56
Add the Search Field
Урок 59. 00:03:55
Improve the Style
Урок 60. 00:01:32
Close the Search Field
Урок 61. 00:02:02
Open on Focus, Close on Blur
Урок 62. 00:02:04
Add Animation
Урок 63. 00:02:28
Only Close if Empty
Урок 64. 00:03:39
Fix Header Issues
Урок 65. 00:03:26
Hook it up to Vuex State
Урок 66. 00:05:22
Create a Getter to Filter the Tasks
Урок 67. 00:03:33
Create a Live Date & Time Component
Урок 68. 00:02:12
Show the Real Date
Урок 69. 00:02:19
Display Full Date & Time and Make it Live
Урок 70. 00:03:04
Add an Image
Урок 71. 00:01:51
Add an Avatar
Урок 72. 00:03:02
Add Name & Username
Урок 73. 00:03:52
Show the Drawer by Default on Tablet & Above
Урок 74. 00:01:46
Set a Base Page Title
Урок 75. 00:04:01
Add Page Name to Title on Route Change
Урок 76. 00:03:55
Environment Variable for App Title
Урок 77. 00:01:27
Use Environment Variable in HTML Page & Router
Урок 78. 00:02:03
Use the Environment Variable in Our Components (1)
Урок 79. 00:02:38
Use the Environment Variable in Our Components (2)
Урок 80. 00:02:55
Add the Sort Handle & Setup State
Урок 81. 00:05:19
Add Sort Menu Item & Done Sorting Button
Урок 82. 00:03:35
Install Vue Draggable
Урок 83. 00:03:54
Add Some Style
Урок 84. 00:04:04
Update the Vuex State
Урок 85. 00:02:55
Install Localbase
Урок 86. 00:04:42
Make Add Task Persist
Урок 87. 00:03:25
Get Tasks from Localbase on Load
Урок 88. 00:05:23
Make Done Task Persist
Урок 89. 00:02:01
Make Update Title Persist
Урок 90. 00:01:17
Make Due Date Persist
Урок 91. 00:01:23
Make Delete Task Persist
Урок 92. 00:05:10
Make Reordering Persist
Урок 93. 00:04:46
Testing on iOS
Урок 94. 00:04:17
Testing on Android
Урок 95. 00:08:33
Fix the Add Task Field
Урок 96. 00:02:56
Hide Add Task Field on About Page
Урок 97. 00:06:44
Fix Scrolling Issues
Урок 98. 00:01:44
Fix the Snackbars
Урок 99. 00:03:18
Disable Sorting when Searching
Урок 100. 00:01:36
Build for Production
Урок 101. 00:02:38
Setup a Local Git Repository
Урок 102. 00:01:55
Setup a Remote Repository on GitHub
Урок 103. 00:05:48
Deploy to Netlify
Урок 104. 00:01:26
Bonus Lecture: What Next? & Learn More from Me

Автор - udemy

udemy

Udemy — одна из самых масштабных платформ в мире, предлагающая обучающий контент от авторов и экспертов со всего света. Сервис объединяет миллионы учеников и десятки тысяч преподавателей, создающих курсы на самые разнообразные темы.Основные возможности платформыШирокий выбор тем: от программирования и дизайна до маркетинга, психологии и личной эффективности.Глобальное сообщество авторов: материалы создаются специалистами из разных стран.Удобный ф

+198