vue电商后台管理系统——主页布局（一）

最新推荐文章于 2024-08-08 18:15:31 发布

Minnor

最新推荐文章于 2024-08-08 18:15:31 发布

阅读量2.7k

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/holive_9/article/details/125129013

版权

本文详细介绍了如何使用Vue.js构建电商后台管理系统的主页布局，包括整体布局、Header、侧边菜单栏的创建与优化，以及axios请求拦截器的设置。通过组件库中的各种元素，如Container、NavMenu，实现后台首页的灵活布局，同时讲解了如何动态获取并渲染左侧菜单数据，以及实现菜单栏的伸缩和路由重定向功能。

摘要由CSDN通过智能技术生成

主页布局

文章目录

1.后台首页整体布局

先上下划分，再左右划分

组件库中找到 “Container布局容器”

<el-container class="home_container">
    <!-- 头部区域 -->
    <el-header></el-header>
	<el-container>
    	<!-- 侧边栏区域 -->
        <el-aside></el-aside>
        <!-- 右侧主体区域 -->
        <el-main></el-main>
	</el-container>
</el-container>

注意：el-container这类标签本身都相当于类选择器

需要找到容器没有撑满全屏的原因

<style>
.home_container {
   
    height:100%;
}
</style>

在这里插入图片描述

2.首页顶部Header布局

实现左右布局最简单的方法就是使用：flex布局

	<!-- 头部区域 -->
    <el-header>
      <div>
        <img src="../assets/heima.png" alt="" />
        <span>电商后台管理系统</span>
      </div>
      <el-button type="info" @click="logout">退出</el-button>
    </el-header>

<style lang="less" scoped>
.el-header {
   
  background-color: #373d41;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #fff;
  font-size: 22px;
  > div {
   
    display: flex;
    align-items: center;
    span {
   
      padding-left: 15px;
    }
  }
</style>

3.左侧菜单栏布局

在组件库中找到“ NavMenu 导航菜单“——为网站提供导航功能的菜单

菜单分为两级，并且可以折叠

        <el-menu
          background-color="#333744"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <!-- 一级菜单 -->
          <el-submenu index=