当前位置：首页 > news >正文

【小兔鲜电商前台 | 项目笔记】第三天

news 2026/5/24 5:36:37

前言：小兔鲜电商前台项目是一个基于Vue的PC端项目，本系列文章我将总结我在这个项目中学到的知识点，写项目笔记。如果你正好在学Vue或想从零搭建一个前端项目，希望本系列文章可以帮助到你。

【小兔鲜电商前台 | 项目笔记】第三天

- 今日完结：
- 今日收获:
- - 1.组件封装
  - 2.懒加载
  - 3.面包屑组件
- 总结：

今日完结：

Home-面板组件封装
Home-新鲜好物业务实现
Home-懒加载
Home-产品列表实现
Home-GoodsItem组件封装
一级分类路由配置
面包屑导航渲染

今日收获:

1.组件封装

思路：把可复用的结构只写一次，把可能发生变化的部分抽象成组价参数(props/插槽)
（纯文本，可以抽象成prop传入，复杂的模版，抽象成插槽传入）

1.准备模版（HomePanel组件）

<script setup>defineProps({title:{type:String},subTitle:{type:String}})</script><template><divclass="home-panel"><divclass="container"><divclass="head"><!--主标题和副标题--><h3>{{title}}<small>{{subTitle}}</small></h3></div><!--主体内容区域--><slot/></div></div></template>...

2.实现新鲜好物部分

<HomePanel title="新鲜好物"sub-title="新鲜出炉，品质优先"><ulclass="goods-list">...</ul></HomePanel>

3.实现人气推荐部分

<HomePanel title="人气推荐"sub-title="人气爆款 不容错过"><ulclass="goods-list">...</ul></HomePanel>

另一个例子：

封装GoodsItems组件

1.封装组件

<script setup>defineProps({good:{type:Object,default:()=>{}}})</script><template><RouterLink to="/"class="goods-item"><img v-img-lazy="good.picture"alt=""/><pclass="name ellipsis">{{good.name}}</p><pclass="desc ellipsis">{{good.desc}}</p><pclass="price">&yen;{{good.price}}</p></RouterLink></template>...

2.组件复用

<script setup>importGoodsItemfrom'./GoodsItem.vue'...</script><template><GoodsItem:good="good"/>...</template>

2.懒加载

场景：电商网站的首页通常会很长，用户不一定能访问到页面靠下面的图片，这类图片通过懒加载优化手段可以做到只有进入视口区域才发送图片请求。

指令用法：

<img v-img-lazy="item.picture"/>

在图片img身上绑定指令，该图片只有在正式进入到视口区域时才会发送图片网络请求

1.编写懒加载逻辑

import{useIntersectionObserver}from'@vueuse/core'exportconstlazyPlugin={install(app){app.directive('img-lazy',{mounted(el,binding){// el: 指令绑定的那个元素 img// binding: binding.value 指令等于号后面绑定的表达式的值 图片urlconst{stop}=useIntersectionObserver(el,([{isIntersecting}])=>{// 监听元素是否进入浏览器可视区域if(isIntersecting){// 进入视口区域el.src=binding.valuestop()}},)}})}}

2.在main.js中引入并注册

import{lazyPlugin}from'@/directives'app.use(lazyPlugin)

3.面包屑组件

1.什么时候用：
用于展示页面层级路径，让用户知道当前位置、方便返回上级页面，二级及以上页面必备（如列表页、详情页、分类页）。
2. 怎么用
使用 Element Plus 的组件；
separator=“>” 定义分隔符；
用<el-breadcrumb-item>依次写路径；
可通过 :to 配置跳转路由，动态绑定当前页面名称。

<!--面包屑--><divclass="bread-container"><el-breadcrumb separator=">"><el-breadcrumb-item:to="{ path: '/' }">首页</el-breadcrumb-item><el-breadcrumb-item>{{categoryData.name}}</el-breadcrumb-item></el-breadcrumb></div>