开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：整合项目首页面】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11428
整合项目首页面
内容简介
一、整合项目首页面的流程
二、整合幻灯片流程代码展示
一、整合项目页面的流程
1. 安装幻灯片插件
第一步就是用 Npm install vue-owesome-swiper 命令，这个先做一个安装
先下载，下载之后在里边找到 vue
2. 配置幻灯片插件
在 plugins 文件夹下新建文件 nuxt-awiper-plugin,
js,内容是
import Vue from'vue'
import VueAwesomeSwiper from‘yuce amesome swiper/dist/sar'
Fue, use( VueAmesomeSwiper )
在 nurt, config, is 文件中配置插件
将 plugins 和 css 节点复制到 mndule, exports 节点下
module:exports=[
//some murt config,
plugins:[
{src:"pluginsˈnuxt-swiper-pluginjs°, ssr;false}
].
css:[
swperidisticsswisiver cas'
]
}
放到后面也是可以的，但是建议放到前边
3. 复制项使用的静态资源 assets 目录
复制进去就是一些网页上的图片之类
实际上 css 和 img 都是写好的，直接整合过去就可以了
接下来复制页面中的内容，布局页面和首页面，直接用的就是 nuxt 标签
4. 从课件复制代码到 layouts 目录下 default.vue
第一个结构就是 header 就是头页面，foot 就是为信息，nuxt 就是中间部分
5. 从课件复制代码到 pages/index.vue，把首页面做修改
访问页面就有了，目前的静态效果就好了，这个结构如果用时候一直没关掉，就是会占用大量内存，用的时候如果很慢可以停掉再重启一下。
二、按照课件流程整合幻灯片
<template>
<div>
<--幻灯片开始-->
<div v-swiper:mySwiper=" swiper0ption ">
<div class="'swiper-wrapper">
<div class="swiper-slide"style="" background :W040B1B]">
<a target="_ blank"href="/">
<imgsrκ="~/assets/photo/banner/ 1525939573202 .jpg"alt="首页 banner">
</ a>
</div>
<div class="swiper-slide"style=" background :#040B1B;">
<a target="blank"here!="/">
Img src=""classets/photo/banner/ 1525939573202 . jpg"alt="首页 banner">
</div>
</div>
<divclass="Swiper pagination skiper pagination white"x/dive
<div class="Swiper button prev sapper button shite"slot="button prev"></div>
<div class=""wiper-button-next seiper-button-white"slot-"button next"></div>
<--幻灯片 结束-->
现在就把幻灯片做了一个整合
效果就是上边有幻灯片的切换，下边有课堂和名师大咖，有头有尾就都做到了。
