Vue项目技术----Layout页面布局

前言

为什么要使用Layout页面布局？

         首先，Vue项目通过组件实现，在项目中部分公共组件（例如菜单栏组件，导航栏组件等）是不需要每次都切换重新加载的，因此为了便于开发，便设计Layout页面布局，将公共组件提取作为全局组件，切换功能组件实现页面变化。

element-ui组件模块

        官网：组件Element-ui官网

        这个组件很实用在Vue项目中，里面有很多可以直接套用的组件，便于开发人员快速搭建页面。

正文

一.搭建Layout页面框架

1.创建vue项目

运行命令【npm install element-ui 】下载element-ui模块和【npm install sass sass-loader --save-dev】下载样式模块。其中element-ui还需要在main.js中引入，程序如下。

// 引入 Element UI 及其样式
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// 使用 Element UI
Vue.use(ElementUI)

2.菜单导航组件

src\layout\components\Menu\index.vue 。在项目\src目录下创建layout目录，在创建components目录，创建Menu目录，创建index.vue组件。后续公共组件创建均为目录形式

<template>
    <!-- 菜单容器 -->
    <div class="menu-container">
      <!-- Element UI 菜单组件   mode="horizontal" -->
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>导航一</span>
          </template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <template slot="title">选项4</template>
            <el-menu-item index="1-4-1">选项1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">导航二</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <i class="el-icon-document"></i>
          <span slot="title">导航三</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-setting"></i>
          <span slot="title">导航四</span>
        </el-menu-item>
      </el-menu>
    </div>
  </template>
  
  <script>
  export default {
    name: 'Menu',
    data(){
      return{
        props: {
        // 设置菜单模式：horizontal（水平） 或 vertical（垂直）
        mode: 'horizontal', // 默认是水平菜单
        }
      }
    }
    
  }
  </script>
  
  <style scoped>
  .menu-container {
    background-color: var(--el-menu-bg-color);
  }
  
  .menu-container .os-menu {
    border: 0;
  }
  
  .menu-container .os-menu.el-menu--horizontal {
    height: calc(var(--os-layout-logo-height) - 1px);
  }
  </style>

3.面包屑导航组件

src\layout\components\Breadcrumb\index.vue

<template>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>
</template>
<style scoped>
.breadcrumb-container {
  display: flex;
  flex-wrap: nowrap; /* 防止换行 */
  overflow: hidden; /* 横向滚动溢出处理 */
  padding-right: 12px;
  
}
</style>
  

4.底部栏组件

src\layout\components\Footer\index.vue

<template>
    <div class="footer-container">
      <!-- 左侧：公司名称或标志 -->
      <div class="flex-content">
        <svg-icon name="logo" />
        <span class="logo-title">{
  
  { app_title }}</span>
      </div>
      <!-- 中间：导航链接 -->
      <div class="flex-content">
        <a href="about">关于我们</a>
        <a href="#contact">联系我们</a>
        <a href="#privacy-policy">隐私政策</a>
        <a href="#terms-of-service">服务条款</a>
      </div>
      <!-- 右侧：版权信息 -->
      <div class="text-right">&copy; 2025 xxxxx. 保留所有权利.</div>
    </div>
  </template>
  
  <script>
  export default {
  data() {
    return {
      app_title:'My App',
      port: window.location.port
    }
  }
}
  </script>
  
  <style scoped lang="scss">
  .footer-container {
    display: flex;
    align-items: center;
    width: 100%;
    user-select: none;
    font-size: 0.75rem; /* text-xs */
    height: var(--os-layout-footer-height);
    justify-content: center;
  }
  
  /* 针对大屏设备的样式 */
  @media (min-width: 1024px) {
    .footer-container {
      justify-content: space-between;
    }
  }
  
  .flex-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* gap-2 */
    font-size: 0.875rem; /* text-sm */
    color: #9ca3af; /* text-gray-400 */
    display: none;
  }
  
  @media (min-width: 1024px) {
    .flex-content {
      display: flex;
    }
  }
  
  .logo-title {
    font-weight: 700; /* font-bold */
    -webkit-font-smoothing: subpixel-antialiased; /* subpixel-antialiased */
    background-image: linear-gradient(to right, #ec4899, #8b5cf6); /* from-pink-500