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

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天点击查看活动详情

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

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

接上篇。

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

1. 在index.html中加入以下样式：

html,body,#app{
  padding: 0px;
  margin: 0px;
  height: 100%;
  box-sizing: border-box;
}

2. 将main.ts引入的额外样式注释掉

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

index.vue

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

4. 修改router配置： router/index.ts文件修改成下面：

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

启动工程可以看到首页如下：

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

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

header/index.vue

<template>
  <div>header</div>
</template>
<script lang='ts' setup>
</script>
<style lang='scss' scoped>
</style>

sidebar/index.vue

<template>
  <div>sidebar</div>
</template>
<script lang='ts' setup>
</script>
<style lang='scss' scoped>
</style>

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

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

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