1 添加 css 预处理器 sass
npm install -D sass sass-loader
2 在src目录下新建layout目录，然后新建index.vue组件
<template>
<div class="basicLayout">
<a-layout class="layout">
<a-layout-sider class="sider">
<div class="sider-logo" >
<a>
<img src="/logo.svg" alt="logo">
<h1>ziyo-admin</h1>
</a>
</div>
</a-layout-sider>
<a-layout>
<a-layout-header class="header">Header</a-layout-header>
<a-layout-content class="content">Content</a-layout-content>
<a-layout-footer class="footer">Footer</a-layout-footer>
</a-layout>
</a-layout>
</div>
</template>
<script setup>
</script>
<style scoped lang='scss'>
.basicLayout{
height: 100%;
overflow: hidden
}
.layout{
height: 100%;
.header{
height: 50px;
background: #fff;
}
.sider{
background: #fff;
.sider-logo{
position: relative;
display: flex;
padding: 16px 24px;
cursor: pointer;
>a{
display:flex;
align-items: center;
justify-content: center;
min-height: 32px;
width: 100%;
}
img{
display: inline-block;
height: 32px;
vertical-align: middle;
}
}
}
}
</style>
3 index.html中，给#app添加100%的高度
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
</head>
<body>
<div id="app" style="height: 100%"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
4 左侧菜单制作
4.1 安装图标
npm install --save @ant-design/icons-vue
<template>
<div>
<a-menu
v-model:selectedKeys="selectedKeys"
mode="inline"
theme="light"
class="sider-menu"
>
<a-menu-item key="1">
<template #icon>
<MailOutlined/>
</template>
<span>Option 1</span>
</a-menu-item>
<a-menu-item key="2">
<template #icon>
<CalendarOutlined />
</template>
<span>Option 2</span>
</a-menu-item>
<a-menu-item key="3">
<template #icon>
<AppstoreOutlined />
</template>
<span>Option 3</span>
</a-menu-item>
</a-menu>
</div>
</template>
<script setup>
import {ref } from 'vue';
import {
MailOutlined,
CalendarOutlined,
AppstoreOutlined,
} from '@ant-design/icons-vue';
const selectedKeys = ref(['1']);
</script>
<style scoped lang='scss'>
</style>
<template>
<div class="basicLayout">
<a-layout class="layout">
<a-layout-sider class="sider">
<div class="sider-logo" >
<a>
<img src="/logo.svg" alt="logo">
<h1>ziyo-admin</h1>
</a>
</div>
<SiderMenu/>
</a-layout-sider>
<a-layout>
<a-layout-header class="header">Header</a-layout-header>
<a-layout-content class="content">Content</a-layout-content>
<a-layout-footer class="footer">Footer</a-layout-footer>
</a-layout>
</a-layout>
</div>
</template>
<script setup>
import SiderMenu from "@/layouts/components/sider-menu.vue";
</script>
<style scoped lang='scss'>
.basicLayout{
height: 100%;
overflow: hidden
}
.layout{
height: 100%;
.header{
height: 50px;
background: #fff;
}
.sider{
background: #fff;
.sider-logo{
position: relative;
display: flex;
padding: 16px 24px;
cursor: pointer;
>a{
display:flex;
align-items: center;
justify-content: center;
min-height: 32px;
width: 100%;
}
img{
display: inline-block;
height: 32px;
vertical-align: middle;
}
}
}
}
</style>
