这篇文章主要介绍了Vue实战教程之仿肯德基宅急送App，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue学习有一段时间了，就想着用Vue来写个项目练练手，弄了半个月，到今天为止也算勉强能看了。
由于不知道怎么拿手机App的接口，并且KFC电脑端官网真的…一言难尽，所以项目所有数据都是我截图然后写在EasyMock里的，有需要的同学可以自取
首页 商品页外卖页
技术栈
vue + webpack + vuex + axios
文件目录
│ App.vue │ main.js │ ├─assets │ logo.png-600 │ ├─components │ │ cartcontrol.vue │ │ code.vue │ │ coupon.vue │ │ mineHeader.vue │ │ scroll.vue │ │ shopHeader.vue │ │ sidebar.vue │ │ submitBar.vue │ │ takeout.vue │ │ wallet.vue │ │ │ └─tabs │ Other.vue │ Outward.vue │ Selfhelp.vue │ Vgold.vue │ ├─pages │ ├─home │ │ home.vue │ │ │ ├─mine │ │ mine.vue │ │ │ ├─order │ │ order.vue │ │ │ └─shop │ shop.vue │ ├─router │ index.js │ └─vuex │ store.js │ types.js │ └─modules com.js cou.js take.js
效果展示
定义的组件
better-scroll
因为每个页面都需要滑动，所以一开始就把scroll组件封装好，之后使用的话引入一下就行了
<div> </div>
slot 插槽是一块模板，显示不显示，以及怎样显示由父组件来决定， 也就是把你想要滑动的区域插进去，剩下的内容都是官方文档定义好的，复制一遍就好了
固定头部
头部相对页面是固定的，这里我把头部都封装成了组件，在主页面引入头部，要滑动的部分放入上面定义好的scroll组件即可
侧边栏以及弹出框
起初我的想法是用router-link直接跳转，然后发现这样做页面会自带导航栏，于是我决定通过CSS动态绑定来实现它
<div class="sidebar"> <div class="sidebar-con"> <div class="navbar_left"> </div></div></div>
样式用的是Vant UI组件，最外面绑定了一个动态样式showbar，然后把整体的初始位置设在屏幕之外，当传入参数为true时再回来，用Vuex管理它的状态
.sidebar-con { position: absolute; top: 0; left: -400px; transform: translateZ(0); opacity: 0; width: 100%; z-index: 1002; height: 10<b>本文来源gao@dai!ma.com搞$代^码!网7</b>0%; overflow: auto; transition: all 0.3s ease; } .showbar { transform: translateX(400px); opacity: 1; }
Vuex状态管理
const state = { showSidebar: false } const mutations = { [types.COM_SHOW_SIDE_BAR] (state, status) { state.showSidebar = status } } const actions = { setShowSidebar ({commit}, status) { commit(types.COM_SHOW_SIDE_BAR, status) } } const getters = { showSidebar: state => state.showSidebar }
用mapGetter拿到对象，然后传给computed属性，对象可以直接使用
computed: { ...mapGetters([ 'showSidebar' ]) },
当需要显示的时候使用dispatch将参数传入 this.$store.dispatch('setShowSidebar', true)
整体代码
<div class="sidebar"> <div class="sidebar-con"> <div class="navbar_left"> </div></div></div> .sidebar-con { position: absolute; top: 0; left: -400px; transform: translateZ(0); opacity: 0; width: 100%; z-index: 1002; height: 100%; overflow: auto; transition: all 0.3s ease; } .showbar { transform: translateX(400px); opacity: 1; } .navbar_left { background-color: #da3a35; } .navbar_left img { width: 25px; height: 25px; margin-left: 3vw; margin-top: 5px; }
外卖点餐
这里参考的是慕课网黄奕大大的课程，课程地址
商品展示
<div class="takeout"> <div class="goods"> <div class="header"> <div class="navbar_left"> </div><div class="appointment"> <div class="btn"> <div class="yy">预约</div><div class="Kcoffee">K咖啡</div></div><div class="bag"> <div class="bagtext"> 卡包<p>3</p>张 </div></div></div></div><div class="goodList"> <div class="menu-wrapper"> <ul> <li class="menu-item"> <span class="text border-1px"> {{item.name}} </span></li></ul></div><div class="foods-wrapper"> <ul> <li class="food-list"> <h1 class="title">{{item.name}}</h1><ul> <li class="food-item border-1px"> <div class="icon"> </div><div class="content"> <h2 class="name">{{food.name}}</h2><div class="price"> <span class="now">￥{{food.price}}</span></div><div class="cartcontrol-wrapper"> </div></div></li></ul></li></ul></div></div></div></div>
这里通过currentIndex和index做对比，来确认是否添加current类，通过添加current类来实现当前页面的区域的样式变化，他们之间的对比关系也就是menu区域和foods区域的显示区域的对比关系
需要注意的是vue传递原生事件使用$event
购物车
<div class="submitBar"> <div class="shoppingCart"> <span> 0">{{selectFoods.length}}</span></div> <div class="shopcart-list"> <div class="list-header"> <h1 class="title">购物车</h1><span class="empty">清空</span></div><div class="list-content"> <ul> <li class="food"> <span class="name">{{food.name}}</span><div class="price"> <span>￥{{food.price*food.count}}</span></div><div class="cartcontrol-wrapper"> </div></li></ul></div></div> <div class="list-mask"></div></div>
购物车列表的显示和隐藏以及清空按钮是通过数据fold来决定的，购物车列表是通过计算属性listshow来实现，清空按钮也是通过设置count属性来实现，这样都达到了不用操作dom就可以改变dom行为的效果。
操作按钮
这个模块主要通过三个小模块实现,删除按钮,显示数量块,增加按钮
<div class="cartcontrol"> <div class="cart-decrease"> 0" @click="decreaseCart"> <div class="inner"> </div></div><div class="cart-count"> 0">{{food.count}}</div><div class="cart-add"> </div></div>
addCart以及decreaseCart方法，默认会传入event原生dom事件，food数据是从父组件传入的，所以对这个数据的修改，也能够反应到父组件，也因为购物车的数据也是从父组件传入的，使用同一个food数据，从而关联到购物车的购买数量统计。
异步问题
<div class="various"> <div class="title"> <div class="strip"></div><p>{{item[0].name}}</p><div class="strip"></div></div><div class="various_img"> <div class="various_title"> </div><div class="index"> <div class="various_list"> <div class="various_box"> </div></div></div></div></div>
这里循环嵌套，整个DOM结构都是循环出来的，而better-scroll需要操作DOM结构，要实现横向滑动效果，难免会有异步问题。
可是无论我使用.then或者$nextTick都无法挂载better-scroll，查阅了大量文档也无法解决，最后只能使用原生的overflow-X，若是有解决办法，欢迎提出，感激不尽!
结语
总的来说这个项目还有很多不足，实现的功能也很少，后续我会继续改进。
如果这篇文章对你有帮助，不妨点个赞吧！
GitHub地址
总结
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
以上就是Vue实战教程之仿肯德基宅急送App的详细内容，更多请关注gaodaima搞代码网其它相关文章！
转载请注明原文链接：Vue实战教程之仿肯德基宅急送App
