ElementUI 整体页面布局

左手的ㄟ右手 2022-11-04 13:27 365阅读 0赞

# 一、概述 #

一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式

![f21b912fc8186a336155ef0cda655160.png][]

# 二、整体项目布局 #

因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。

需要分别对头部，左侧区域，主区域拆分成不同的文件。

## 创建项目 ##

创建一个全新的ElementUI 项目，请参考链接：

[https://www.cnblogs.com/xiao987334176/p/14187889.html][https_www.cnblogs.com_xiao987334176_p_14187889.html]

在src目录下，创建views文件夹，在里面再创建Layout文件夹，最后创建index.vue

最终src目录结构如下：

./
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    ├── main.js
    ├── router
    │   └── index.js
    └── views
        └── Layout
            └── index.vue

修改views/Layout/index.vue，完整内容如下：

<template>
      <div>
        <div class="header">头部</div>
        <div class="navbar">左侧区域</div>
        <div class="main">主区域</div>
      </div>
    </template>
    
    <style scoped>
      /* 头部样式 */
      .header {
        position: absolute;
        line-height: 50px;
        top: 0px;
        left: 0px;
        right: 0px;
        background-color: #2d3a4b;
      }
    
      /* 左侧样式 */
      .navbar {
        position: absolute;
        width: 200px;
        top: 50px;  /* 距离上面50像素 */
        left: 0px;
        bottom: 0px;
        overflow-y: auto; /* 当内容过多时y轴出现滚动条 */
        background-color: #545c64;
      }
    
      /* 主区域 */
      .main {
        position: absolute;
        top: 50px;
        left: 200px;
        bottom: 0px;
        right: 0px;  /* 距离右边0像素 */
        padding: 10px;
        overflow-y: auto; /* 当内容过多时y轴出现滚动条 */
        /* background-color: red; */
      }
    </style>

修改router/index.js

import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    import Layout from '@/views/Layout'  // 默认加载index.vue
    
    Vue.use(Router)
    
    export default new Router({
      mode: 'history',  //去掉url中的#
      routes: [
        {
          path: '/',
          name: 'layout',  // 路由名称
          component: Layout  // 组件对象
        }
      ]
    })

修改App.vue，注释多余的代码

<template>
      <div id="app">
    
        <router-view/>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    
    <style>
    /*#app {
          */
    /*  font-family: 'Avenir', Helvetica, Arial, sans-serif;*/
    /*  -webkit-font-smoothing: antialiased;*/
    /*  -moz-osx-font-smoothing: grayscale;*/
    /*  text-align: center;*/
    /*  color: #2c3e50;*/
    /*  margin-top: 60px;*/
    /*}*/
    </style>

运行vue项目，访问首页，效果如下：

![44d9cb7715ceb41df6905dded72c56d9.png][]

## 布局拆分 ##

上面已经实现了3个区域的布局，现在需要将3个区域拆分成不同的vue文件，方便后续的维护。

在src/views/Layout目录下，创建文件夹components，并在此文件夹创建3个文件AppHeader.vue，Appmain.vue，Appnavbar.vue

最终，src目录结构如下：

./
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    ├── main.js
    ├── router
    │   └── index.js
    └── views
        └── Layout
            ├── components
            │   ├── AppHeader.vue
            │   ├── Appmain.vue
            │   └── Appnavbar.vue
            └── index.vue

views/Layout/components/AppHeader.vue

<template>
      <div class="header">头部</div>
    </template>
    
    <script>
      export default {
        name: "AppHeader"
      }
    </script>
    
    <style scoped>
    
    </style>

views/Layout/components/Appmain.vue

<template>
      <div class="main">主区域</div>
    </template>
    
    <script>
        export default {
            name: "AppMain"
        }
    </script>
    
    <style scoped>
    
    </style>

views/Layout/components/Appnavbar.vue

<template>
      <div class="navbar">左侧区域</div>
    </template>
    
    <script>
      export default {
        name: "AppNavbar"
      }
    </script>
    
    <style scoped>
    
    </style>

views/Layout/index.vue

<template>
      <div>
        <app-header></app-header>
        <app-navbar></app-navbar>
        <app-main></app-main>
      </div>
    </template>
    
    <script>
      import AppHeader from "./components/AppHeader"
      import AppNavbar from "./components/AppNavbar"
      import AppMain from "./components/AppMain"
    
      // 导入子组件，缩写格式 AppHeader: AppHeader
      export default {
        components: { AppHeader, AppNavbar, AppMain }  // 有s
      };
    
    </script>
    
    <style scoped>
      /* 头部样式 */
      .header {
        position: absolute;
        line-height: 50px;
        top: 0px;
        left: 0px;
        right: 0px;
        background-color: #2d3a4b;
      }
    
      /* 左侧样式 */
      .navbar {
        position: absolute;
        width: 200px;
        top: 50px;  /* 距离上面50像素 */
        left: 0px;
        bottom: 0px;
        overflow-y: auto; /* 当内容过多时y轴出现滚动条 */
        background-color: #545c64;
      }
    
      /* 主区域 */
      .main {
        position: absolute;
        top: 50px;
        left: 200px;
        bottom: 0px;
        right: 0px;  /* 距离右边0像素 */
        padding: 10px;
        overflow-y: auto; /* 当内容过多时y轴出现滚动条 */
        /* background-color: red; */
      }
    </style>

刷新我们的页面，页面还是之前的样式，则我们的抽取没有问题

本文参考链接：

[https://www.cnblogs.com/zouzou-busy/p/13080665.html][https_www.cnblogs.com_zouzou-busy_p_13080665.html]

[f21b912fc8186a336155ef0cda655160.png]: /images/20221023/87fe2ff2b1f04443bfecea10e4f82ae8.png
[https_www.cnblogs.com_xiao987334176_p_14187889.html]: https://www.cnblogs.com/xiao987334176/p/14187889.html
[44d9cb7715ceb41df6905dded72c56d9.png]: /images/20221023/a6725b0bcf6d4467a642649d18c7035a.png
[https_www.cnblogs.com_zouzou-busy_p_13080665.html]: https://www.cnblogs.com/zouzou-busy/p/13080665.html