Vue3教程：开发一个 Vue 3 + element-plus 的后台管理系统

程序员十三

发布于 2021-03-27 17:33:07

3.3K0

发布于 2021-03-27 17:33:07

文章被收录于专栏：程序员有故事

最近在开发一个 Vue 3.0 + element-plus 练手项目，后面测试完成后，会把代码全部开源，部分页面的预览图如下：

本来是这周一发的文章，但是博客园当时在维护，所以今天才发布。

被最初的自己感动

本来不想写这些话的，翻文章的时候翻到了几年前写的一篇旧文，里面记录了我为什么做开源项目，忽然被那时的自己感动了，于是有了下面这些话，希望大家看一看。

写了几年的博客，也做了不少开源项目，最令我感动的不是“牛逼”、“厉害”、“大佬”这样的评价，因为我不牛逼，我也不是大佬，我更喜欢大家说自己懂了、明白了、学到了，或者有人因为这些项目解决了缺少练手项目的问题，甚至因为这些实战项目找到了工作、完成了课程作业，这些都让我觉得我尽力了，奉献了自己微小的力量帮助别人。

5 年前，我做第一个开源项目的时候，在博客园的一篇文章里就写过下面这段话：

在博客里我会分享代码和自己解决问题的方式和方法，也会把项目部署好给大家一个直观的感受，如果不满意的话就不用继续浪费时间去看了，如果觉得还可以，就继续读下去，至于我为什么写了博客，还要公开代码，还要部署上去，是因为我也是从新手过来的，我知道那种想要学习却无能为力而不知所措的感觉，因为知识面不广，因为没有方向而深深的迷茫和懊恼，这些我都体验过的，所以我会把能做的都做了，也算是弥补当时自己知识面的空洞的遗憾吧，唉，如果当时。

这就是我做开源项目的原因，因为我也是从新手过来的，我那时候自学 Java，能上手的实战项目可太少太少了，想要找练习的 demo 都找不到，十分的煎熬。当我有能力做这件事的时候，我就要认真去做，页面要做的漂亮，功能要做的完整，代码要全部开源，而不是去学一些垃圾项目，或者去贴吧、论坛、网盘、QQ群里，去求别人分享一个练手的项目。

你们知道，这样做的时候，一个人的头可以有多低吗？

我是知道的。

所以我才做了这些开源项目，技术栈从 SSM 到 Spring Boot，再从 Spring Boot 到 Vue，项目从最初的一个登录功能，到各种练手项目，简易的后台管理系统、资讯管理系统、博客项目、商城项目、前后端分离项目，代码全部开源出来供大家学习。你看，一开始可能没什么，但是你坚持个 5 年，坚持和积累的作用就显现出来了。

虽然有时候也被人骂，想想也是挺可笑的。但是今后我依然会走在这条路上，我不是一个大佬，我也没有多高的技术能力，但是我依然会努力，做更多的开源项目造福社区，我的文章和开源项目最大的作用就是陪大家在技术道路上走上一段路，哪怕不能陪伴你太久，因为你技术能力高了之后，会越来越看不上这些练手项目。

不过，我依然感谢大家让我陪你们走过这段路。

项目开发背景

言归正传，说说最新的这个项目吧。

Vue 3.0 正式版本已上线半年有余，之前在我的专栏里也为大家阐述过一篇关于 Vue 3.0 的文章，Vue 3.0 来了，我们该做些什么？。在当时看来，Vue 3.0 的周边生态，还不算健全，如路由插件 Vue-Router、状态管理插件 Vuex、各大组件库的 Vue 3.0 版本等等，都还处以 beta 版本，甚至有些组件库都还没有更新，这让广大 Vue 使用者们很难去将自己的项目平稳的迁移至 Vue 3.0。

随着时间的推移，Vue 的周边插件开始升级为正式版，几大知名的 UI 组件库也都度过的阵痛期，纷纷推出了 Vue 3.0 版本，如 Element-Plus、Ant Design of Vue、Vant 等等，都是业界比较知名的 UI 组件库，它们作为先驱，为 Vue 生态作出的贡献有目共睹，在此也希望大家能一起为 Vue 的生态添砖加瓦。

这半年来，我也一直在学习和分享 Vue3 的知识点，比如发布一些 Vue3 的教程：

我也一直在学习和分享 Vue3 的知识点，过程中也写了一些 Vue3 的教程：

因为做了一些小 Demo，熟悉了之后就开始尝试写一些大一点儿的实战项目，而开发背景当然就是 Vue 3.0 正式发版和 element plus 的正式发版，时间点分别是 2020 年的 9 月份和 2020 年的 11 月份。

项目的名字想了很久也没想好，先叫它 vue3-admin 吧，毕竟是一个后台管理系统。当然，就当做是一个练手的项目，所有代码都是开源免费的，供大家学习使用。

项目开发过程

项目 vue3-admin 的开发时间应该是在 2020 年的 12 月份，当时看到 @iamkun 大佬发了一篇文章《? Element UI for Vue 3.0 来了！》，文章里有提到 element plus 正式发版，就想着用它来重构之前的后台管理系统。

不过这次花的时间有点久，到今天为止已经差不多 4 个月了，刚开发完，还在测试阶段。因为我的时间比较碎，平时要正常上班、周末还要写书、写文章什么的，所以只能在其它事情都忙完、空下来的时候才能写一点点代码。

首先是开发后端 API 接口，建表、开发接口、自测.......大概花了半个月时间，把第一版的 API 开发出来。不过，也只是开发出来而已，因为后面联调接口的时候还是做了很多调整的，参数不完整、接收方式不对、返回的格式调整等等。

之后是开发页面、联调接口，这个时间花的就比较多了，搭环境、画页面、调整页面布局、找 icon 素材等等，这些都是费心费时的事情。

比如登录页面，一开始画成了这样：

第一天看的时候还行，第二天再看的时候就觉得有点不协调，而且背景图加载的过程有点儿影响体验，于是把背景改成纯色：

看起来还是不协调，主要是色调吧，各种颜色都有，黑的、白的、蓝的、青的，还得换，logo 图片也不好看。调整过程就不啰嗦了，最终的登录页面是下面这样：

删除了背景色，修改了 logo 图片和字体颜色，整体上看起来舒服了很多。

开发过程中好玩儿的事情还是有很多的，除此之外，还有三级联动功能实现、列表功能实现、弹框、图片上传、富文本编辑器整合等等，整个项目就是这样一点一点完成的，从第一行代码，到第一个组件，到完成一个页面，再到完成一个功能模块。现在想一想，其实全部都是笨功夫，静下心来才能慢慢做好的事情。还好，我这个人比较笨，就一点一点做呗。差不多 11 个页面组件 + 5 个公用组件，花了几个月时间，也做完了，继续努力吧。

还有一些问题，周末测试并集中修改。