Vue3+Pinia+Vite+TS 还原高性能外卖APP项目 6️⃣商家详情页开发

一、业务组件-ShopView 商家详情页

二、业务组件-Header 商家头部组件开发

• 可以复用 useToggle 这个hook
• Vant ActionSheet 上拉菜单

三、业务组件-GoodsList 商品列表组件开发

• Vant Sidebar 侧边导航

四、业务组件-Goodsltem 商品列表项组件开发

五、业务组件-CartContr 购物车控件组件开发

• 注意 点击添加数量的时候 事件冒泡

六、自定义hooks-useCartStore 管理购物车数据状态

七、业务组件-ShopCart 购物车组件开发

• Vant源码解析(四)----Popup弹出层，详解样式方法
• Vant Checkbox 复选框
• v-model是modelValue语法糖

八、自定义hooks-useTransition 实现加入购物车动画效果

• vue动画过渡 javascript钩子函数详解

九、自定义hooks-useEventBus 使用事件机制实现跨组件通信

十、自定义hooks-useLifeHook 解决非 setup 调用生命周期 hooks 问题

• 学习Vue 3.0中的onMounted和onUnmounted钩子函数
• Vue中的辅助函数和js数组的高阶函数 map、filter、reduce

十一、自定义hooks-useLockScroll 禁止滚动优化体验