【前端】基于Vue3的PC电商前台项目实现

前言

初学Vue的常规项目，不涉及后端接口。

项目介绍

基于Vue3和ElementPlus搭建的某服装电商前台。

技术栈

• Vue3
• Vue-Router
• Vite
• Pinia
• ElementPlus

内容

• 使用Vite进行项目构建，根据甲方需求，精确还原UI设计。

• 对Axios进行简单二次封装，如请求拦截器和响应拦截器。

• 进行路由设计，实现基于业务逻辑的组件拆分。

• 实现购物车组件及SKU组件的封装及优化。

• 使用Pinia进行集中状态管理，并处理用户数据路由缓存问题。

• 实现长页面吸顶交互、图片懒加载、面包屑、放大镜、跳转第三方支付等功能，提高用户交互体验。

心得记录

用别人的组件时需注意

• 看文档
• 没有文档时，看props和emit

全局注册

• 目前Vue3中vue component文件夹下的组件默认注册

解决路由缓存问题

• 一级分类的切换正好满足上面的条件，组件实例复用，导致分类数据无法更新
• 解决思路：1. 让组件实例不复用，强制销毁重建 2. 监听路由变化，变化之后执行数据更新操作
• 可以给router-view添加key，也可以使用beforeRouteUpdate导航钩子。在意性能问题，选择onBeforeUpdate, 精细化控制；不在意性能问题，选择key，简单粗暴

持久化用户数据

• Token