/vue2-elm

基于 vue2 + vue-router2 + vuex + webpack + ES6 + fetch + less 重写 饿了么 webapp

Primary LanguageJavaScript

前言

vue2的发布后自己也研究了一段时间,奈何公司的技术栈是以react为主,没有机会好好利用vue2去做一个完整的项目。虽然写了几个demo,但和写一个完整的项目还是有很大差别的。于是自己想着用空余的时间写一个项目,选择了饿了么web端也只是因为经常用,熟悉它的布局。

首先遇到的问题当然是跨域,我们启动本地服务器是获取不到官网数据的,这是跨域的。当然解决的方法很多,jsonp,nginx反向代理,webpack-dev-server的proxy。这里我用的是 http-proxy-middleware 其实它们的原理是一样的。

注:此项目纯属个人瞎搞,正常下单请选择饿了么官方客户端。

技术栈

vue2 + vue-rotuer + vuex + webpack + ES6 + fetch + less + http-proxy-middleware反向代理

目标功能

  • 定位功能
  • 选择城市
  • 搜索附近餐馆或食品
  • 附近商家列表展示
  • 根据距离、销量、评分、特色菜等进行排序和筛选
  • 单个餐馆的详细信息展示,商品列表,优惠活动
  • 餐馆及单个商品的评价列表展示、筛选
  • 购物车功能
  • 登陆
  • 注册
  • 个人中心
  • 帐户信息
  • 服务中心
  • 订单列表
  • 下单功能
  • 付款(很难实现)

说明:因为并不是elm官方,而且因为要开代理,必须在pc端打开,所以预计最多只能做到下单这一步,下单成功后可以在手机客户端查看并付款。

项目运行

git clone https://github.com/bailicangdu/elm.git

cd elm

npm install

编译环境

npm run dev

线上版本

npm run build