一次简单的Vue项目

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

文件创建

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

image

我们在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>标签,这是一个匹配路由视图的标签,只有存在这个标签,才能正常的通过路由渲染并访问相关内容,最后访问结果:

image

使用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>

效果图如下:

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中注册这个组件:

<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的高度将无法充满整个窗口。看一下效果:

image

下拉子菜单右侧没有完全对齐,存在溢出的情况。而且导航栏的每个子菜单好像位置有点靠右了。经过检查元素的样式发现是因为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>

最后的效果如下:

image

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

推荐阅读更多精彩内容

  • 3 路由实现 在摸爬滚打一段时间后,决定进行路由相关的处理。 利用导航栏进行路由 本文采用的是element ui...
    Prejudice_ccca阅读 241评论 0 1
  • 5 登录验证及权限设置 既然要做一个系统,肯定就少不了登录验证,我们先实现一个简单的登录页面。首先在compone...
    Prejudice_ccca阅读 2,667评论 2 1
  • 4 表格使用 表格是前端经常使用到的一个工具,尤其是在管理系统中,因为存在着数据的展示和操作(增删改查)。 我们将...
    Prejudice_ccca阅读 203评论 0 0
  • 1 环境准备 最近由于项目需要且人员不足(其实是不想求别人。。。),又希望多学点知识,于是动手自己搭建一个后台管理...
    Prejudice_ccca阅读 374评论 0 1
  • 我向来不喜欢诡异这个词的,连这种状态都不喜欢,害怕而恐惧…… 却在今日进储藏室时,蓦然抬头感觉昏暗的灯下有一个身影...
    活着不易阅读 133评论 6 4