前端学习02-页面搭建与路由配置

Container页面搭建与Router路由配置

1. 页面布局

1.1. 容器-container

布局的主题思路：

一直项目的入口是App.vue，那我们就在App.vue进行布局：

el-container / el-header / el-aside / el-main:https://element.eleme.cn/#/zh-CN/component/container

用于布局的容器组件，方便快速搭建页面的基本结构：

<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

一般是用不上footer，也可以用来写一些版本号或者个人信息之类的。

等等还有很多，详细可以看文档。

文档的下面有一些属性，排列方式，上下，宽度等等。

1.2. 布局规划

我们打算搭建的结构如下，一共需要两个大的container标签，一个container是上面的header，一个container是下面的Aside+Main。

App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<template>
  <div id="app">

    <!-- 此container用来定义上层空间 -->
    <el-container>
      <!-- el定义的头部空间，在css里面设置标签的背景颜色 -->
      <el-header style="background-color: #4c535a;">
        头部内容

      </el-header>
    </el-container>

    <!-- 此container用来定义下层空间 -->
    <el-container>

      <!-- el定义的左侧空间，又称为侧边栏 -->
      <!-- 左侧边栏样式，设置高度为屏幕高度（也就是高度铺满），背景色为#545c64，宽度为250px -->
      <!-- overflow: hidden; 设置了边框的溢出效果为隐藏。当内容超出边框时，多余的内容将被隐藏。 -->
      <el-aside style="overflow: hidden; min-height: 100vh; background-color: #545c64; width: 250px;">

        侧边栏内容

      </el-aside>

      <!-- el定义的主题空间 -->
      <el-main>

        主体内容

      </el-main>
    </el-container>
    <router-view/>
  </div>
</template>

可以直接看到效果：

1.3. header-顶栏容器

下面我们添加一个logo：

1
2
3
4
5
6
<el-header style="background-color: #4c535a;">
  <!-- @表示src目录，设置了图片的宽度、相对定位和上面的距离。-->
  <img src="@/assets/logo.png" alt="" style="width: 40px; position: relative; top: 10px;">
  <!-- span标签用于包裹文本，设置了字体，左侧的间距，字体的颜色 -->
  <span style="font-size: 20px; margin-left: 15px; color: rgb(132, 127, 127);">Vue学习项目</span>
</el-header>

效果：

1.4. aside侧边容器，NavMenu导航菜单

菜单组件文档menu：https://element.eleme.cn/#/zh-CN/component/menu

Nav是navigation的缩写，意思是跳转。和跳转相关的都在naviation标签里面。

我们找到左侧菜单的组件el-menu。找到源代码（el-menu标签），直接粘贴进去aside标签中。可以直接看到效果。

因为我们上面直接已经进行了布局，所以这次我们直接粘贴到之前的容器里面就行：

可以看到效果：

App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<el-container>
  <!-- el定义的左侧空间，又称为侧边栏 -->
  <!-- 左侧边栏样式，设置高度为屏幕高度（也就是高度铺满）背景色为#545c64，宽度为250px -->
  <!-- overflow: hidden; 设置了边框的溢出效果为隐藏。当内容超出边框时，多余的内容将被隐藏。 -->
  <el-aside style="
      overflow: hidden;
      min-height: 100vh;
      background-color: #545c64;
      width: 250px;
    ">
    <!-- menu是一个菜单栏组件，default-active="2"：设置默认展开的菜单项的索引。
      class="el-menu-vertical-demo"：设置菜单样式为垂直布局。
      @open="handleOpen"：当菜单项展开时，触发handleOpen方法。
      @close="handleClose"：当菜单项折叠时，触发handleClose方法。
      background-color="#545c64"：设置菜单背景颜色。
      text-color="#fff"：设置菜单文本颜色。
      active-text-color="#ffd04b"：设置菜单项激活时的文本颜色。
    -->
    <el-menu :default-active="$route.path" router class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
      background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
      
      <!-- 创建一个不能创建子菜单的跳转item -->
      <el-menu-item index="/">
        <i class="el-icon-s-home"></i><span slot="title">系统首页</span>
      </el-menu-item>

      <!-- 创建一个能够创建子菜单的submenu，设置索引为2 -->
      <el-submenu index="2">
        <!-- template，插入一个定位模样的icon，定义二级菜单的名称 -->
        <template slot="title">
          <i class="el-icon-location"></i><span>系统管理</span>
        </template>
        <!-- 创建一个菜单项，索引为/admin，文本为“选项1”。 -->
        <el-menu-item index="/admin">管理员信息</el-menu-item>
        <!-- 创建一个菜单项，索引为/user，文本为“选项2”。 -->
        <el-menu-item index="/user">用户信息</el-menu-item>
      </el-submenu>

      <!-- 创建一个能够创建子菜单的submenu，设置索引为3 -->
      <el-submenu index="3">
        <!-- template定义一级菜单的名称 -->
        <template slot="title">
          <!-- 插入一个定位模样的icon -->
          <i class="el-icon-location"></i><span>信息管理</span>
        </template>
        <!-- 创建一个菜单项，索引为/student，文本为学生信息。 -->
        <el-menu-item index="/student">学生信息</el-menu-item>
        <!-- 创建一个菜单项，索引为/notice，文本为系统公告。 -->
        <el-menu-item index="/notice">系统公告</el-menu-item>
        <!-- 创建一个菜单项，索引为/config，文本为配置参数。 -->
        <el-menu-item index="/config">配置参数</el-menu-item>
      </el-submenu>
    </el-menu>
  </el-aside>

  <!-- el定义的主体空间 -->
  <el-main>
    <!-- 定义一个路由占位符，此占位符与index中的索引对应的路径保持一致 -->
    <router-view />
  </el-main>

</el-container>

修复菜单栏右侧出现的小瑕疵：

1
2
3
4
5
<style>
.el-menu {
  border-right: none !important;
}
</style>

关于索引重复

每一个菜单标签的索引都是唯一的，建议最外层的写1，2，3，4。每外层里面写1-1,1-2,1-3等等。如果标签重复了，那么对一个标签内容执行的操作会对另一个菜单也执行。

几个标签的总结：

  1. el-menu：menu是菜单的总标签，下面的标签都是放在menu菜单中的。menu一般放在container→aside中。
  2. el-menu-item：item代表着一个不具有下一级跳转的导航链接，可以当做叶子节点。
  3. el-submenu（template+el-menu-item）：submenu用在menu中，可以再创建一个二级菜单，submenu里面是template和item。template是用来声明二级菜单的icon和名字，然后下面可以直接接item，来创建目录。
  4. el-menu-item-group：用来将item进行分组的，不太常用。

2. 路由router配置

本节主要介绍：如何使用菜单的default-index和router属性来进行点击页面的跳转。

default-active 在NavMenu的Menu Attribute（菜单属性）中。default-active本意是当前激活的index。

default-active+router可以用来通过菜单进行跳转页面。

我们只需要修改el-menu菜单中的属性：

1
2
<el-menu  default-active="2"  class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
          background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">

default-active改为路由对应的地址，然后声明一下表示使用router功能。

1
<el-menu  :default-active="$route.path" router  class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">

下面就可以在标签中填入路由开始用了：

App.vue:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<el-menu  :default-active="$route.path" router  class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
  background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
  <!-- 创建一个不能创建子菜单的跳转item -->
  <el-menu-item  index="/" >
    <i class="el-icon-s-home"></i>
    <span slot="title">系统首页</span>
  </el-menu-item>

  <!-- 创建一个能够创建子菜单的submenu，设置索引为2 -->
  <el-submenu index="2">
    <!-- template定义二级菜单的名称 -->
    <template slot="title">
      <!-- 插入一个定位模样的icon -->
      <i class="el-icon-location"></i><span>系统管理</span>
    </template>
    <!-- 创建一个菜单项，索引为2-1，文本为“选项1”。 -->
    <el-menu-item  index="/admin" >管理员信息</el-menu-item>
    <!-- 创建一个菜单项，索引为2-2，文本为“选项2”。 -->
    <el-menu-item index="2-2">用户信息</el-menu-item>
  </el-submenu>

router/index.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  },
  {
     path: '/admin', 
     name: 'admin', 
     component: () => import('../views/AdminView.vue') 
  }
]

AdminView.vue：

1
2
3
4
5
6
<template>
    <div class="admin">
        <h1>管理员信息页面</h1>
    </div>
</template>

总结：其实我们在菜单的路由其实主要是路由views页面，然后views中内含components。

router→views→components

效果：

3. 知识点记录

3.1. Ext.每个template的根div

在Vue中的语法要求每个template只能有一个根元素。这个根元素可以是任何HTML标签（常见是div），它必须是唯一的，不能有其他兄弟元素。这是为了确保Vue能正确地编译和渲染组件模板。

Vue会将组件模板编译成虚拟DOM，并在内部进行diff算法和更新操作。如果允许多个根元素，那么Vue在处理模板时就无法确定应该如何处理多个根元素的情况。

3.2. Ext.使用div-margin来调整间距

组件一般放在div里，代表一个横框。调节上下左右间距建议使用div的margin来进行设置。

3.3. 表格组件了解

文档：https://element.eleme.cn/#/zh-CN/component/table

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- 表格：border类型为boolean意思是带边框，stripe类型是boolean意思是带斑马纹 -->
<div>
    <el-table :data="tableData" stripe style="width: 100%">
        <!-- 
            prop给本列取名为date，这个prop与到时候传参名对应
            label表示表示页面显示为日期
            width设置了显示的宽度
            align表示对齐方式，默认是居左，这里设置为中心对齐
         -->
        <el-table-column prop="id" label="id" width="100" align="center" />
        <el-table-column prop="name" label="姓名" align="center" />
        <el-table-column prop="age" label="年龄" width="120" align="center" />
        <el-table-column prop="class" label="班级" align="center" />
        <el-table-column prop="phone" label="手机号" align="center" />
        <el-table-column label="操作" align="center">
            <el-button size="mini">编辑</el-button>
            <el-button size="mini" type="danger" plain>删除</el-button>
        </el-table-column>
    </el-table>
</div>

静态数据：

效果图：

3.4. 搜索框与查询按钮

按钮：https://element.eleme.cn/#/zh-CN/component/button

搜索框：https://element.eleme.cn/#/zh-CN/component/input

1
2
3
4
5
6
7
8
9
10
11
<!-- 增加按钮与搜索按钮和搜索框放在一个div里面，代表一个横行，clearable代表输入框可一键删除 -->
<div style="margin-top: 5px; margin-bottom: 20px; ">
    <!-- 搜索框，绑定的是下面定义的字符串变量input -->
    <el-input v-model="input" style="width:250px;" placeholder="请输入内容" clearable></el-input>
    <!-- 按钮样式
        size设置按钮的大小，默认就是medium，
        type设置按钮的主题，也就是颜色
     -->
    <el-button size="medium" type="primary" style="margin-left: 10px;" icon="el-icon-search" plain>搜索</el-button>
    <el-button size="medium" type="success" style="margin-left: 10px;" icon="el-icon-plus" plain>增加</el-button>
</div>

设置初始值，如果不设置的话输入框没法输入内容：

修改输入框的高度

1
2
3
4
5
6
7
<style>
/* 定义输入框的高度，直接定义div或者input标签都没好使 */
.el-input__inner {
    height: 37px !important;
    line-height: 37px !important;
}
</style>

3.5. Ext.组件全局设置

快速上手→全局配置

这会让所有的elmentui的组件都变成小号的。

那么怎么设置全局的按钮某个样式的呢？

  1. 在main.js中import ‘element-ui/lib/theme-chalk/index.css’;（或者我们在第一节创建了一个global.css，使用那个css也行。）
  2. 然后在index.css中设置样式（注意：.开头的表示设置的是标签的样式）
    1
    2
    3
    4
    5
    .el-button {
      height: 30px;
      width: 80px;
      /* 其他样式 */
    }

3.6. 分页器

分页器：https://element.eleme.cn/#/zh-CN/component/pagination

使用element-ui实现表格分页-CSDN博客

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 分页器 -->
<div class="block" style="margin-top:15px;">
    <!-- 
        align='center'对齐方式居中
        @size-change表示每页显示多少条改变时触发
        @current-change表示当前页码改变时触发
        :current-page表示当前页码
        :page-sizes表示每页显示多少条的选项，可以自定义
        layout='prev, pager, next, jumper'表示显示页码，上一页，下一页，跳转
        :total表示总共有多少页
     -->
    <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
        layout="total, sizes, prev, pager, next, jumper" :total="400">
    </el-pagination>
</div>
前端
#Vue #ElementUI
前端学习02-页面搭建与路由配置
http://wahoyu.xyz/2024/01/20/Vue02/
作者
Wahoyu
发布于
2024年1月20日
许可协议