Слияние кода завершено, страница обновится автоматически
Когда я только начинал изучать Vue, я искал в интернете исходные коды реальных проектов для практики. Большинство из них были простыми демо, которые не очень помогали в изучении Vue. Некоторые другие проекты были похожи на музыкальные проигрыватели и имели ограниченную сложность взаимодействия. Но в нашей работе мы часто сталкиваемся с проектами, включающими функции корзины покупок. Такие проекты требуют высокой точности логики и сложного взаимодействия между страницами, а также включают такие функции, как регистрация, вход в систему и управление пользовательской информацией. Это может быть довольно сложно.
Поскольку никто ещё не использовал Vue для создания такого проекта, я решил попробовать сделать это сам. Я думаю, что мой опыт может быть полезен другим.
Этот функциональный проект очень практичен, но также может показаться скучным. Он не так привлекателен, как музыкальный проигрыватель. Однако я обнаружил, что Meituan (饿了么) является хорошим источником материалов. Во-первых, он достаточно сложен, а во-вторых, платформа доставки еды более сложна, чем обычный магазин. Кроме того, разнообразие продуктов питания делает его интересным для пользователей.
Почему именно Meituan, а не Meipai (美团)? Ответ прост: цветовая гамма и дизайн Meituan более привлекательны, и они кажутся более удобными.
Проект включает 45 страниц, включая регистрацию, вход, отображение товаров, корзину покупок, оформление заказа и т. д. Это полный цикл. Даже официальные одностраничные проекты крупных компаний не настолько сложны. Если этот проект можно успешно реализовать, то большинство других одностраничных приложений компаний также не будут представлять сложности, даже если они более сложные.
Я начал работать над проектом в свободное время, и процесс занял больше года.
Кроме того, этот проект не имеет никакого отношения к видеокурсу Meituan. Проект, упомянутый в видеокурсе, имеет только одну страницу, в то время как я создал этот проект после изучения официальной документации Vue без использования кода других людей. Пожалуйста, не путайте их.
Примечание 1: Этот проект является моей личной попыткой. Для оформления заказа рекомендуется использовать официальный клиент Meituan.
Примечание 2: Для доступа к проекту и интерфейсу требуется использовать протокол HTTPS!
Vue2 + Vuex + Vue-router + Webpack + ES6/7 + fetch + sass + flex + svg
git clone https://github.com/bailicangdu/vue2-elm.git
cd vue2-elm
npm install или yarn(рекомендуется)
npm run dev
Все данные интерфейса этого проекта поступают из соответствующего бэкэнд-приложения адрес бэкэнд-проекта.
Если вы хотите одновременно разрабатывать интерфейс и бэкэнд, вы можете загрузить бэкэнд.
В этом случае команда запуска для этого проекта будет npm run local, а не npm run dev.
Мы также предоставляем административную панель на основе Element-UI адрес панели управления.
Если вам нужно только разработать интерфейс, пожалуйста, игнорируйте предыдущие предложения.
Если вам нравится этот проект, вы можете поставить «звезду» в правом верхнем углу, чтобы поддержать его. ^_^
Или вы можете подписаться на него, и я буду продолжать открывать новые интересные проекты.
Среда разработки: macOS 10.12.3 Chrome 56 Node.js 6.10.0
Большое спасибо @bailichen, @iceRao, за то, что нашли время помочь мне завершить этот проект. Спасибо! 🌹
Пожалуйста, сообщайте о любых проблемах напрямую через Issues или предлагайте улучшения через PR. 👍
Рекомендую посмотреть открытый проект React + Redux, который может заинтересовать разработчиков React. Адрес здесь
Ещё один простой проект Vue2 + Vuex, который идеально подходит для начинающих. Адрес здесь
Чтобы просмотреть демонстрацию, нажмите здесь (рекомендуется использовать мобильный режим Chrome для предварительного просмотра).
Обычно веб-сайты, связанные с деньгами, имеют сложную логику, особенно платформы с открытым доступом, такие как Meituan, где существует множество видов продуктов и услуг, а взаимодействие между страницами сложное. При разработке функций корзины и оформления заказа возникает множество проблем с данными и логикой, а отсутствие документации по дизайну и API затрудняет работу.
Благодаря лёгкому весу фреймворка Vue, он хорошо подходит для небольших проектов. В больших одностраничных приложениях, таких как Meituan, Vuex играет важную роль. Поэтому можно сказать, что Vue + Vuex отлично подходят для разработки сложных одностраничных проектов.
На данный момент проект охватывает все этапы от входа в систему до оформления заказа, от домашней страницы до поиска, списка магазинов, корзины, оформления заказа, списка заказов, личного кабинета и центра обслуживания клиентов. Не только улучшилось понимание Vue, но и появилась большая помощь в управлении крупными проектами в будущем. Разработка реального проекта значительно повышает уровень навыков.
Изначально проект задумывался как небольшой проект для практики, но постепенно он становился всё более сложным. Хотя иногда возникали сомнения в ценности проекта, автор считает, что это было стоящее усилие.
Проект завершён и включает 45 страниц.
Создать бэкенд-систему на Node.js, имитирующую платформу доставки еды. Адрес здесь
Разработать мобильные приложения для Android и iOS. Адрес здесь
Если позволит время, планируется создать версию для продавцов.
Таким образом, цель автора — создать полную экосистему, охватывающую фронт- и бэкенд, а также мобильные приложения для iOS и Android.
.. .С нетерпением ждём результатов. Структура проекта:
points
│ │ │ ├── children
│ │ │ │ └── detail.vue // 积分说明
│ │ │ └── points.vue // 秖分页
│ │ ├── profile
│ │ │ ├── children
│ │ │ │ ├── children
│ │ │ │ │ ├── address.vue // 地址
│ │ │ │ │ └── children
│ │ │ │ │ ├── add.vue // 新增地址
│ │ │ │ │ └── children
│ │ │ │ │ └── addDetail.vue // 搜索地址
│ │ │ │ ├── info.vue // 帐户信息
│ │ │ │ └── setusername.vue // 重置用户名
│ │ │ └── profile.vue // 个人中心
│ │ ├── search
│ │ │ └── search.vue // 搜索页
│ │ ├── service
│ │ │ ├── children
│ │ │ │ └── questionDetail.vue // 问题详情
│ │ │ └── service.vue // 服务中心
│ │ ├── shop
│ │ │ ├── children
│ │ │ │ ├── children
│ │ │ │ │ └── shopSafe.vue // 商铺认证信息页
│ │ │ │ ├── foodDetail.vue // 商铺信息页
│ │ │ │ └── shopDetail.vue // 单个商铺信息页
│ │ │ └── shop.vue // 商铺筛选页
│ │ └── vipcard
│ │ ├── children
│ │ │ ├── invoiceRecord.vue // 购买记录
│ │ │ ├── useCart.vue // 使用卡号购买
│ │ │ └── vipDescription.vue // 会员说明
│ │ └── vipcard.vue // 会员卡办理页
│ ├── plugins // 引用的插件
│ ├── router
│ │ └── router.js // 路由配置
│ ├── service // 数据交互统一调配
│ │ ├── getData.js // 获取数据的统一调配文件，对接口进行统一管理
│ │ └── tempdata // 开发阶段的临时数据
│ ├── store // vuex的状态管理
│ │ ├── action.js // 配置actions
│ │ ├── getters.js // 配置getters
│ │ ├── index.js // 引用vuex，创建store
│ │ ├── modules // store模块
│ │ ├── mutation-types.js // 定义常量muations名
│ │ └── mutations.js // 配置mutations
│ └── style
│ ├── common.scss // 公共样式文件
│ ├── mixin.scss // 样式配置文件
│ └── swiper.min.css
│ ├── App.vue // 页面入口文件
│ ├── main.js // 程序入口文件，加载各种公共组件
├── favicon.ico // 图标
├── index.html // 入口html文件
.
56 directories, 203 files
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )