前言小兔鲜电商前台项目是一个基于Vue的PC端项目本系列文章我将总结我在这个项目中学到的知识点写项目笔记。如果你正好在学Vue或想从零搭建一个前端项目希望本系列文章可以帮助到你。【小兔鲜电商前台 | 项目笔记】第三天今日完结今日收获:1.组件封装2.懒加载3.面包屑组件总结今日完结Home-面板组件封装Home-新鲜好物业务实现Home-懒加载Home-产品列表实现Home-GoodsItem组件封装一级分类路由配置面包屑导航渲染今日收获:1.组件封装思路把可复用的结构只写一次把可能发生变化的部分抽象成组价参数(props/插槽)纯文本可以抽象成prop传入复杂的模版抽象成插槽传入1.准备模版HomePanel组件script setupdefineProps({title:{type:String},subTitle:{type:String}})/scripttemplatedivclasshome-paneldivclasscontainerdivclasshead!--主标题和副标题--h3{{title}}small{{subTitle}}/small/h3/div!--主体内容区域--slot//div/div/template...2.实现新鲜好物部分HomePanel title新鲜好物sub-title新鲜出炉品质优先ulclassgoods-list.../ul/HomePanel3.实现人气推荐部分HomePanel title人气推荐sub-title人气爆款 不容错过ulclassgoods-list.../ul/HomePanel另一个例子封装GoodsItems组件1.封装组件script setupdefineProps({good:{type:Object,default:(){}}})/scripttemplateRouterLink to/classgoods-itemimg v-img-lazygood.picturealt/pclassname ellipsis{{good.name}}/ppclassdesc ellipsis{{good.desc}}/ppclasspriceyen;{{good.price}}/p/RouterLink/template...2.组件复用script setupimportGoodsItemfrom./GoodsItem.vue.../scripttemplateGoodsItem:goodgood/.../template2.懒加载场景电商网站的首页通常会很长用户不一定能访问到页面靠下面的图片这类图片通过懒加载优化手段可以做到只有进入视口区域才发送图片请求。指令用法img v-img-lazyitem.picture/在图片img身上绑定指令该图片只有在正式进入到视口区域时才会发送图片网络请求1.编写懒加载逻辑import{useIntersectionObserver}fromvueuse/coreexportconstlazyPlugin{install(app){app.directive(img-lazy,{mounted(el,binding){// el: 指令绑定的那个元素 img// binding: binding.value 指令等于号后面绑定的表达式的值 图片urlconst{stop}useIntersectionObserver(el,([{isIntersecting}]){// 监听元素是否进入浏览器可视区域if(isIntersecting){// 进入视口区域el.srcbinding.valuestop()}},)}})}}2.在main.js中引入并注册import{lazyPlugin}from/directivesapp.use(lazyPlugin)3.面包屑组件1.什么时候用用于展示页面层级路径让用户知道当前位置、方便返回上级页面二级及以上页面必备如列表页、详情页、分类页。2. 怎么用使用 Element Plus 的 组件separator“” 定义分隔符用el-breadcrumb-item依次写路径可通过 :to 配置跳转路由动态绑定当前页面名称。!--面包屑--divclassbread-containerel-breadcrumb separatorel-breadcrumb-item:to{ path: / }首页/el-breadcrumb-itemel-breadcrumb-item{{categoryData.name}}/el-breadcrumb-item/el-breadcrumb/div总结今天学到了组件封装的便利性可以简化很多代码也学到了优化页面-懒加载的知识同时了解到了面包屑导航的书写。如果我的内容对你有帮助请点赞评论收藏。创作不易大家的支持就是我坚持下去的动力