前言
在当前开源生态日益繁荣的背景下，众多功能完善且设计精美的后台管理系统框架触手可及。然而，直接采用成熟的开源解决方案，固然能够快速部署应用，但在一定程度上限制了开发者对系统底层构建逻辑与技术细节的深入理解。基于此，本系列文章旨在记录并探讨一个从零开始构建后台管理系统的完整过程。我们将以 Vue3 作为核心前端框架，结合 ElementPlus UI 组件库，系统性地剖析在开发过程中可能遭遇的技术挑战、关键决策点以及相应的解决方案。
系列文章没有提供特别详细的代码，只是提供了开发过程和关键代码，如果有这个学习的需求的话，可以根据这个过程和源码自己再操练一遍，我觉得比跟着有些视频一点点的跟着敲效果要好，记忆要深。源码里也添加了尽可能详细的注释，还有问题的话可以留言一起讨论
本研究的核心目的并非构建一个可直接部署于生产环境的商业级应用，而是希望通过这一实践过程，提供一个观察和理解现代前端技术栈在实际项目中的应用。我们期望通过这种“做中学”（Learning by Doing）的方式，深化对相关知识点的理解，并积累宝贵的项目经验。
重要声明： 本文所述及的后台管理系统构建过程与最终产出，其主要定位为学习目的。其设计与实现可能未充分考虑生产环境下的安全性、性能优化及复杂业务场景的兼容性等问题。因此，不能将此系统直接应用于任何商业或生产环境。
配套java后端见Github
实现
- 创建项目
npm create vue@latest，扩展文章vue创建项目总结，介绍了npm create脚本背后的执行过程；从学习ts的三斜线指令到项目中声明类型的实践，介绍了使用脚本创建项目后的env.d.ts的介绍和扩展 - 配置husky系列工具规范项目：扩展文章Husky 生态工具链在前端工程化中的实战应用，介绍了husky工具链的概念和使用以及项目集成
- 项目初始化：引入
ElementPlus；配置了自动导入(支持eslint识别)；ElementPlusIconsVue全局注册；sass全局样式，基本的css初始化；在vite配置中使用环境变量并配置ts支持，配置了只在开发环境使用vueDevTools；配置(Vue的项目模版中eslint已经使用了eslint的flat config配置)，配置eslint的vue文件规则vue文件不是multi-word，那么只允许是Index扩展文章：项目初始化与核心依赖集成 - 基础布局，主题和暗黑模式搭建：扩展文章:基于 Vue + Element Plus + TypeScript 的后台管理系统 —— Layout 页面布局和主题定制，解析 Element Plus SCSS 变量：Sass 特性的精妙运用
- 在基础布局之上增加了多种布局切换的特色功能。使用策略模式实现多种菜单布局方案的切换：多种菜单布局共享一个菜单组件爱你，根据策略渲染菜单数据：扩展文章：策略模式在现代后台管理系统中的应用：基于Vue3的布局切换实现
- 项目基本功能搭建完成后，在后端还没准备好的情况下，使用mock数据完成剩余过程，扩展文章：基于 MSW 的前端 Mock 方案原理与项目集成
- 关键的一步：生成动态路由，参考文章：Vue3基于RBAC的动态路由实现方案
- 关于增加菜单支持外链的实现，参考文章# 一个外链菜单引发的"血案"：Vue Router 版本间的爱恨情仇
- 到这里基于RBAC权限的后台管理系统已完成基本功能(按钮级别的权限控制可参考源码和Vue3自定义指令的探究与实践应用)，具体的业务功能(菜单管理，角色管理，用户管理)这些都是使用ElementPlus组件堆积和api调用，感兴趣的可看源码
