仿肯德基宅急送App-Vue实战

前言
Vue学习有一段时间了，就想着用Vue来写个项目练练手，弄了半个月，到今天为止也算勉强能看了。
由于不知道怎么拿手机App的接口，并且KFC电脑端官网真的…一言难尽，所以项目所有数据都是我截图然后写在EasyMock里的，有需要的同学可以自取

首页 商品页 外卖页

技术栈
vue + webpack + vuex + axios

文件目录
│ App.vue
│ main.js
│
├─assets
│ logo.png
│
├─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组件封装好，之后使用的话引入一下就行了

复制代码
slot 插槽是一块模板，显示不显示，以及怎样显示由父组件来决定， 也就是把你想要滑动的区域插进去，剩下的内容都是官方文档定义好的，复制一遍就好了

固定头部

头部相对页面是固定的，这里我把头部都封装成了组件，在主页面引入头部，要滑动的部分放入上面定义好的scroll组件即可

侧边栏以及弹出框

起初我的想法是用router-link直接跳转，然后发现这样做页面会自带导航栏，于是我决定通过CSS动态绑定来实现它

.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;
}
复制代码
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)

整体代码

复制代码
外卖点餐

这里参考的是慕课网黄轶大大的课程，课程地址

商品展示

需要注意的是vue传递原生事件使用$event

复制代码
购物车

复制代码
操作按钮
这个模块主要通过三个小模块实现,删除按钮,显示数量块,增加按钮

复制代码
异步问题

{{item[0].name}}

复制代码 这里循环嵌套，整个DOM结构都是循环出来的，而better-scroll需要操作DOM结构，要实现横向滑动效果，难免会有异步问题。 可是无论我使用.then或者$nextTick都无法挂载better-scroll，查阅了大量文档也无法解决，最后只能使用原生的overflow-X，若是有解决办法，欢迎提出，感激不尽!

结语
总的来说这个项目还有很多不足，实现的功能也很少，后续我会继续改进。
如果这篇文章对你有帮助，不妨点个赞吧！
GitHub地址