代码拉取完成，页面将自动刷新
create-vue + Vite + Pinia + VueUse + ElementPlus + Vue-Router + SCSS + Axios
安装步骤：
git clone 项目地址 // 把项目下载到本地
cd Vue3-shopping-platform // 进入项目目录
npm install // 安装项目依赖，等待安装完成之后，安装失败可用 cnpm 或 yarn
npm run dev // 运行项目
npm run build // 执行构建命令，生成的dist文件夹放在服务器下即可访问
《Layout->components->LayoutFixed.vue和LayoutHeader》。首先已经封装好接口函数。接着创建stores->category.js，经过Pinia的 state 的 action对象和state对象处理后，定义获取接口数据的action函数。接着在index.vue中触发（onMounted）Pinia的action对象，获取响应式接口数据。接着在LayoutFixed.vue中导入并使用Pinia暴露的方法，交付action获取的响应式接口数据（特例）。最后使用v-for遍历该数据，渲染组件。
《Home->components->HomeBanner.vue》，在HomeBanner组件中导入封装好的接口函数+响应式处理，接着在onMounted中触发getBanner()，获取响应式接口数据。最后v-for遍历该数据，渲染组件。
《views->Detail->index.vue》首先创建apis->detail.js，在里面封装接口函数（接口中有Query参数id，所以放在params对象里）。接着在views->Detail->index.vue中导入封装好的接口函数+响应式处理，接着在onMounted中触发getGoods()，获取响应式接口数据。最后v-for遍历该数据，渲染页面。
验证：在控制台的网络一栏中，将页面清空，当我们将页面下拉到图片进入视口，此时懒加载出四张图片，如下所示：
在项目的很多个业务模块中都需要用到同样的商品展示模块（GoodsItem.vue），没必要重复定义，封装起来，方便复用。
展示：为HomeProduct.vue创建一个子组件GoodsItem.vue，将goods对象传给GoodsItem.vue，在子组件中接收goods对象并使用。
验证：浏览器如下所示：
在《购物车->本地购物车-列表购物车-单选功能》中实现 “单选框切换时修改store中对应的状态” 时，使用常规写法只能在singleCheck中获取到selected参数，无法知道在store的cartList修改谁的选中状态，所以除了selected我们还可以补充一个用来筛选的参数——skuId
我们可以将绑定事件写成箭头函数的回调写法，在方法后面调用实际的回调，获取 i（ i 中有skuId），如下所示：
验证：点击左侧单选框，控制台输出当前选中对象（含skuId）和选中状态。
（未登录）
（已登录）
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。