之前上过一些华为云的前端教育课程，最终考核是以vue为基础搭建一个华为云教育课堂的官网，网址如下
https://classroom.devcloud.huaweicloud.com/home
下面记录一下搭建网站的全过程。
抽象出了一个Nav导航栏组件，引入到主页面中，并且鼠标滑过时会更换字体颜色
观察到网站首页在导航栏下方就是一个轮播图，轮播图有多种实现方式，甚至可以用原生js去写，这里为了方便美观使用了element-ui的轮播图组件
使用element-ui的方法如下
建议使用cnpm安装，cnpm的安装方法参考 https://developer.aliyun.com/mirror/NPM?from=tnpm
如果网速允许可以用npm直接安装 npm i element-ui -S
main.js文件在vue-cli创建时自动生成，修改为
import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue';Vue.use(ElementUI);new Vue({ el: '#app', render: h => h(App)});使用了全局引入的方式，如果希望减小项目体积可以局部引入（不建议新手使用），局部引入参考 https://element.eleme.cn/#/zh-CN/component/installation
3.引入轮播图（Carousel 走马灯）组件html部分
<el-carousel trigger="click" height="550px"><el-carousel-item v-for="item in imglist" :key="item"><img :src="item" /></el-carousel-item></el-carousel>vue部分
export default {name: 'Home',components: {Nav,},data() {return {imglist: ['https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.24.002/banner-2.64b1407e7a8db89d6cf2.jpg','https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.24.002/banner-4.4ac0f6534a11844638e4.jpg','https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.24.002/banner-10.30eaaf519fa37bf97d36.jpg','https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.24.002/banner-8.d14241daf518717981c6.jpg',],}},}这里我们看一下页面效果
可以看到轮播图正常显示了，但是把导航栏遮住了，所以我们给轮播图设置一个父元素div，并设置div的位置距离页面顶部一个导航栏的距离就能显示导航栏了，代码如下：
vue部分不用改变
css部分增加
设置导航栏为fixd可以在滑动时始终显示导航栏，符合我们的需求