创建基于Layout的基础架构
Layout页面结构图：
1.整个页面分为3部分，首先去创建对应的3个组件：
- layout/components/Sidebar/index.vue
- layout/components/Navbar.vue
- layout/components/AppMain.vue
2.然后在layout/index.vue中引入这3个组件：
<script setup>
import Sidebar from './components/Sidebar/index.vue'
import Navbar from './components/Navbar.vue'
import AppMain from './components/AppMain.vue'
</script>
3.完成对应的布局结构：
<template>
<div class="app-wrapper">
<Sidebar class="sidebar-container" />
<div class="main-container">
<div class="fixed-header">
<!--顶部header-->
<Navbar />
</div>
<!--内容区-->
<AppMain />
</div>
</div>
</template>
4.在styles中创建scss文件：
- variables.scss：定义常量
- mixin.scss：定义通用的css
- sidebar.scss：处理menu菜单的样式
5.为variables.scss定义如下常量并导出；
// sidebar
$menuText: #bfcbd9;
$menuActiveText: #ffffff;
$subMenuActiveText: #f4f4f5;
$menuBg: #304156;
$menuHover: #263445;
$subMenuBg: #1f2d3d;
$subMenuHover: #001528;
$sideBarWidth: 210px;
// Js与scss共享变量，在scss中通过:export进行导出，在js中可通过ESM进行导入
:export {
menuText: $menuText;
menuActiveText: $menuActiveText;
subMenuActiveText: $subMenuActiveText;
menuBg: $menuBg;
menuHover: $menuHover;
subMenuBg: $subMenuBg;
subMenuHover: $subMenuHover;
sideBarWidth: $sideBarWidth;
}
6.为mixin.scss定义如下样式：
@mixin clearfix {
/**选中它的父亲*/
&:after {
content: '';
display: table;
clear: both;
}
}
@mixin scrollBar {
&::-webkit-scrollbar-track-piece {
background: #d3dce6;
}
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background: #99a9bf;
border-radius: 20px;
}
}
@mixin relative {
position: relative;
width: 100%;
height: 100%;
}
7.sidebar.scss样式：
#app {
.sidebar-container {
width: 300px;
background-color: pink;
}
}
8.在index.scss中按照顺序导入以上样式文件；
@import './variables.scss';
@import './mixin.scss';
@import './sidebar.scss';
9.在layout/index.vue中写入如下样式；
<style lang="scss" scoped>
@import '~@/styles/mixin.scss';
@import '~@/styles/variable.scss';
.app-wrapper {
height: 100vh;
display: flex;
}
.main-container {
flex-grow: 1;
}
</style>
我这里遇到一个问题， variables.scss导出variables为空对象，我这里改为variables.module.scss文件名就解决了这个问题；
10.因为将来要实现主题更换，所以为sidebar赋值动态的背景颜色：
<Sidebar
class="sidebar-container"
:style="{ backgroundColor: variables.menuBg }"
/>
11.为Navbar、Sidebar、AppMain组件进行初始化代码；
给APPMain添加样式；
<style lang="scss" scoped>
.app-main {
min-height: calc(100vh - 50px);
overflow: hidden;
padding: 60px 20px 20px 20px;
box-sizing: border-box;
}
</style>
