package.json 封装 vue模块_仿肯德基宅急送App-Vue实战

技术栈

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动态绑定来实现它

样式用的是Vant UI组件，最外面绑定了一个动态样式showbar，然后把整体的初始位置设在屏幕之外，当传入参数为true时再回来，用Vuex管理它的状态

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)

外卖点餐

商品展示

这里通过currentIndex和index做对比，来确认是否添加current类，通过添加current类来实现当前页面的区域的样式变化，他们之间的对比关系也就是menu区域和foods区域的显示区域的对比关系。

购物车

购物车列表的显示和隐藏以及清空按钮是通过数据fold来决定的，购物车列表是通过计算属性listshow来实现，清空按钮也是通过设置count属性来实现，这样都达到了不用操作dom就可以改变dom行为的效果。

操作按钮

这个模块主要通过三个小模块实现,删除按钮,显示数量块,增加按钮。

addCart以及decreaseCart方法，默认会传入event原生dom事件，food数据是从父组件传入的，所以对这个数据的修改，也能够反应到父组件，也因为购物车的数据也是从父组件传入的，使用同一个food数据，从而关联到购物车的购买数量统计。

异步问题

这里循环嵌套，整个DOM结构都是循环出来的，而better-scroll需要操作DOM结构，要实现横向滑动效果，难免会有异步问题。最后只能使用原生的overflow-X。

三口木：https://juejin.im/post/5d31277b51882549491754e1?utm_source=bigezhang.com#comment