vue3项目实战-轮播图实现，页面组件封装，图片懒加载，组件封装，使用逻辑函数拆分业务

轮播图实现

element-plus组件搭建静态结构

封装接口

apis下新建home.js,添加以下代码（这里的接口是后台提供的，每个项目对应的都不一样，这里只提供方法，以自己的项目为准）

import  httpInstance  from '@/utils/http'
// 获取banner
export function getBannerAPI( params = {}) {
  // 默认为1,商品为2
  const { distributionSite = "1" } = params
  return httpInstance({
    url:'/home/banner',
    params:{
      distributionSite

    }
  })
}

获取组件数据渲染模板

在home文件夹下的index.vue中添加如下代码

主要思路如下：

首先，定义存在轮播图数据的列表，然后，定义获取轮播图数据的方法（调用接口拿到数据），最后，执行onMounted钩子函数调用一下方法，最后在组件中渲染出来。