搭建一个极简的 vue3 多窗口后台管理系统模板Ice Cream Admin 的灵感来源于花裤衩大佬的 vue
作者经过两周左右打磨出第一个版本的 Ice Cream Admin 后台管理系统模板，基于 vue3 技术，灵感源于其他项目，目前为个人学习所用。介绍了框架插件、分支标签、功能（如侧边栏菜单配置、角色权限、多窗口）及后续可能实现的功能，还给出了项目地址。
关联问题: 多窗口如何优化 暗黑模式何时实现 动态权限如何改进
前言
经过两周左右的打磨（事实上，真正算起来，没有两周那么长），总算写好了 Ice Cream Admin（雪糕后台管理系统） 的第一个版本。
这是我第一次写 vue3 + vite + pinia + element-plus 项目，对 vue3 生态还不够熟悉，vue3 生态相对于 vue2 生态来说，真的有质的变化。
Ice Cream Admin 的灵感来源于花裤衩大佬的 vue-admin-template 和 vue-element-admin。本项目对标 vue-admin-template，旨在使用最新的 vue3 技术进行实现一个小而精的后台管理系统雏形。
在此，很感谢花裤衩大佬的开源精神，至今大佬的项目都有很多地方值得进行学习。
该项目目前为个人学习所用，还在试验当中，没有经历过任何线上鞭打，所以难免有 bug。
关于“雪糕”（Ice Cream）这个名称
“雪糕”其实是我养的一只猫，原本是想起名“竖琴海豹”（Harp Seal），但是想到不知道怎么 p logo，用别人的图片生怕会侵权，所以干脆把自己养的猫 p 成 logo 算了o(=•ェ•=)m。
随便画了一下，目前的 logo 有点生草......
原图logo先看看效果
登录界面
主界面
设置
我知道你的第一眼感觉就是这系统简直就是 vue-admin-template 的复制品，原来的 vue-admin-template 堪称完美，页面设计基本都没什么瑕疵可言，我真的想不出在页面设计上能有与它不同的更好方案了/(ㄒoㄒ)/~~。
相比之下，Ice Cream Admin 可能唯一的优势就是它是用 vue3 + element-plus 最新技术搭建并实现的，并新增了一个“多窗口”功能。
现在的界面还是比较简陋的，但一开始就没有想去做太多花狸狐哨的东西，越简单越好，越简单就越能专注实现功能。毕竟就是一个写代码的，又不是 UI 设计师。
主要框架/插件及其文档
框架/插件文档vue3cn.vuejs.org/vitevitejs.cn/vue-routerrouter.vuejs.org/zh/piniapinia.vuejs.org/pinia-plugin-persistedstategithub.com/prazdevs/pi…element-pluselement-plus.gitee.io/zh-CN/@element-plus/icons-vuegithub.com/element-plu…另外，该项目是基于 create-vue 脚手架搭建的，相关文档在这里：github.com/vuejs/creat…
项目里 vue 暴露的属性或方法和 element-plus 组件都是通过插件按需自动导入的，所以你会发现项目里有很多类似如下这种情况。
// import { ref } from 'vue' // import { ElMessage } from 'element-plus' // ref 和 ElMessage 都会按需自动导入，无需上面的 import const test = ref() ElMessage('element-plus 消息')
如果你想知道如何实现“按需自动导入”，可以参考这个项目 element-plus-best-practices 的 vite.config.ts 配置（也有关于如何配置 vue 的自动导入）以及 element-plus 自动导入的相关文档。
关于分支（branch）和标签（tags）
分支说明master主干分支develop开发分支deploy发布分支gh-pagesgithub/gitee pages 部署分支如果想要项目的稳定版本，请拉取标签（tags）的相关代码。
谈下功能
侧边栏菜单配置
后台系统最重要的功能：菜单配置，这里和 vue-admin-template 一样都是在路由上进行配置，从而影响菜单，但配置的选项稍有不同。
vue-admin-template 有一些配置选项是直接写到路由对象上，比如：hidden 和 alwaysShow 字段。我这里是将所有相关自定义的功能都放到 meta 属性里，与路由对象的原可配置属性做区分。
这里比 vue-admin-template 多了两个可配置属性：defaultTab（是否以当前路由作为新窗口的默认路由） 和 disabled（是否禁用菜单），少了两个配置属性：breadcrumb 和 activeMenu，在后面的开发中可能会考虑加上去。
下面将路由的相关配置放到下面，项目里的 router/index.js 也有相关的注释。
1、关于路由的 meta 无论是哪个路由（包括父路由），meta 一定不能缺省。 如果父路由无需显示，需用它的第一个子路由代替，可设置父路由 meta.showFirstChild 为 true（参考：home 菜单和 menu 菜单的区别） meta: { title: 'title', // 标题 icon: 'Printer', // 图标，目前仅支持 elment plus 图标，直接写图标名即可 hidden: false, // 是否隐藏，在侧栏上隐藏当前菜单以及当前菜单下的所有子菜单 disabled: false, // 是否禁用，被禁用的菜单依然会显示出来，但被禁用的菜单的子菜单不会显示，被禁用的菜单点击无效果 showFirstChild: false, // 是否用当前菜单的第一个子菜单来代替当前菜单的显示，若为 true，请确保存在至少一个子菜单，否则无效（参考：home 菜单和 menu 菜单的区别）。 defaultTab: false, // 是否使用该路由作为新建窗口的默认路由（一般都是设置为首页） roles: ['admin','teacher', 'student'], // 设置哪些角色可访问当前路由，如果没有设置任何值，则表明所有角色都可以访问，如果设置为空数组，则表明所有角色都不可以访问 } 注意： （1）关于 showFirstChild 选项，一开始的想法是仅作用于一级菜单，并没有考虑过一级菜单外的情况。 比如：一级菜单的 showFirstChild 为 true，二级菜单的 showFirstChild 还是为 true，最终显示三级菜单的第一个菜单。 这个功能完全可以实现，但是这种做法毫无意义，因此不会对这种情况做任何的处理。 （2）关于 roles 选项，有必要在这里强调说明这与 store 目录的 user.js 有关， 该项目目前是以 userStore.data.roles 的用户角色数据（数组）进行去判断权限，如果你的后端返回的结构不是这样的，可以自行更改对应的字段 2、关于 element plus 可用图标 element plus 图标都可以通过 components/icon.vue 组件去调用，填写图标名即可 可参考这个网站 https://element-plus.gitee.io/zh-CN/component/icon.html#%E5%9B%BE%E6%A0%87%E9%9B%86%E5%90%88 3、关于父菜单的 redirect 可以不写，但是还是建议写上，用户访问到父菜单后可以默认跳转到对应的子菜单
角色权限
目前的角色权限验证功能实现比较简单，是以一种写死的方式写进前端路由里（通过路由的 meta.roles 进行设置），这个与花裤衩大佬的 vue-admin-template 的主干分支的思路基本一致。
后面，我会继续实现一个更加高级复杂的动态角色权限验证方式。 这种方式的通常做法是将路由分为两部分，一部分是静态路由，另一部分是动态路由。 然后动态路由时根据后端返回的角色权限，动态添加到路由上去，有哪些权限就动态引入页面的 component。
在很早之前，这个功能我就实现过了（不过不够完整），但是当时没有总结下来，现在只记得一些思路，还有就是记得当时这个功能有很多坑。
多窗口
现在的多窗口功能是基于 element-plus 的 Tabs 组件 来写的，所以有诸多限制。
第一个问题是，这里的样式难以改写成我理想中的样式，我理想中的样式是比较接近浏览器窗口的那种感觉。
第二个问题是，固定（fixed）窗口的头部时，样式发生了一点点异常的变化，暂时找不到原因。
第三个问题，由于这个 Tabs 的组件的设计并不太适合做类似浏览器的多窗口（主要是它的很多事件都是传递 name 值），我这里的写法存在内存泄漏问题，不过这只会发生在删除过多的窗口的极端情况下发生。
总之，后面肯定需要自己手写一个窗口组件来代替 element-plus 的 Tabs 组件进行实现多窗口功能。
Features
后面可能会进行实现的功能：
暗黑模式 多语言化配置 动态角色权限验证 自定义窗口组件来代替 element-plus 的 Tabs 组件其他
vue-admin-template 几乎是近几年的后台管理系统的开山鼻祖了，无论是代码设计还是布局设计，它几乎完美，可能它唯一的缺点就是已经停止维护了，用的技术还是几年前的 vue2 生态。
我没有想过 Ice Cream Admin 能够超越 vue-admin-template，只是想用 vue3 生态复刻它的功能，并实现一些自己认为实用常用的功能。
另外，Ice Cream Admin 目前只是我的一个学习项目，希望后面 Ice Cream Admin 能够带给我更多的学习启发。
访问地址
Ice Cream Admin 项目地址：gitee.com/only1zhuo/i…
Ice Cream Admin 示例：only1zhuo.gitee.io/ice-cream-a…
另外，这里也贴一下之前写的一个 设计一个类似“赛博朋克2077”风格的视频网站 - 掘金 (juejin.cn) 的网站吧，这个网站已经被我魔改成了专升本的毕业作品了，现在名叫：NEW NEWS，今年7月份已经顺利拿到专升本的学位证了，就开放出来给大家欣赏下吧（设计得不是很好，有点花狸狐哨）。不过需要注意的是，这个网站已经不再维护了，页面内容可能会有异常。
个人门户：only1zhuo.gitee.io
NEW NEWS（web版）：only1zhuo.gitee.io/tvstation20…
NEW NEWS（wap版）：only1zhuo.gitee.io/mtvstation2…
相关知识
基于Vue的花店管理系统
springboot“花开富贵”花园管理系统
基于springboot的“花开富贵”花园管理系统
基于微信小程序的校园二手闲置物品交易平台的设计与实现
基于net的鲜花销售系统
Springboot+vue的客户关系管理系统（有报告），Javaee项目，springboot vue前后端分离项目
Vue.js 增删查改库存管理系统教程：新手友好的完整代码与详细步骤」 「从零开始的库存管理系统：Vue.js 实现搜索、编辑、删除与数据更新」 「超详细的 Vue.js CRUD 教程：带你一步步构
基于springboot+vue的Android的作物病虫害防治科普系统的设计与实现app小程序
047基于Java+SSM的线上花店的设计与实现网上花店鲜花销售商城系统
基于springboot玉米病虫害远程咨询系统的设计与实现
网址: 搭建一个极简的 vue3 多窗口后台管理系统模板Ice Cream Admin 的灵感来源于花裤衩大佬的 vue https://m.huajiangbk.com/newsview898997.html
| 上一篇: 一花服务器CCPROXY卡密管理 |
下一篇: 花裤衩/vue |
