1、项目描述:该项目是基于VUE3的购物电商类平台,整个项目包括首页、商品详情页、用户登录页、加入购物车、订单、支付、用户中心等多个子模块。用户通过前台浏览和购买商品,登录后购物车的原商品再没有被移除或下单情况下是还在的,主要出售家居日常百货。
2、核心技术栈:create-vue+pinia+Elementplus+Vue3+Setup+Vue-Router+VueUse
3、项目实现:
1)二次封装axios,配置请求和响应拦截器,使用配置代理解决跨域问题,使用pinia进行模块化开发。
2)利用useScroll获取页面滚动距离实现长页面吸顶交互。
3)在首页中,利用图片懒加载指令封装可以做到只有进入视口区域才发送图片请求。
4)使用onBeforeRouteUpdate钩子函数在一级分类的切换时防止组件实例复用。
5)在商品规格中,利用sku组件封装的思想来产出当前用户选择的商品规格,为加入购物车操作提供数据信息。