项目架构layout搭建方案

一、layout结构搭建

1. 页面结构主要分为三部分：

（1） 左侧菜单menu

（2）顶部navbar

（3）中间内容区main

2.layout组件编写

（1）创建三个区域组件，引入到layout中

先分左右，再分上下

<template>
  <div class="app-wrapper">
    <!-- 侧边栏 -->
    <div class="side-container">
      <SideBar />
    </div>
    <div class="right-container">
      <!-- 顶部导航栏 navbar -->
      <div class="fixed-header">
        <NavBar />
      </div>
      <AppMain />
      <!-- 内容区 main -->
    </div>
  </div>
</template>
<script setup>
import {} from 'vue'
import SideBar from './components/sideBar'
import AppMain from './components/appMain'
import NavBar from './components/navbar'

（2）创建style文件夹，管理css文件

a.variables.scss 存放scss变量 ：scss常量和js共享常量

// 定义常量
// sidebar
$menuText: #bfcbd9;
$menuActiveText: #ffffff;
$subMenuActiveText: #c7eb12;
$menuBg: #304156;
$menuHover: #263445;
$subMenuBg: #1f2d3d;
$subMenuHover: #001528;
$sideBarWidth: 210px;
$hideSideBarWidth: 54px;
$sideBarDuration: 0.28s;
$navBarBg: #ffffff;
$Hamburger: #000000;
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
// JS 与 scss 共享变量，在 scss 中通过 :export 进行导出，在 js 中可通过 ESM 进行导入
:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  subMenuActiveText: $subMenuActiveText;
  menuBg: $menuBg;
  menuHover: $menuHover;
  subMenuBg: $subMenuBg;
  subMenuHover: $subMenuHover;
  sideBarWidth: $sideBarWidth;
  navBarBg: $navBarBg;
  Hamburger: $Hamburger;
}

b.mixinx.scss 存放mixin 可复用样式

c.sidebar.scss 存放侧边栏样式

（3）在index.scss中引入上面的文件

a.在scss中，引入其他文件 用@import

@import './variables.scss'

b.在script中使用scss常量

在script引入变量，可以在template中直接使用

<template>
    <div class="sidebar-container" :style="{ background: variables.menuBg }">
      <SideBar></SideBar>
    </div>
</template>
<script setup>
import variables from '@/styles/variables.scss'
</script>

c. scss中 ‘ #{} ‘语法的作用是，将内部当作scss变量使用

二、本章包含了几个核心解决方案

1.用户动态退出方案

2.动态侧边栏方案

3.动态面包屑方案

四、其他小功能

1.退出逻辑封装

2.伸缩侧边栏动画

3.vue3动画

4.组件状态驱动的动态css值