项目搭建好之后，开始写基本的布局。后台管理系统的布局3大元素：头部、侧栏、主要内容，各种布局结构相差不大，我选择了下图所示的布局，其中头部、侧栏、页签在页面中是固定的，只有主要内容容器会跟随页面滚动。 ![Slice 1.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e787ac1cbd9145439b135252e610bfb1~tplv-k3u1fbpfcp-watermark.image#?w=686\&h=437\&s=13238\&e=png\&b=f8f8f8) ### Layout布局的目录结构 ```js ｜- layout ｜- header // 头部 index.vue ｜- sidebar // 侧栏 index.vue SidebarItem.vue // 侧栏菜单递归组件｜- tags // 页签 index.vue index.vue // 布局入口 ``` 代码就不贴了，仓库有😄 ### 侧栏 Sidebar 侧栏使用el-menu组件，考虑到实际项目中可能不止2级菜单，所以直接使用递归组件实现。侧栏的数据直接来自于我们配置的前端路由，后期会考虑增加多种侧边菜单路由挂载方式。 ### 布局样式实现最开始我做布局的样式，是通过CSS计算主要内容的高度，让滚动条只出现在主要内容容器内，这样就不用对头部、页签应用 position:fixed,也可以实现这些元素的固定。在最新的一版，因为想要实现更有意思的效果——当主要内容滚动到头部，若隐若现的感觉（此处参考了tailwind官网），重新修改了布局的样式 #### backdrop-filter ![1.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/608fccb47b244b899adaa820efde511f~tplv-k3u1fbpfcp-watermark.image#?w=1493\&h=532\&s=1464776\&e=gif\&f=43\&b=f8fbfd) 头部、侧栏、页签都使用position:fixed固定，主要内容区域不再限制高度，让它在整个页面上下滚动。滚动到头部下面的效果，主要使用CSS属性 backdrop-filter > **`backdrop-filter`** [CSS](https://developer.mozilla.org/zh-CN/docs/Web/CSS) 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素*背后*的所有元素，为了看到效果，必须使元素或其背景至少部分透明。此处使用的是`tw-backdrop-blur: blur(4px) `，backdrop-filter是一个很有意思的CSS属性，很像Photo shop中的图层混合模式，大家感兴趣的话可以去MDN详细查阅并亲自试一试。对应tailwind中的backdrop-blur-sm #### 暗黑模式CSS切换 ![2.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/34da55d6ce924421baa0f69c1078b257~tplv-k3u1fbpfcp-watermark.image#?w=1493\&h=532\&s=378434\&e=gif\&f=13\&b=1d1d1f) 方式1. tailwind通过增加`dark:`来标记暗黑模式下使用的class ```html

``` 方式2. element plus预设的暗黑模式，可以通过使用CSS变量切换样式 ```css border: 1px solid var(--el-border-color); background: var(--el-fill-color-blank); ``` 方式3. 直接书写暗黑模式下的CSS 因为暗黑模式实际就是在html标签增加了.dark类，所以直接针对.dark书写对应css即可目前在项目代码中，1、2两种方式都在使用，因为我还没确定哪种更好，还需要多尝试，第3种开始也使用过，后来使用1，2取代之。 #### 实现一键切换暗黑模式上面说了样式的实现，那么如何实现在头部点击一下就自由切换白天黑夜呢？这里使用[vueuse](https://vueuse.org/)，直接贴主要代码 ```html ``` ```js import { useDark, useToggle } from '@vueuse/core' import { Sunny, Moon } from '@element-plus/icons-vue' const isDark = useDark() let darkMode = ref(false) darkMode.value = isDark.value const toggleDark = useToggle(isDark) ``` ### 嵌套路由在router文件夹建立对应路由ts，即可让所需页面应用上面的布局 ```js import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router' import Home from '~/layout/index.vue' const routes: RouteRecordRaw[] = [ { path: '/', name: 'Home', component: Home, redirect: '/dashboard/workbench', children: [{ path: '/about', name: 'about', meta: { title: '关于', icon: 'Mic', order: 100 }, component: () => import('~/views/system/About.vue') } ... ] }, ... ``` ### Keep-Alive 和唯一根节点 Vue3在模板文件中不需要唯一根节点，然而当使用keep-alive的时候，如果使用了多个根节点，点击对应路由打开页面是空白的，transition也失效了。所以在路由菜单对应的页面文件中，我们需要使用唯一根节点，在其他子组件中可以使用多个根节点的方式，可以根据自己的需要灵活调整。 ```js

``` 至此，一个简单的布局就完成了，接下来可以愉快的写一些功能页面了。 ## 项目地址本项目GIT地址：有任何问题或者兴趣也可以在公众号：[自由前端之路](https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzIxMDk3MDQ1MA==\&action=getalbum\&album_id=2959867669372223493\&subscene=159\&subscene=\&scenenote=https%3A%2F%2Fmp.weixin.qq.com%2Fs%2FndB36QsqhumzUEuJxMaDcg\&nolastread=1#wechat_redirect) 找到我。