Об этом проекте

# Обзор проекта Это пример крупного одностраничного приложения, написанного на vue2 + vuex, созданный на основе сценария сервиса доставки еды Ele.me. Согласно README, автор разрабатывал проект с нуля в свободное время на протяжении более двух месяцев. Проект позиционируется как полноценная практическая работа со сложной логикой, а не просто демо-версия. Автор отмечает, что проект не связан с курсом Ele.me на MoocCloud и предназначен исключительно для личной практики; для реальных заказов следует использовать официальный клиент. # Технологический стек vue2 + vuex + vue-router + webpack + ES6/7 + fetch + sass + flex + svg. В README указано, что из-за использования множества новых функций ES6/7 требуется версия Node 6.0 или выше. # Запуск проекта ``` git clone https://github.com/bailicangdu/vue2-elm.git cd vue2-elm npm install или yarn (рекомендуется) npm run dev ``` # Интерфейсные данные и сопутствующие проекты Все данные API поступают из сопутствующей серверной системы node-elm. Для полноценной разработки фронтенда и бэкенда одновременно можно скачать серверную систему, в этом случае команда запуска будет `npm run local` вместо `npm run dev`. Также предоставляется страница административного управления vue2-manage, построенная на element-ui (можно игнорировать при разработке только фронтенда). В README также упоминается, что для доступа к превью и API необходимо использовать HTTPS. # Реализованный функционал - Функции геолокации - Выбор города - Поиск адреса - Отображение списка ресторанов рядом с выбранным адресом - Поиск еды и ресторанов - Сортировка и фильтрация по расстоянию, продажам, рейтингу, фирменным блюдам, способу доставки и т.д. - Страница списка блюд ресторана - Функционал корзины - Страница отзывов о заведении - Страница с детальным описанием блюда - Страница с детальной информацией о ресторане - Вход и регистрация - Смена пароля - Личный кабинет - Отправка SMS и голосовая верификация - Функционал оформления заказа - Список заказов - Детали заказа - Загрузка приложения - Добавление, удаление и изменение адресов доставки - Информация об аккаунте - Сервисный центр - Красные конверты (бонусы) - Загрузка аватара Не реализованный функционал: оплата (в README отмечено как «я не смог этого сделать»). # Структура проекта Исходный код находится в директории src, которая включает: components (общие компоненты common, footer, header, такие как всплывающие окна, корзина, таймер обратного отсчета, анимация загрузки, звезды рейтинга, списки ресторанов), config (переключение окружения env.js, получение данных fetch.js, общие методы mUtils.js, преобразование единиц rem.js), images, page (директории страниц по бизнес-логике: balance, benefit, city, confirmOrder, download, find, food, forget, home, login, msite, order, points, profile, search, service, shop, vipcard), plugins, router, service (единое управление интерфейсами getData.js, временные данные tempdata), store (action, getters, index, modules, mutation-types, mutations для vuex) и style (common.scss, mixin.scss, swiper.min.css). В корневом каталоге также находятся build (конфигурация webpack), config (пути сборки), elm (файлы для деплоя), screenshots (скриншоты), App.vue, main.js, index.html и др. По статистике README, проект содержит 56 директорий и 203 файла. # Итоги автора и дальнейшие цели В README упоминается, что логика веб-страниц, связанных с деньгами, довольно сложна; из-за большого количества ресторанов и видов еды, а также сложного взаимодействия страниц, работа над корзиной и оформлением заказа была затруднительной. Поскольку дизайн и документация API отсутствовали, пришлось разбираться в процессе. Автор считает, что vuex незаменим при обработке сложной логики взаимодействия, и связка vue + vuex полностью подходит для создания крупных SPA-проектов. Дальнейшие цели включают: создание серверной системы на node.js для имитации платформы доставки, разработку нативного приложения для Android и iOS, а также (при наличии времени) версию для продавцов. # Демонстрация и лицензия В README предоставлена ссылка на онлайн-демо (рекомендуется просмотр в режиме мобильного устройства Chrome) и QR-код для мобильных устройств, а также скриншоты страниц списка магазинов, фильтрации, корзины, подтверждения заказа, поиска, входа и личного кабинета. Общение по проекту возможно через группу Gitter или Issues/PR. Лицензия — GPL.