闲云旅游项目开发-(第一篇:使用Element-ui实现主页轮播图)

业务需求:

  •   初始化布局
  •  页头页脚公共组件
  •  首页轮播图

一 初始化默认全局布局

nuxtjs 提供了一个公共组件 layouts/default.vue,相当于以前的 app.vue 。该布局组件默认作用于所有的页面,所以我们可以再这里加上一些公共的样式

layouts/default.vue代码如下:




 

二 新建公共组件

 1.思路

1.在components 文件夹中新建所有页面统一的头部组件和页脚组件

2.在默认布局中 layouts/default.vue中 导入公共组件并使用

组件约定:公共组件不需要放到子文件夹中:如下图

头部下拉菜单组件文档:https://element.eleme.cn/#/zh-CN/component/dropdown#ji-chu-yong-fa

闲云旅游项目开发-(第一篇:使用Element-ui实现主页轮播图)_第1张图片

 

2.实现步骤

 2.1 头部组件

components/pageFooter.vue 文件代码如下:





2.2 页脚组件

在components/pageFooter.vue的代码如下:




3 总结:

  • layouts.default.vue  是默认的布局组件,会作用于任何页面
  • 在layouts/default.vue 中导入全局的头部组件和页脚组件,就可以查看到基本的页面效果了

 

三 首页轮播图

1. 思路

  • 使用 Element-ui 的幻灯片组件 el-carousel,新增首页的轮播图布局
  • 请求后端接口替换静态图片数据

 

2.实现步骤

2.1 新增轮播图布局

  • 首页的轮播图布局,pages/index.vue 是在 layouts/default.vue 中的 中渲染
  • banners 是我们自己构建的一个死数据数组, 用来遍历之后生成多张图片进行轮播




2.2 请求后端接口数据

this.$axios能使用 是因为 nuxt 已经帮我们绑定了

 闲云旅游项目开发-(第一篇:使用Element-ui实现主页轮播图)_第2张图片

2.3 修改 template 的图片地址,添加 $axios.defaults.baseURL,因为接口返回的图片链接时相对链接

  
    

3.总结

  • 使用Element-ui的幻灯片组件 el-carousel 实现轮播图,开始显示固定数据,固定的图片
  • 使用this.$axios 请求后台轮播图接口 获取数据
  • 在模板中使用$axios.defaults.baseURL 补全图片地址进行显示

 

你可能感兴趣的:(nuxtjs,前端,vue.js)