Vue3后台模板整理

发表于 分类于 Waline：

之前做后台项目的时候，很多基础功能每个项目都要重新复制一遍，所以这次基于 Vue3 和 Vite 重新整理了一套后台模板

这篇主要记录一下后台模板的整体结构，先不深入到某一个功能点。

目前模板主要使用的是：

  1. Vue3
  2. Vite
  3. Element Plus
  4. Pinia
  5. Vue Router
  6. Axios
  7. SCSS

这些东西其实都不陌生，但是放在后台项目里面，还是需要整理出一套固定的写法。

为什么要整理模板

后台项目里面有很多东西是重复的。

比如：

  1. 登录
  2. 权限菜单
  3. 动态路由
  4. 顶部导航
  5. 左侧菜单
  6. 标签页
  7. 表格搜索
  8. 分页
  9. 上传
  10. 接口封装

如果每次新项目都从零开始搭一遍，时间会浪费在很多重复工作上。

所以我这次整理模板的思路就是：把后台系统中基本都会用到的东西先抽出来，后续新项目直接在这个基础上改。

项目结构

主要目录大概是这样：

1
2
3
4
5
6
7
8
9
10
src
├── assets
├── components
├── i18n
├── router
├── stores
├── utils
└── views
    ├── layout
    └── pages

这里面比较重要的是：

  1. components：公共组件
  2. router：基础路由和路由守卫
  3. stores：Pinia 状态管理
  4. utils：请求、枚举、表格 mixin 等公共方法
  5. views/layout：后台整体布局
  6. views/pages：业务页面

布局

后台布局一般都是固定的几块：

  1. 左侧菜单
  2. 顶部栏
  3. 面包屑
  4. 标签页
  5. 页面内容区域

模板里面把这些内容放在 MainLayout.vue 中统一处理。

这样业务页面就不需要关心外层布局，只需要正常写页面内容即可。

普通业务页面大概保持这样的结构：

1
2
3
4
5
<template>
  <div class="page-layout">
    页面内容
  </div>
</template>

这样布局、滚动、标签页缓存都交给外层统一处理。

路由

后台系统的路由分为两类：

  1. 静态路由
  2. 动态路由

静态路由只保留登录页、layout、刷新中转页、404 页面。

真正的业务页面不直接写死在路由表中，而是通过后端返回的菜单动态生成。

这样做的好处是：不同账号看到的菜单不一样，能访问的页面也不一样。

菜单

后台菜单一般都是后端返回的树形结构。

模板中主要使用这些字段：

1
2
3
4
5
6
7
8
9
10
{
  menuId: '1',
  parentId: '0',
  menuTitle: '工作台',
  menuPath: '/home',
  menuIcon: 'HomeFilled',
  menuDisplayStatus: 1,
  menuType: 1,
  children: []
}

前端拿到菜单后，会做几件事：

  1. 保存完整菜单树
  2. 过滤侧边栏显示菜单
  3. 生成动态路由
  4. 保存按钮权限

请求

请求部分还是使用 Axios。

一般后台项目里面，请求封装至少要处理这些事情：

  1. 统一 baseURL
  2. 统一携带 token
  3. 统一处理接口状态码
  4. 登录过期后跳回登录页
  5. 退出时清空路由和权限

这块后续也可以单独整理一篇。

表格

后台里面最多的页面就是表格页。

所以模板中把常用的表格能力放到了 tableMixin.js 中，比如：

  1. 查询
  2. 分页
  3. loading
  4. 表格高度
  5. 时间格式化
  6. 滚动重置

业务页面只需要关注自己的搜索条件和列表数据。

上传

上传也是后台项目里面经常用到的功能。

模板中整理了图片上传和文件上传，主要考虑几个场景：

  1. 单图上传
  2. 多图上传
  3. 文件上传
  4. 新增时清空
  5. 编辑时回填
  6. 保存时统一字段格式

上传组件后面也会单独写一篇。

总结

后台模板最重要的不是页面有多好看，而是基础能力是否完整。

我目前整理的方向就是：

  1. 路由权限统一
  2. 布局统一
  3. 表格统一
  4. 上传统一
  5. 请求统一
  6. 常用组件统一

后续新项目接进来的时候，只要补业务页面和接口就可以了。

以上就是我对 Vue3 后台模板整理的一些理解，如有错误，欢迎大佬指出。

-------------本文结束感谢您的阅读-------------