nuxtjs|闲云旅游项目开发-（第一篇（使用Element-ui实现主页轮播图）） vue.js|前端

业务需求：

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

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

html { font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; word-spacing: 1px; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; box-sizing: border-box; }*, *::before, *::after { box-sizing: border-box; margin: 0; }.button--green { display: inline-block; border-radius: 4px; border: 1px solid #3b8070; color: #3b8070; text-decoration: none; padding: 10px 30px; }.button--green:hover { color: #fff; background-color: #3b8070; }.button--grey { display: inline-block; border-radius: 4px; border: 1px solid #35495e; color: #35495e; text-decoration: none; padding: 10px 30px; margin-left: 15px; }.button--grey:hover { color: #fff; background-color: #35495e; }

二新建公共组件 1.思路 1.在components 文件夹中新建所有页面统一的头部组件和页脚组件
2.在默认布局中 layouts/default.vue中导入公共组件并使用

组件约定：公共组件不需要放到子文件夹中：如下图
头部下拉菜单组件文档：https://element.eleme.cn/#/zh-CN/component/dropdown#ji-chu-yong-fa

nuxtjs|闲云旅游项目开发-（第一篇（使用Element-ui实现主页轮播图））

文章图片

2.实现步骤 2.1 头部组件
components/pageFooter.vue 文件代码如下：

.header { height: 60px; line-height: 60px; background: #fff; border-bottom: 1px #ddd solid; box-shadow: 0 3px 0 #f5f5f5; box-sizing: border-box; .main { width: 1000px; margin: 0 auto; }.logo { width: 156px; padding-top: 8px; img { display: block; width: 100%; } }.navs { margin: 0 20px; flex: 1; a { display: block; padding: 0 20px; height: 60px; box-sizing: border-box; &:hover, &:focus, &:active { border-bottom: 5px #409eff solid; color: #409eff; } } // 菜单高亮时的颜色 /deep/ .nuxt-link-exact-active { background: #409eff; color: #fff !important; } }.message { height: 36px; line-height: 1; cursor: pointer; .el-icon-bell { margin-right: 2px; font-size: 18px; } }.el-dropdown-link { margin-left: 20px; &:hover { img { border-color: #409eff; } }a { display: block; }img { width: 32px; height: 32px; vertical-align: middle; border: 2px #fff solid; border-radius: 50px; } }.account-link { font-size: 14px; margin-left: 10px; color: #666; &:hover { color: #409eff; text-decoration: underline; } } }

2.2 页脚组件
在components/pageFooter.vue的代码如下：

.footer-wrapper { background: #333; color: #ccc; min-width: 1000px; }.footer { padding-top: 30px; margin: 0 auto; width: 1000px; }.info-list { h5 { font-weight: normal; font-size: 16px; margin-bottom: 10px; }p { font-size: 12px; line-height: 1.8; span { color: orange; } } }.scan { text-align: center; img { width: 140px; height: 140px; }font-size: 12px; }.licence { border-top: 1px #666 solid; margin-top: 20px; padding: 50px 0; text-align: center; font-size: 12px; }

3 总结：

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

三首页轮播图 1. 思路

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

2.实现步骤 2.1 新增轮播图布局

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

.container{ min-width:1000px; margin:0 auto; position:relative; /deep/ .el-carousel__container{ height:700px; }.banner-image{ width:100%; height:100%; } }

2.2 请求后端接口数据