路由配置

数据展示

![Pasted image 20250802103617](../../../_assets/6250336-Pasted image 20250802103617.png) 最开始的时候是一个空的对象，所以报错了 ![Pasted image 20250802103658](../../../_assets/00299a7-Pasted image 20250802103658.png) 针对对象的==多层属性访问问题== 解决方法：

  • 可选链?. ![Pasted image 20250802104039](../../../_assets/aa9c7eb-Pasted image 20250802104039.png)
  • v-if ![Pasted image 20250802104244](../../../_assets/1075c7d-Pasted image 20250802104244.png)

封装热榜组件

![Pasted image 20250802113645](../../../_assets/6a0e36c-Pasted image 20250802113645.png) ![Pasted image 20250802113657](../../../_assets/2eb4213-Pasted image 20250802113657.png) 使用==props来区别==两个相似组件所展示的内容

大小图切换、放大镜

![Pasted image 20250802160043](../../../_assets/89609ff-Pasted image 20250802160043.png) 大图和小图的移动是相反的 ![Pasted image 20250802162741](../../../_assets/1e735d1-Pasted image 20250802162741.png) ![Pasted image 20250802162755](../../../_assets/494aba3-Pasted image 20250802162755.png)

总结

![Pasted image 20250802164019](../../../_assets/032fe28-Pasted image 20250802164019.png)

SKU组件

就是指最小的库存统计单位 ![Pasted image 20250802170354](../../../_assets/4aa82dd-Pasted image 20250802170354.png) ![Pasted image 20250802170440](../../../_assets/0cb51cb-Pasted image 20250802170440.png) ![Pasted image 20250802170500](../../../_assets/2b0dc07-Pasted image 20250802170500.png)