3.首页布局

页面整体布局是一个产品最外层的框架结构，往往会包含导航、侧边栏、面包屑以及内容等。

vue3-admin 中大部分页面都是基于这个 layout 的，除了个别页面如：login , 404, 401 等页面没有使用该layout。如果你想在一个项目中有多种不同的layout也是很方便的，只要在一级路由那里选择不同的layout组件就行。

/foo                                  /bar
+------------------+                  +-----------------+
| layout           |                  | layout          |
| +--------------+ |                  | +-------------+ |
| | foo.vue      | |  +------------>  | | bar.vue     | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

效果图

访问 ‘/‘ 重定向到 ‘/dashboard’

3-1 创建layout布局组件

在src下创建layout/index.vue, 布局主要使用flex box。

<template>
  <div class="app-wrapper">
    <div class="sidebar-container">sidebar</div>
    <div class="main-container">
      <div class="header">
        <div class="navbar">navbar</div>
        <div class="tags-view">tagsview</div>
      </div>
      <div class="app-main">
        <h2>app main</h2>
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  .app-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    .main-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      .header {
        background: cyan;
        .navbar {
          height: 50px;
          background: #1890ff;
        }
        .tags-view {
          height: 34px;
          background: #12efff;
        }
      }
      .app-main {
        /* 50= navbar  50  如果有tagsview + 34  */
        min-height: calc(100vh - 84px);
        background: red;
      }
    }
  }
</style>

3-2 创建Dashboard页面

src/views下创建路由页
views/dashboard/index.vue

<template>
  <div>
    <h1>Dashboard page</h1>
  </div>
</template>
<script>
export default {
  name: 'Dashboard'
}
</script>

3-3 配置路由

src/router/index.ts
路由页主要作为布局组件的子路由

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import Layout from '@/layout/index.vue'
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        name: 'Dashboard',
        component: () => import(/* webpackChunkName: "dashboard" */ '@/views/dashboard/index.vue'),
        meta: {
          title: 'Dashboard'
        }
      }
    ]
  }
]
const router = createRouter({
  history: createWebHashHistory(),
  routes
})
export default router

稍等还需要修正下样式

3-4 styles样式文件

样式使用sass编写，使用前先安装sass

npm install sass —save https://vitejs.cn/guide/features.html#css-pre-processors

然后在src下创建 styles目录存放全局样式文件，目前没多少样式可以直接拷贝

src\styles\index.scss

入口css

@import './variables.scss';
@import './sidebar.scss';
html {
  height: 100%;
  box-sizing: border-box;
}
body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}
#app {
  height: 100%;
}

src\styles\sidebar.scss

主要针对sidebar的样式

#app {
  .sidebar-container {
    width: $sideBarWidth !important;
    height: 100%;
    background-color: pink;
  }
}

src\styles\variables.scss

导出一些scss变量 可在js中使用scss变量

// base color
$blue:#324157;
$light-blue:#3A71A8;
$red:#C03639;
$pink: #E65D6E;
$green: #30B08F;
$tiffany: #4AB7BD;
$yellow:#FEC171;
$panGreen: #30B08F;
// sidebar
$menuText:#bfcbd9;
$menuActiveText:#409EFF;
$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951
$menuBg:#304156;
$menuHover:#263445;
$subMenuBg:#1f2d3d;
$subMenuHover:#001528;
$sideBarWidth: 210px;
// The :export directive is the magic sauce for webpack
// https://mattferderer.com/use-sass-variables-in-typescript-and-javascript
:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  subMenuActiveText: $subMenuActiveText;
  menuBg: $menuBg;
  menuHover: $menuHover;
  subMenuBg: $subMenuBg;
  subMenuHover: $subMenuHover;
  sideBarWidth: $sideBarWidth;
}

scss类型声明文件
ts中使用sass变量 需要类型声明
参考文档 https://mattferderer.com/use-sass-variables-in-typescript-and-javascript
新建 src\styles\variables.scss.d.ts

export interface ScssVariables {
  menuText: string;
  menuActiveText: string;
  subMenuActiveText: string;
  menuBg: string;
  menuHover: string;
  subMenuBg: string;
  subMenuHover: string;
  sideBarWidth: string;
}
export const variables: ScssVariables
export default variables

最后，在src/main.ts中引入全局css
先安装normalize.css

npm i normalize.css --save
或
pnpm install normalize.css  --save

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import ElementPlus from 'element-plus';
import store from './store'
// 初始化css 重置css默认样式
import 'normalize.css/normalize.css'
// 全局 css
import '@/styles/index.scss'
createApp(App)
  .use(store)
  .use(router)
  .use(ElementPlus)
  .mount('#app')

本节参考源码

https://gitee.com/brolly/vue3-element-admin/commit/a24aac74b26a044efbbbea51ae687f7eb490eeab

对于每节文章有问题需要补充评论的 大家可以写在每节下方评论处 感谢