vue项目实战--美食杰之首页

本文介绍了作者使用Vue.js开发的美食杰PC端项目的首页实现过程,包括头部、导航、轮播图和内容精选等板块的布局与功能。通过Element-UI组件库进行界面构建,利用接口获取数据并实现滚动加载,同时详细讲述了滚动事件处理中的节流技术应用,以优化性能。
摘要由CSDN通过智能技术生成

       读者,大家好,此篇分享一个笔者写过的vue项目,名叫美食杰,是一个PC端项目,分享出来的目的是为了可以让大家共同学习进步,也期望各位读者能指出笔者的不足之处,感谢!!

       正片开始。。。

        1.首页的展示和介绍

              头部板块,因为此头部板块在整个项目中多地使用,所以我将其放在公共组件部分,名为header.vue

              导航板块,就是黄线框框部分,在此板块中拥有两个切换的模板,今天只说首页板块

           轮播图板块,使用elemnt-ui实现的轮播图效果

       内容精选,首页展示模块,使用了element-ui实现的布局

      

          好啦,首页的展示完毕

2.布局和功能的实现

 (1)头部,使用element-ui来实现布局,主要是使用栅格布局,左边图片模板,右边登录模板

<div class="header">
      <div class="header_c">
        <el-row type="flex"
  • 0
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值