超详细！10分钟开发一个Vue3的后台管理系统

矫情吗；* 2023-09-24 23:47 35阅读 0赞

有很多人说 vue2 早就过时了，都 23年了竟然还有人在用 vue2？简直就是个土老帽！

“你有说话的权利，但我不认同你的观点。”任何公司的技术架构不是一蹴而就的，而是随着业务的增长不断升级变化的。技术越新，用的人不一定会很多。

其实我敢说现在国内跟多公司还在用 vue2，未来 3 年用 vue3 的公司才会越来越多。

当然啦，我们要乐于接收新鲜事物，要不断学习不断成长。这次我还是站在前端小白的角度，手把手教大家开发基于 `Vue3` 的管理系统。

该系统功能非常简单，包含登录、退出、增删改查基本功能，非常适合新手拿来练习。

最后会给出 demo 的完整代码。

### 1.项目演示 ###

1.登录

[https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/af63064adac04ef5ab448bd86095476a~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp][https_p3-juejin.byteimg.com_tos-cn-i-k3u1fbpfcp_af63064adac04ef5ab448bd86095476a_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.awebp]

2.首页

![format_png][]

3.用户管理

[https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/54cccb6290df4645a36c9ab64211685f~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp][https_p3-juejin.byteimg.com_tos-cn-i-k3u1fbpfcp_54cccb6290df4645a36c9ab64211685f_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.awebp]

4.删除用户

[https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ec12867dc61746eea6473925e911d46a~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp][https_p3-juejin.byteimg.com_tos-cn-i-k3u1fbpfcp_ec12867dc61746eea6473925e911d46a_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.awebp]

5.查看详情

[https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/440633b781ff4c27830244bc28ac05df~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp][https_p3-juejin.byteimg.com_tos-cn-i-k3u1fbpfcp_440633b781ff4c27830244bc28ac05df_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.awebp]

6.退出

[https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cfcbce04a1bf4b789183815d3cc04e35~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp][https_p3-juejin.byteimg.com_tos-cn-i-k3u1fbpfcp_cfcbce04a1bf4b789183815d3cc04e35_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.awebp]

### 2.技术栈 ###

*  vue3
 *  vite3
 *  Element Plus

### 3.项目搭建 ###

本次项目我们使用 `vite` 进行构建。

[https_p3-juejin.byteimg.com_tos-cn-i-k3u1fbpfcp_af63064adac04ef5ab448bd86095476a_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.awebp]: https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/af63064adac04ef5ab448bd86095476a~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp
[format_png]: https://img-blog.csdnimg.cn/img_convert/7421d9300ec7a2f27aa7bac047c94081.webp?x-oss-process=image/format,png
[https_p3-juejin.byteimg.com_tos-cn-i-k3u1fbpfcp_54cccb6290df4645a36c9ab64211685f_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.awebp]: https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/54cccb6290df4645a36c9ab64211685f~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp
[https_p3-juejin.byteimg.com_tos-cn-i-k3u1fbpfcp_ec12867dc61746eea6473925e911d46a_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.awebp]: https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ec12867dc61746eea6473925e911d46a~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp
[https_p3-juejin.byteimg.com_tos-cn-i-k3u1fbpfcp_440633b781ff4c27830244bc28ac05df_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.awebp]: https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/440633b781ff4c27830244bc28ac05df~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp
[https_p3-juejin.byteimg.com_tos-cn-i-k3u1fbpfcp_cfcbce04a1bf4b789183815d3cc04e35_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.awebp]: https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cfcbce04a1bf4b789183815d3cc04e35~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp