vue+element-ui搭建迷你电商平台系列篇（七）本篇主要讲一下vue脚手架中的组件开发，主要是主页组件，其中包括

这是我参与11月更文挑战的第22天，活动详情查看：2021最后一次更文挑战

本篇主要讲一下vue脚手架中的组件开发，主要是主页组件，其中包括home路由配置、布局容器使用、头部样式、侧边栏样式、进入首页的权限验证、注销功能实现等。

主页组件开发

上面的代码已经完成了登录的页面，和登录的接口调用，并且分别对登录成功和失败的情况进行了处理；其实登录成功后，我们需要跳转到/home这个页面，下面就开始写这个页面；

home路由配置

首先要配置路由，配置跟上面login组件是一样的，这里就不赘述了；

配置完成后记得登录看下跳转是否正确的
布局容器使用

进入element组件库，找到布局容器element.eleme.cn/#/zh-CN/com…

挑选符合我们的布局，将他拷贝到刚刚新建的home.vue文件里；

<template>
  <el-container>
    <el-header>Header</el-header>
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-main>Main</el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  name: "home"
}
</script>

<style scoped>

</style>

我们的布局是有头部，侧边栏，和中间内容区，但是没有底部的，所以我们找这样的布局就OK了

可以看下当前效果。

当你看到这个页面，效果看得不太明显，因为这三个区域的颜色都是一致的，看不出布局效果，我们给不同的容器加一下类名分别给一下不同的颜色区分一下

<template>
  <el-container class="container">
    <el-header class="header">
      Header
    </el-header>
    <el-container>
      <el-aside class="aside" width="200px">
        Aside
      </el-aside>
      <el-main class="main">
        Main
      </el-main>
    </el-container>
  </el-container>
</template>
<style scoped>
.container {
  height: 100%;
}

.header {
  background-color: #b3c0d1;
}

.aside {
  background-color: #d3dce6;
}

.main {
  background-color: #e9eef3;
}
</style>

这样就可以看到我们的布局了

头部样式

布局容器有了，接下来我们其实就是往每个容器里写东西就可以了，先从头部容器开始

头部容器的内容包括网站名称，网站logo，和注销登录的按钮；点击注销要退出登录

进入element组件库，找到layout布局，我们要在一行里边分成多个列，就用这个layout布局，他可以通过基础的 24 分栏，迅速简便地创建布局。

我们是分了三列，所以找对应三列的布局,把它放到我们的header里；

<el-row>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>

看下完整的header代码

  <el-header class="header">
      <el-row>
        <el-col :span="2" class="img">
          <img src="https://public-cdn.mokahr.com/b430b07f-fc65-4285-9a9c-314a086e50ba.png" alt="无法显示图片" width="230px">
        </el-col>
        <el-col :span="21" class="middle">
          <h1>迷你电商平台</h1>
        </el-col>
        <el-col :span="1">
          <a class="loginOut" @click.prevent='handleSignOut' href="#">注销</a>
        </el-col>
      </el-row>
    </el-header>

第一列是一张图，中间是我们网站名称，最右侧是一个注销的a标签我们为他绑定一个点击事件handleSignOut。