阅读 106

饿了么手机版-VUE2,项目实战代码

github项目地址:github.com/tuihou12332…

项目说明

此项目没有使用常用的UI框架比如(muse-ui,mini-ui),而是遵循最简洁原则; 使用尽量少的css代码完成布局,主要是受 张鑫旭大神对于css架构的启发,css命名不应该遵循特性,更多的应该是功能,布局采用了flex弹性布局,使用css3动画,font-awesome字体图标,js插件主要使用swiper轮播插件

技术栈

vue2+vuex+vue-router+axios+webpack+ES6+less+flex

##项目运行

git clone https://github.com/tuihou123321/eleme-vue
cd eleme-vue
npm install
npm run dev
复制代码

效果展示:

演示地址: 二维码:

主要完成页面情况

  • [x] 选择城市
  • [x] 搜索地址
  • [x] 订单页面
  • [x] 个人中心
  • [x] 我的余额
  • [x] 我的优惠
  • [x] 我的积分
  • [x] 我的订单
  • [x] 饿了么会员卡
  • [x] 服务中心
  • [x] APP下载页面
  • [x] 登陆、注册
  • [ ] 上传头像
  • [ ] 商家页面
  • [ ] 购物车功能
  • [ ] 店铺评论页面
  • [ ] 单个食品详情页
  • [ ] 定位功能
  • [ ] 搜索商店
  • [ ] 外卖首页

主要技术点:

  • [x] 本地存储(localstorage)
  • [x] 对异步的处理(promise)
  • [x] vue过滤器filter的使用
  • [x] common.js模块化工具(promise)
  • [ ] 地理定位

界面展示:

文章分类
前端