开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第12天，点击查看活动详情

写在前面

上篇文章介绍了如何在vite+vue项目中限制登录账号和密码，并使用md5加密密码，本篇文章介绍如何在vite+vue项目中编写后台页面布局

完整源码：项目gitee地址

在线演示：演示地址

账号：admin
密码：admin

页面布局

首先我们要知道我们的页面整体是怎么布局的，如下图所示，主要分为头部、侧边菜单栏、标签页栏、页面内容主体部分。

创建头部、侧边菜单栏、标签页栏文件

创建编写头部的文件，在layout目录下新建Header.vue文件，代码如下，头部我给他50px的高度，并且给一个淡蓝色的背景颜色：

<template>
  <div class="header">头部</div>
</template>

<script setup lang="ts">
</script>

<style lang="less" scoped>
.header {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  font-size: 18px;
  color: #fff;
  background-color: #057de3;
}
</style>

创建编写侧边菜单栏的文件，在layout目录下新建Sidebar.vue文件，代码如下，collapse在后期会用来实现侧边菜单栏折叠的功能，设置侧边菜单栏未折叠时宽度为200px，折叠时宽度为65px，并且给他一个transition，在折叠时会有一个小小的缓冲动画：

<template>
  <div class="sidebar" :style="{ width: collapse ? '65px' : '200px' }">
    侧边菜单栏
  </div>
</template>

<script setup lang="ts">
import store from "@/store";
import { computed } from "@vue/runtime-core";

const collapse = computed(() => store.webStore.collapse);
</script>

<style lang="less" scoped>
.sidebar {
  position: absolute;
  left: 0;
  top: 52px;
  bottom: 0;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  border-top-right-radius: 5px;
  background-color: #fff;
}
</style>

创建编写标签页栏的文件，在layout目录下新建Tabs.vue文件，代码如下：

<template>
  <div class="tabs">标签页栏</div>
</template>

<script setup lang="ts">
</script>

<style lang="less" scoped>
.tabs {
  height: 40px;
  border-bottom: 1px solid #e4e7ed;
}
</style>

页面内容主体部分通过路由控制，在router下的routes.ts下添加如下代码，通过redirect设置主页面，即下面增加的Dashboard.vue导航页，设置redirect之后，路由跳转至"/"会重定向到'/Dashboard'，通过下面Home.vue中使用<router-view></router-view>实现页面布局：

{
    path: "/",
    redirect: '/Dashboard',
    name: 'Home',
    component: () =>
        import("../layout/Home.vue"),
    children: [
        {
            path: "/Dashboard",
            name: 'Dashboard',
            component: () =>
                import("../views/Dashboard.vue"),
            meta: { title: "导航页" },
        }
    ],
},

然后在views下新建Dashboard.vue文件，代码如下：

<template>页面内容主体部分</template>

<script setup lang="ts">
</script>

<style lang="less" scoped>
</style>

如此，我们就可以在Home.vue中开始编写布局代码了，Home.vue代码变成如下，同样，collapse后面会用来折叠菜单，菜单折叠后页面主体内容部分相应变宽，这里还涉及到在父组件中引入子组件的方法，和vue2也有所不同，这里似是import之后直接用，不用在components中注册：

<template>
  <div class="app_home">
    <v-header></v-header>
    <v-sidebar></v-sidebar>
    <div class="content_box" :class="{ content_collapse: collapse }">
      <v-tabs></v-tabs>
      <div class="content_main">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import store from "@/store";
import { computed } from "@vue/runtime-core";

import VHeader from "./Header.vue";
import VSidebar from "./Sidebar.vue";
import VTabs from "./Tabs.vue";

const collapse = computed(() => store.webStore.collapse);

</script>

<style lang="less" scoped>
.app_home {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #ebf1f6;
  position: relative;
  .content_box {
    position: absolute;
    left: 202px;
    right: 0;
    top: 51px;
    bottom: 0;
    transition: left 0.3s ease-in-out;
  }
  .content_main {
    width: auto;
    min-width: 1100px;
    height: calc(100vh - 91px);
    overflow-y: auto;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 2px;
  }
  .content_collapse {
    left: 67px;
  }
}
</style>

全部代码编写完后页面效果如下：

关于Volar

原本的Vetur插件暂不支持TypeScript，所以推荐改用Volar，否则上面Home.vue文件中的组件导入会提示“has no default export”报错信息，所以我们在vscode中安装插件Volor，并且在页面中选择使用Volar格式化文档。

写在最后

以上就是在vite+vue项目中编写后台页面布局的所有代码和说明

vite+vue项目之后台页面布局代码编写

写在前面

页面布局

创建头部、侧边菜单栏、标签页栏文件

关于Volar

写在最后