2 搭建一个简单的后台管理布局
文件创建
在准备好相关环境后，我们开始创建自己的项目。整个项目的目录结构如下图所示
我们在src/components/下创建一个Test.vue文件，这个文件名可以是任意的修改，相关代码如下：
<template>
<h1>test</h1>
</template>
<script>
export default {
}
</script>
<style>
</style>
然后修改router.ts中的路由信息，有关路由的进阶使用后面会进行学习。将路由中的根路由修改为为如下：
{
path: '/',
name: 'home',
component: ()=> import('@/components/Test.vue')
}
保证main.ts文件中存在<router-view></router-view>标签，这是一个匹配路由视图的标签，只有存在这个标签，才能正常的通过路由渲染并访问相关内容，最后访问结果：
使用Element UI框架
Element UI框架是一个基于vue的UI框架，虽然说是前端是图形界面，但是和专业的UI相比还是差了很多的，因此我们使用框架就行，如果有特殊需求还可以定制主题。
首先是安装：
npm i element-ui -S
然后在main.ts中修改相关信息
import Element from 'element-ui'
// 引入element ui
import 'element-ui/lib/theme-chalk/index.css'
// 引入element ui的样式
Vue.use(Element)
至此完整地引入了element ui的相关样式，如有需要可后续自己手动修改。
实现整体布局
本次使用的是element ui的布局容器，我们直接复制粘贴源代码到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>
效果图如下：
但是在实际的展示过程中布局并没有充满整个浏览器，我们来试试如何充满浏览器。
充满浏览器
我们在App.vue中的样式部分添加如下代码即可
html,
body,
#app,
.el-container {
/*设置内部填充为0，几个布局元素之间没有间距*/
padding: 0px;
/*外部间距也是如此设置*/
margin: 0px;
/*统一设置高度为100%*/
height: 100%;
}
最终效果：
在aside所在的容器里面添加element的NavMenu组件，此处我们再新建一个Main.vue文件，在这个文件中进行NavMenu的编写。为了能够显示Main.vue中的内容，我们需要在Test.vue中注册这个组件：
<el-aside width="200px">
<navmenu></navmenu>
<!--即输入我们注册好的组件的标签-->
</el-aside>
<script>
import Main from "@/components/Main";
export default {
name: "app",
components: {
navmenu: Main
}
};
</script>
先把官网的组件的源码copy下来（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>导航一</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>
</template>
<script>
export default {
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
};
</script>
这里要做一下说明的是，我们将官方的源代码中的<el-col>和<el-row>标签删掉了。因为如果加上这两个标签的话，整个navmenu的高度将无法充满整个窗口。看一下效果：
下拉子菜单右侧没有完全对齐，存在溢出的情况。而且导航栏的每个子菜单好像位置有点靠右了。经过检查元素的样式发现是因为border-right组件留出了1px的边界导致无法对齐，然后再按照视觉要求调整相应的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>
最后的效果如下：
此次的页面布局就介绍到这里，下一节将会介绍路由的相关使用。
