ElementUI 整體頁面布局

一、概述

一般后台頁面的頂部導航欄和左側導航欄一般是固定的，我們可以布局成下面的樣式

 

二、整體項目布局

因為我們的首頁是個公共的組件，點擊首頁，會員管理，都不會變，所以我們可以放在一個單獨文件夾里面。

需要分別對頭部，左側區域，主區域拆分成不同的文件。

創建項目

創建一個全新的ElementUI 項目，請參考鏈接：

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">
<!--    <img src="./assets/logo.png">-->
    <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項目，訪問首頁，效果如下：

 

布局拆分

上面已經實現了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