本文已参与「新人创作礼」活动，一起开启掘金创作之路
写在最前面
2021 年 9 月，Vue3.x正式从Vue3.2发布为Vue3后，我也正式开始学习并使用Vue3+Element-Plus+Vite+TS进行后台管理系统的开发。经历了半年多的不断开发维护，它终于在公司上线。
其实在项目刚开始的时候，就已经同步进行开发文档的编写（Just for love！）。接近 4 个月（有点菜，大佬勿喷！）的时间里，将整个后台管理系统的基本框架搭建完成，同时将详细的开发文档输出在以Vuepress为基础搭建的文档系统中。但是随着后续后台管理系统的更新维护与繁忙的业务开发，文档系统实在没时间去更新了，也为这一系列文章埋下了伏笔。
可能很多人都跟我一样，在最开始接触一个新的技术栈的时候，遇到一些问题显得有些不知所措，例如Vue3与Vue2较大的编码差异、Vue3生态的缺失、新工具Vite与Webpack的较量，以及从来没有使用过的 TS（JS转TS的噩梦！！！）。或许这还不是最致命的，因为我还需要用它们对一个拥有一些历史遗留问题且不是那么规范的老项目进行重构，你没听错，就是重构，并且还要加上新业务模块的开发。
这对刚入职没多久的只有一年经验的前端小菜鸡来说，属实是一个巨大的挑战。所幸有公司 Boss 和全干大佬同事的认可与栽培，自己在技术与职业的规划上的一致，让我坚持努力一步步往上爬，顺利交付第一个版本的Admin。毫无意外，在这过程中经历了很多很多的问题，有技术难题，有需求问题，有设计问题，也有团队协作问题。这些宝贵的经历我都会在这一系列的文章里详细介绍与分析总结，所以这并不仅仅是一个教你如何搭建以较新技术栈为基础的中后台管理系统，更是自己（大家）对整个项目的细致复盘。
这里我要先感谢以下所有优秀的开源作者（膜大佬！），谢谢你们分享的宝贵财富，也谢谢你们的指引，有越来越多对这个圈子做出贡献的技术爱好者们！（排名不分先后）
博主：
- 阮一峰老师（ES6）
- 张鑫旭老师（CSS 世界）
- 冴羽（淘系）
- 子奕（Alibaba）
- 荣顶
- 以及许多许多帮助我学习与解决 Bug 的大佬们！
admin：
- 花裤衩：vue-element-admin
- 若依：RuoYi-Vue3
- Vben：vue-vben-admin
- 啝棠：vue-pure-admin
- 腾讯 TDesign： tdesign-vue-next-starter
- 以及其他非常具有思想与特点的 admin 开源作者们
网上已经有了非常多的使用相似技术栈进行 Admin 开发的例子，甚至有保姆级的详细文档教程，我为什么还要写这一系列的文章？首先，作者本人也是阅读学习了非常多的 Admin 案例，甚至跟着博主写的教程一步步的进行实践。但是慢慢发现，网上更多的是叫你怎么做，缺很少有详细的解释告诉你为什么这么做。其次，这不仅仅是一次对 Admin 的开发，更是一次对过去开发所经历的各种有趣的事或者让人头痛的 BUG 的反思与总结。
该系列文章非常适合计划学习或者使用Vue3、后台管理系统项目、前端项目工程化的技术爱好者们，尤其是与我有类似经历的前端伙伴们。本人毕竟技术与工龄有限，文章难免会有一些错误，欢迎大家留言一起讨论学习，请各位大佬们多多指教，一起进步！
准备工作（仅作推荐参考）
开始一个项目前，请务必对项目做一次简单的架构，除了知道你需要做什么，你更应该清楚你需要选择什么，来让你的开发更顺畅、效率更高。这里大概列出一些项目的完成所使用到的工具，工具的具体使用与环境配置会在后续的文章里详细作介绍。同时推荐一些适合开发者的小习惯与建议，觉得可以的话你可以试试哦！
开发准备
感谢Vue-Pure-Admin的作者啝棠及其团队的分享与贡献......
本项目主要基于vue-pure-admin源码，并结合其他优秀相关开源项目，进行 0-1 的后台管理系统开发。
开发技术栈
- 前端框架：
Vue3 - UI 组件库：
Element-Plus - 前端构建工具：
Vite Typescript
开发工具推荐
- 代码编辑器：
VSCode - 调试浏览器：
Google（谷歌浏览器） - 代码仓库：
Github
其他团队性准备
- 文档类型选择：
Markdown文档（推荐使用VSCode编写） - 飞书文档系统（在线、多人同时编辑）：文档、表格、思维导图（谁用谁知道!）
- 飞书项目管理系统（在线、多人同时编辑）：工作日志、项目计划、任务管理、需求池、看板等
- 流程图设计：
Draw.io - 原型图（UI 界面）设计：
Axure RP 9，当然还有 MasterGo、墨刀等专业设计工具
辅助准备
浏览器主页
（强推！）掘金主页（在谷歌浏览器的扩展插件中安装掘金插件，设为主页即可，没有使用的童鞋赶紧使用起来吧！）
除了上图你所看到的推荐信息，更常用的地方在于搜索引擎的便捷使用。Google、Github、Stack Overflow 等开发利器，触手可及~
建议大家形成一套属于自己的浏览器标签集（标签管理学），这将会极大的提高你的开发与学习效率
献丑一下，随便看看就好哈 ~
资料查阅
- 上一部分提到的，就是非常有效的一种资料搜索与查阅方式
- 官方文档，最正确的文档。缺点是大部分时候你很难在官方文档上找到自己想要的解决办法。
- 其实在国内对多数人来讲，出现 BUG 最容易查到解决办法的地方就是 CSDN、掘金、知乎、博客园、私站等博文出没地点。
- 如果你使用百度搜索，搜不到解决办法，那么请一定记得使用 Google 搜索引擎进行搜索。当然，Stack Overflow 才是神！
有更多好的方法欢迎在评论区留言，大家一起学习！
UI 素材
图标
- 阿里巴巴矢量图标库：iconfont
- 开源中立风格系统符号：REMIX ICON
- 统一图标框架(强推！！！)：iconify 涵盖网上大部分优秀的图标库，如 Bootstrap、Remix、Unicons、Ant Design、Element Plus、Twitter Emoji 等
- 免费的流行品牌 SVG 图标： Simple Icons
- Font Awesome
- Markdown emoji 图标：markdown-it-emoji
UI 模板
Logo 设计(白嫖免费)
其他 UI 素材及工具
更多好用牛逼 Plus 的工具欢迎举荐！！！
最后
当然是给我即将打造的项目起一个名字啦：HuoHuo-Admin
为什么是这个名字呢？因为它有很长很深刻的故事 ~~~
接下来，让我们带着这个故事开始 HuoHuo-Admin 的打造吧！！！
