vue3+Ant Design Vue 搭建后台管理Layout布局

效果图

划分一下区域

搭建Layout布局

页面

1. 在src下面创建layout目录，这里面放置layout相关的页面组件(侧边栏、头部、主体部分等)。

2. 各个模块
   

• 我这里是把各个区域的页面按模块区分，在index.vue导入使用。

  layout/components

  • SideBar(侧边栏)
    • Logo(侧边栏Logo)
  • Content(主体部分)
  • Header(右侧头部)
  • Footer(右侧底部区域)
    
    
    layout/index.vue
    
    layout/index.ts：这里统一导出模块

  

• index.ts
  

• index.vue
  

• SideBar/index.vue

  • Logo组件就在这里面被使用了。因为Logo也是侧边栏的一部分。
    
    
    

• Header/index.vue
  

• Content/index.vue
  

• Footer/index.vue
  

功能

点击动态收缩侧边栏

1. 我们知道sider侧边栏 collapsed参数可以控制收起状态，我们给它绑定一个变量
2. 点击icon的时候控制 sider侧边栏 collapsed参数绑定的变量即可。
3. ？这时候我们会遇到问题，因为侧边栏和icon所在的header组件不在一个页面里面，那我们能在icon所在的页面控制到collapsed参数绑定的变量呢？
4. 我这里采用的是Pinia状态管理来管理这个参数并且存入用户本地缓存。

• 我们先来看一下我们控制侧边栏的icon所在的这个页面（在header/index.vue中。）

  

• 方法中使用到了sidebar，我们可以看到是useAppStore里面暴露的，因为我使用了pinia。我们来看下useAppStore所在的文件 app.ts

  

• 可以看到我这里引入了app-key 和 local-storage，这也分别对应两个ts文件，代码如下。

• 这里我local-storagets也引用了一个别的文件，cache-key.ts

好了，现在简单来捋一下代码逻辑

• 当存入了本地缓存，然后侧边栏那边collapsed参数绑定的计算属性就会监听到从而改变侧边栏收起、展开状态。