从零开始Vue3+Element Plus的后台管理系统(二)——Layout页面布局的实现_vue3 layout

作者：IT小白 | 2024-05-06 05:03:42

踩

vue3 layout

项目搭建好之后，开始写基本的布局。后台管理系统的布局3大元素：头部、侧栏、主要内容，各种布局结构相差不大，我选择了下图所示的布局，其中头部、侧栏、页签在页面中是固定的，只有主要内容容器会跟随页面滚动。

Slice 1.png

Layout布局的目录结构

｜- layout
    ｜- header                 // 头部
        index.vue
    ｜- sidebar                // 侧栏
        index.vue
        SidebarItem.vue        // 侧栏菜单递归组件
    ｜- tags                   // 页签
        index.vue
    index.vue                  // 布局入口
1
2
3
4
5
6
7
8
9

代码就不贴了，仓库有

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/542595