在后面将我的项目简略搭建实现后，咱们开始在我的项目根底上在HelloWorld.vue上实现首页的总体设计

首先来看看明天要实现的成果

目前首页次要分为4各局部

  • 导航栏
  • 照片区
  • 博客区
  • 功能区

1. 导航区
导航区次要是应用了element-ui进行搭建：导航菜单
设计代码如下：

<div class="nav">      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" style="margin: 0 auto;width:1080px">        <el-menu-item index="1">首页</el-menu-item>        <el-menu-item index="2">个人空间</el-menu-item>        <el-menu-item index="3">敌人</el-menu-item>      </el-menu>    </div>

其中:default-active属性代表默认选中的菜单栏，mode代表菜单是横向还是纵向，@select是设置选中时执行的函数
2. 照片区
照片区次要是应用了element-ui的走马灯（链接）进行搭建
代码如下：

<div class="intro-img">      <el-carousel :interval="5000" arrow="always" style="margin: 0 auto;width:1080px">        <el-carousel-item v-for="item in 4" :key="item">          <h3> 照片墙 </h3>        </el-carousel-item>      </el-carousel>    </div>

3. 播客区和功能区
应用了card代码如下:

<div class="body">      <el-card class="content" >        <h3>博客区</h3>      </el-card>      <el-card class="function">        <h3>功能区</h3>      </el-card>    </div>

4. 首页的总体设计曾经简略设计实现，接下来将欠缺各个组件性能代码

总体代码：

<template>  <div class="hello">    <div class="nav">      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" style="margin: 0 auto;width:1080px">        <el-menu-item index="1">首页</el-menu-item>        <el-menu-item index="2">个人空间</el-menu-item>        <el-menu-item index="3">敌人</el-menu-item>      </el-menu>    </div>    <div class="intro-img">      <el-carousel :interval="5000" arrow="always" style="margin: 0 auto;width:1080px">        <el-carousel-item v-for="item in 4" :key="item">          <h3> 照片墙 </h3>        </el-carousel-item>      </el-carousel>    </div>    <div class="body">      <el-card class="content" >        <h3>博客区</h3>      </el-card>      <el-card class="function">        <h3>功能区</h3>      </el-card>    </div>  </div></template><script>export default {  name: 'HelloWorld',  data () {    return {      activeIndex:'1',    }  },  methods:{    handleSelect(key, keyPath) {          }  }}</script><style scoped>h1, h2 {  font-weight: normal;}ul {  list-style-type: none;  padding: 0;}li {  display: inline-block;  margin: 0 10px;}a {  color: #42b983;}/* 走马灯款式开始 */.el-carousel__item h3 {  color: #475669;  font-size: 18px;  opacity: 0.75;  line-height: 300px;  margin: 0;}.el-carousel__item:nth-child(2n) {  background-color: #99a9bf;}.el-carousel__item:nth-child(2n+1) {  background-color: #d3dce6;}/* 走马灯款式完结 */.intro-img{  margin-top: 20px;  width: 100%;}.nav{  width: 100%;  background-color: #fff;}.body{  width: 1080px;  margin: 20px auto;  display: flex;  justify-content: space-between;}.content{  width: 700px;}.function{  width: 360px;  height: 300px;}</style>