Фреймворк Vue.js

Опубликовано: 23.08.2018

Длительность: 6:02:45

Данный модуль посвящен практической части курса, где мы все знания, полученные в теории, будем применять на практике. Мы создадим SPA приложение, которое является Serverless – приложением, которое работает без серверной части. При этом у нас будет полностью рабочая база данных в облаке, на сервисе Firebase от Google. У нас там будет реализован хостинг, база данных, хранение картинок и регистрация с авторизацией пользователей.

В качестве дизайна нами будет выбран Material Design от Google. Наше приложение будет полностью адаптивным, то есть оно будет одинаково хорошо отображаться на любом экране. По смыслу это будет приложение, в котором будет возможность просматривать и создавать объявления о продаже чего-либо и прием заявок. Будет реализован личный кабинет, возможность загружать картинки, редактировать объявления и просматривать заявки.

VueNYC - Vue.js: the Progressive Framework - Evan You

Создание проекта В данном уроке мы начнем создавать наш проект и установим с помощью Vue CLI и Vuetify приложение на Material Design на webpack-сборке.

Обзор приложения В данном уроке мы рассмотрим все файлы и папки в новом приложении.

Создание тулбара Начиная с данного урока, мы начнем создавать каркас нашего приложения. Создадим верхнее навигационное меню и параллельно будем изучать, как работать с библиотекой Vuetify.

Фреймворк VUE JS. Полное руководство для современной веб-разработки. Курс (уроки) WebForMySelf

Добавление ссылок и адаптация В данном уроке мы создадим левое меню, которое будет заменять верхний тулбар, если не будет места, и выведем в два компонента ссылки всего приложения.

Регистрация роутов В данном уроке мы зарегистрируем все страницы нашего компонента, а также создадим их шаблоны.

Создание страницы логина Реализуем полностью функционал страницы логина с валидацией полей и отправкой формы. Мы будем выводить разные сообщения об ошибках в случае неправильно введенных данных, так что пользователь всегда сможет знать, что он делает не так.

Создание страницы регистрации В этом уроке мы сделаем всю функциональную часть для страницы регистрации с валидацией, сообщениях об ошибках и проверкой идентичности паролей.

Создание главной страницы Мы создадим главную домашнюю страницу нашего приложения. В нее будет входить адаптивный слайдер изображений и карточки разных объявлений, которые также будут выстраиваться в зависимости от ширины экрана.

Создание страницы заказов Мы создадим пока только визуальную часть страницы заказов, где в дальнейшем сможем отслеживать заказы, которые пришли от разных людей на ваши объявления.

Создание страницы формы Мы создадим визуальную часть страницы, в которой будем создавать новые объявления. Мы сделаем валидацию каждого из полей, но пока без загрузки изображений.

Создание страницы списка В этом уроке мы создадим макет страницы списка всех созданных вами объявлений.

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

Подключение Vuex В этом уроке мы подключим библиотеку Vuex для работы с данными и начнем перемещать все взаимодействия уже непосредственно в среду общего стора.

Добавление объявлений Мы реализуем возможность добавлять новые объявления уже через общую шину Vuex, где добавление будет работать в динамическом режиме. Также мы полностью перепишем все взаимодействие объявлений на Vuex.

Настройка firebase В данном уроке мы настроим firebase в наш проект и рассмотрим какие функции у нее есть.

Регистрация пользователей В этом уроке мы напишем функционал регистрации пользователей через сервер и базу данных, где уже будут сохраняться наши значения.

Логин пользователей В данном уроке мы реализуем возможность зарегистрированным пользователям выполнять вход в систему под своими данными.

Вывод ошибок Если у нас будут приходить какие-то ошибки с сервера, например, пароль неправильный, то у нас будет компонент, который будет отвечать за вывод этих данных в красивом формате.

Поддержание сессии пользователя Вы узнаете, как, используя firebase, можно узнать, что пользователь уже вошел в систему, и сделать ему авто авторизацию, чтобы он каждый раз не вписывал свои данные.

Защита роутов Мы защитим приватные страницы нашего приложения таким образом, что пользователи, которые не залогинились в систему, не смогут просматривать некоторые из них, например, создавать новые объявления или видеть список своих объявлений.

Создание объявления в firebase В этом уроке мы с помощью данных, введенных в форме на сайте, будем заносить новую запись в базу данных firebase и хранить уже ее на сервере.

Загрузка объявлений по умолчанию В этом уроке мы будет подгружать все объявления, что у нас есть в базе данных, и сразу показывать их пользователю.s

Загрузка изображений в firebase Мы реализуем возможность загрузки изображений. Будем обрабатывать входящий файл с помощью Vue и далее показывать его превью, а потом загружать изображение на удаленный сервер firebase storage и привязывать новую картинку к нужному объявлению.

Создание модального окна редактирования В этом уроке мы создадим адаптивное модальное окно, с помощью которого сможем редактировать наши объявления.

Редактирование объявления В этом уроке мы напишем функционал для редактирования объявления, где будем редактировать его на лету и сразу же в базе данных.

Создание окна покупки В этом уроке мы создадим адаптивное модальное окно, в котором будем делать заказ через интересующее нас объявление.

Создание и обработка заказов В этом уроке мы создадим новую таблицу в базе данных для записи заявок по покупке определенных объявлений.

Управление цветами В этом уроке вы узнаете, как с помощью простой конфигурации приложения полностью изменить его цветовую гамму за несколько кликов.

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

Заключение В данном заключительном уроке мы подведем итог того приложения, которое сделали.