0-1搭建Vue3+Vite3模板工程（3）-布局

发表于 更新于 分类于 阅读次数：
本文字数： 2.8k 阅读时长 ≈ 5 分钟

0-1搭建Vue3+Vite3模板工程（1）-创建工程

0-1搭建Vue3+Vite3模板工程（2）-安装依赖

接上篇。

通常后管平台多以左右布局或上下布局为主，本篇讲解如何进行整体布局，以左右布局为例。

  1. 在index.html中加入以下样式：
1
2
3
4
5
6
html,body,#app{
  padding: 0px;
  margin: 0px;
  height: 100%;
  box-sizing: border-box;
}
  1. 将main.ts引入的额外样式注释掉

image.png

  1. 在src下新建layout文件夹，在layout下新建index.vue文件，在此文件中写整体布局。

index.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
<template>
  <el-container class="layout">
    <el-aside class="asside" width="200px">Aside</el-aside>
    <el-container class="layout">
      <el-header class="header">Header</el-header>
      <el-main class="main">Main</el-main>
    </el-container>
  </el-container>
</template>
<script setup lang="ts"></script>
<style lang="scss">
.layout {
  height: 100%;
  .asside {
    color: #fff;
    background-color: rgb(48, 65, 86);
  }
  .header {
    color: #fff;
    background-color: #212938;
  }
  .main {
    background-color: #fff;
  }
}
</style>
  1. 修改router配置：
    router/index.ts文件修改成下面：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
    import Layout from '@/layout/index.vue'
    const routes: Array<RouteRecordRaw> = [
      {
        path: '/',
        name: 'Home',
        component: Layout
      }
    ]
    const router = createRouter({
      history: createWebHistory(),
      routes
    })
    export default router
    启动工程可以看到首页如下：

image.png

  1. 抽离头部和左侧菜单导航组件

在layout下新建header和sidebar文件夹，分别新建index.vue文件

header/index.vue

1
2
3
4
5
6
7
<template>
  <div>header</div>
</template>
<script lang='ts' setup>
</script>
<style lang='scss' scoped>
</style>

sidebar/index.vue

1
2
3
4
5
6
7
<template>
  <div>sidebar</div>
</template>
<script lang='ts' setup>
</script>
<style lang='scss' scoped>
</style>

修改layout/index.vue, 引入header和sidebar两个组件：

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>
  <el-container class="layout">
    <el-aside class="asside" width="200px">
      <sidebar></sidebar>
    </el-aside>
    <el-container class="layout">
      <el-header class="header">
        <my-header></my-header>
      </el-header>
      <el-main class="main">Main</el-main>
    </el-container>
  </el-container>
</template>
<script setup lang="ts">
import MyHeader from './header/index.vue'
import Sidebar from './sidebar/index.vue'
</script>
<style lang="scss">
.layout {
  height: 100%;
  .asside {
    color: #fff;
    background-color: rgb(48, 65, 86);
  }
  .header {
    color: #fff;
    background-color: #212938;
  }
  .main {
    background-color: #fff;
  }
}
</style>

到此，整体布局做好了，大家可以根据自己需求调整，也可以调整为上下布局，下面讲解如何制作侧边菜单导航及面包屑。

-------------本文结束&感谢您的阅读-------------
相关文章