2 搭建一個(gè)簡(jiǎn)單的后臺(tái)管理布局

文件創(chuàng)建

在準(zhǔn)備好相關(guān)環(huán)境后，我們開(kāi)始創(chuàng)建自己的項(xiàng)目。整個(gè)項(xiàng)目的目錄結(jié)構(gòu)如下圖所示

image

我們?cè)趕rc/components/下創(chuàng)建一個(gè)Test.vue文件，這個(gè)文件名可以是任意的修改，相關(guān)代碼如下：

<template>
    <h1>test</h1>
</template>

<script>
export default {
}
</script>

<style>
</style>

然后修改router.ts中的路由信息，有關(guān)路由的進(jìn)階使用后面會(huì)進(jìn)行學(xué)習(xí)。將路由中的根路由修改為為如下：

    {
      path: '/',
      name: 'home',
      component: ()=> import('@/components/Test.vue')
    }

保證main.ts文件中存在<router-view></router-view>標(biāo)簽，這是一個(gè)匹配路由視圖的標(biāo)簽，只有存在這個(gè)標(biāo)簽，才能正常的通過(guò)路由渲染并訪問(wèn)相關(guān)內(nèi)容，最后訪問(wèn)結(jié)果：

image

使用Element UI框架

Element UI框架是一個(gè)基于vue的UI框架，雖然說(shuō)是前端是圖形界面，但是和專業(yè)的UI相比還是差了很多的，因此我們使用框架就行，如果有特殊需求還可以定制主題。

首先是安裝：

npm i element-ui -S

然后在main.ts中修改相關(guān)信息

import Element from 'element-ui'
// 引入element ui
import 'element-ui/lib/theme-chalk/index.css'
// 引入element ui的樣式
Vue.use(Element)

至此完整地引入了element ui的相關(guān)樣式，如有需要可后續(xù)自己手動(dòng)修改。

實(shí)現(xiàn)整體布局

本次使用的是element ui的布局容器，我們直接復(fù)制粘貼源代碼到Test.vue中試試

<template>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
    </el-container>
  </el-container>
</template>

<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
</style>

效果圖如下：

image

但是在實(shí)際的展示過(guò)程中布局并沒(méi)有充滿整個(gè)瀏覽器，我們來(lái)試試如何充滿瀏覽器。

充滿瀏覽器

我們?cè)贏pp.vue中的樣式部分添加如下代碼即可

html,
body,
#app,
.el-container {
  /*設(shè)置內(nèi)部填充為0，幾個(gè)布局元素之間沒(méi)有間距*/
  padding: 0px;
  /*外部間距也是如此設(shè)置*/
  margin: 0px;
  /*統(tǒng)一設(shè)置高度為100%*/
  height: 100%;
}

最終效果：

image

在aside所在的容器里面添加element的NavMenu組件，此處我們?cè)傩陆ㄒ粋€(gè)Main.vue文件，在這個(gè)文件中進(jìn)行NavMenu的編寫(xiě)。為了能夠顯示Main.vue中的內(nèi)容，我們需要在Test.vue中注冊(cè)這個(gè)組件：

<el-aside width="200px">
    <navmenu></navmenu>
    <!--即輸入我們注冊(cè)好的組件的標(biāo)簽-->
</el-aside>
<script>
import Main from "@/components/Main";
export default {
  name: "app",
  components: {
    navmenu: Main
  }
};
</script>

先把官網(wǎng)的組件的源碼copy下來(lái)（html和script部分）：

<template>
  <el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>導(dǎo)航一</span>
      </template>
      <el-menu-item-group>
        <template slot="title">分組一</template>
        <el-menu-item index="1-1">選項(xiàng)1</el-menu-item>
        <el-menu-item index="1-2">選項(xiàng)2</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="分組2">
        <el-menu-item index="1-3">選項(xiàng)3</el-menu-item>
      </el-menu-item-group>
      <el-submenu index="1-4">
        <template slot="title">選項(xiàng)4</template>
        <el-menu-item index="1-4-1">選項(xiàng)1</el-menu-item>
      </el-submenu>
    </el-submenu>
    <el-menu-item index="2">
      <i class="el-icon-menu"></i>
      <span slot="title">導(dǎo)航二</span>
    </el-menu-item>
    <el-menu-item index="3" disabled>
      <i class="el-icon-document"></i>
      <span slot="title">導(dǎo)航三</span>
    </el-menu-item>
    <el-menu-item index="4">
      <i class="el-icon-setting"></i>
      <span slot="title">導(dǎo)航四</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>

這里要做一下說(shuō)明的是，我們將官方的源代碼中的<el-col>和<el-row>標(biāo)簽刪掉了。因?yàn)槿绻由线@兩個(gè)標(biāo)簽的話，整個(gè)navmenu的高度將無(wú)法充滿整個(gè)窗口?？匆幌滦Ч?/p>

image

下拉子菜單右側(cè)沒(méi)有完全對(duì)齊，存在溢出的情況。而且導(dǎo)航欄的每個(gè)子菜單好像位置有點(diǎn)靠右了。經(jīng)過(guò)檢查元素的樣式發(fā)現(xiàn)是因?yàn)閎order-right組件留出了1px的邊界導(dǎo)致無(wú)法對(duì)齊，然后再按照視覺(jué)要求調(diào)整相應(yīng)的padding-left和padding-right。

<style>
.el-menu {
  height: 100%;
  border-right: solid 0px #e6e6e6;
}
.el-submenu__title,
.el-menu-item {
  height: 60px;
  padding-right: 70px;
  padding-left: 0px !important;
}
.el-menu-item-group__title {
  padding-right: 110px;
}
</style>

最后的效果如下：

image

此次的頁(yè)面布局就介紹到這里，下一節(jié)將會(huì)介紹路由的相關(guān)使用。