一个文笔一般，想到哪是哪的唯心论前端小白。

🧠 - 简介

layout 在一个项目中的作用就是一个地基。

当然，所谓的 layout 并不只是 <el-container> ，而是与 <el-container> 配套的一些通用组件：Header、Footer、BreadCrumb、Menu。除此之外也包含了一个项目中必备的业务页面 Login、404、营销页。

所以这篇就是记录这些内容的。

👁️ - 分析

先粘两个效果图出来吧！

主要页面：

根据现有项目经验，右边面包屑下面的就是 <router-view> ，有了核心地方，其他四个板块也就很清晰了。需要考虑的就是样式问题，除了router-view部分自适应宽高之外，都是固定的位置。

所以我就设计了四个参数来控制各个部分：

const layoutConfig = reactive({
  hasBread: true,
  hasFooter: true,
  hasAside: true,
  hasHeader: true,
  
  ignoreMainPadding: false,
})

登录页面：

和主要页面相比，登录页面则是代表了没有周边板块的一类页面。

🫀 - 拆解

相关的组件包含：

• common-block
  • CommonBread.vue 面包屑
  • CommonFooter.vue 底部
  • CommonHeader.vue 头部
• common-menu 菜单
  • Menu.vue
  • SubMenuItem.vue

如前文设计中所说，这几个组件不是全局组件，只是被 layout 引用和处理的。

这一部分的内容其实很常用了，几乎所有的项目都会包含。正是如此所以有些细节更是需要考虑进去的。

1. 滚动条问题，管理平台的滚动条应该只有弹框和表格里面的才有，如果 router-view 里面有的话也是 div 级别的，所以浏览器的滚动条就显得有些多余了。
2. 各组件数据同步问题
   • 面包屑：面包屑数据我放在了 route.mete 里面
   • 菜单：菜单需要注意的都是一些小细节
     • 模块切换时，菜单同步更新
     • 通过 url 访问项目时，初始化高亮菜单项
     • 重复点击菜单时，阻止页面重载和报错
   • 用户信息：用户信息全局统一化
   • 主题色、水印配置等数据的本地化
3. 主题色初始化和水印等配套功能的初始化、更新等。
4. 全局 router 和 store 的配套设计。

💪 - 落实

记录几段核心代码，用以日后回溯使用。

pinia 的封装与使用并本地持久化

import { defineStore } from 'pinia';
import pinia from '@/store/install';

const useMainStore = defineStore('main', {
  state: () => ({
    loading: false,
    token: '',
    currentScale: 0,
    userInfo: {
      username: 'zhagnsan', // 用户名
      realname: '张三', // 真实姓名
      sex: 'm', // 性别
      phone: '15227974556', // 电话
      email: '15227974559@163.com', // 邮箱
      birth: '1992-05-01', // 出生日期
      avantor: '', // 头像
    },
  }),
  getters: {
    getUsername: (state) => state.userInfo?.username,
    getToken: (state) => state.token,
    getCurrentScale: (state) => state.currentScale,
  },
});

// 数据持久化
// 1. 保存数据
const instance = useMainStore(pinia);
instance.$subscribe((_, state) => {
  localStorage.setItem(
    'login-store',
    JSON.stringify({
      ...state,
    }),
  );
});

// 2. 获取保存的数据，先判断有无，无则用先前的
const old = localStorage.getItem('login-store');
if (old) {
  instance.$state = JSON.parse(old);
}

export { useMainStore };

//  分割线---------------------------

// 使用

// 1- 更新
import { useMainStore } from '@/store';
const mainStore = useMainStore();
mainStore.$patch({
    token: '123',
    userInfo: {
      realname: loginForm.username
    },
});

// 2- 获取
import { useMainStore } from '@/store';
const mainStore = useMainStore();
const userInfo = computed(() => mainStore.userInfo);

菜单相关问题的解决方案

1. 模块切换时，菜单同步更新

   项目设计之初，已经有针对性的将菜单和模块进行绑定。在切换模块的时候同步更新 菜单数据即可，并且menu的高亮规则使用 router 模式即可。

   有些项目比较简单，则将 menu 数据和模块进行解耦，menu 放在一块即可。

2. 重复点击问题

   重复点击问题是经常遇到的，有两个解决方案：

   • 配置router守卫，如果目的地址和当前地址一致，则 return false
   • 在 menu 的点击事件中，判断如果当前高亮项和点击项一致则阻止点击事件

🛀 - 总结

当时做模板项目的时候遇到不少坑，但是现在已经记不起来了，所以就先这么的吧！

系列文章:

1. 脚手架开发
2. 模板项目初始化
3. 模板项目开发规范与设计思路
4. layout设计与开发
5. login 设计与开发
6. CURD页面的设计与开发
7. 监控页面的设计与开发
8. 富文本编辑器的使用与页面设开发设计
9. 主题切换的设计与开发并页面
10. 水印切换的设计与开发
11. 全屏与取消全屏
12. 开发提效之一键生成模块(页面)