2 搭建一个简单的后台管理布局

文件创建

在准备好相关环境后，我们开始创建自己的项目。整个项目的目录结构如下图所示

image

我们在src/components/下创建一个Test.vue文件，这个文件名可以是任意的修改，相关代码如下：

然后修改router.ts中的路由信息，有关路由的进阶使用后面会进行学习。将路由中的根路由修改为为如下：

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

保证main.ts文件中存在标签，这是一个匹配路由视图的标签，只有存在这个标签，才能正常的通过路由渲染并访问相关内容，最后访问结果：

image

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中试试

效果图如下：

image

但是在实际的展示过程中布局并没有充满整个浏览器，我们来试试如何充满浏览器。

我们在App.vue中的样式部分添加如下代码即可

html,
body,
#app,
.el-container {
  /*设置内部填充为0，几个布局元素之间没有间距*/
  padding: 0px;
  /*外部间距也是如此设置*/
  margin: 0px;
  /*统一设置高度为100%*/
  height: 100%;
}

最终效果：

image

在aside所在的容器里面添加element的NavMenu组件，此处我们再新建一个Main.vue文件，在这个文件中进行NavMenu的编写。为了能够显示Main.vue中的内容，我们需要在Test.vue中注册这个组件：

先把官网的组件的源码copy下来（html和script部分）：

这里要做一下说明的是，我们将官方的源代码中的和标签删掉了。因为如果加上这两个标签的话，整个navmenu的高度将无法充满整个窗口。看一下效果：

image

下拉子菜单右侧没有完全对齐，存在溢出的情况。而且导航栏的每个子菜单好像位置有点靠右了。经过检查元素的样式发现是因为border-right组件留出了1px的边界导致无法对齐，然后再按照视觉要求调整相应的padding-left和padding-right。

最后的效果如下：

image

此次的页面布局就介绍到这里，下一节将会介绍路由的相关使用。