首页布局

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

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

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

1
2
3
4
5
6
7
8

效果图

访问 '/' 重定向到 '/dashboard'

3-1 创建 layout 布局组件

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

vue

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

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

3-2 创建 Dashboard 页面

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

vue

<template>
  <div>
    <h1>Dashboard page</h1>
  </div>
</template>

<script>
export default {
  name: 'Dashboard'
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12

3-3 配置路由

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

typescript

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

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

稍等还需要修正下样式

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

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%;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

主要针对 sidebar 的样式

css

#app {

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

1
2
3
4
5
6
7
8
9

src\styles\variables.scss

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

css

// 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;
}

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

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

typescript

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

bash

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

1
2
3

typescript

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

本节参考源码

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

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

首页布局 #

效果图 #

3-1 创建 layout 布局组件 #

3-2 创建 Dashboard 页面 #

3-3 配置路由 #

3-4 styles 样式文件 #

src\styles\index.scss #

src\styles\sidebar.scss #

src\styles\variables.scss #

本节参考源码 #

首页布局

效果图

3-1 创建 layout 布局组件

3-2 创建 Dashboard 页面

3-3 配置路由

3-4 styles 样式文件

src\styles\index.scss

src\styles\sidebar.scss

src\styles\variables.scss

本节参考源码