个人简介

👀个人主页： 前端杂货铺
⚡开源项目： rich-vue3 （基于 Vue3 + TS + Pinia + Element Plus + Spring全家桶 + MySQL）
🙋‍♂️学习方向： 主攻前端方向，正逐渐往全干发展
📃个人状态： 研发工程师，现效力于中国工业软件事业
🚀人生格言： 积跬步至千里，积小流成江海
🥇推荐学习：🍖开源 rich-vue3 🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js

🌕个人推广：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧

前言

大家好，这里是前端杂货铺。（本文档会根据开发进度持续更新…，欢迎点个收藏和 👉Github Star，防止以后找不到~）

👉rich-vue3 是一个免费开源的致力于围绕 Vue3 提供一系列 有趣且实用 功能的解决方案。

👉rich-vue3 将汇聚 纯前端的功能、 前后端通信调用数据库的功能、前后端通信调用第三方可运行程序的功能 等等。

---

一、技术栈

说明：如果以下技术栈你有部分没有接触过也没有关系，因为 功能的关键代码还是基于 JavaScript 或 Java 的，所以如果你对 JavaScript 或 Java 有一定的了解（本项目有纯前端功能，也有前后端结合的功能），就完全可以拉下来该项目跑起来看看，然后根据你感兴趣的功能涉及到的代码进行针对性的学习！（PS：每个功能都将有从0到1的详细教程！！）

👉rich-vue3 技术栈一览：

• 前端基于 Vue3全家桶、TypeScript、Element Plus、Pinia、Three.js 和 Vite 等（Three.js 后续扩展）。
• 服务端基于： Spring、Spring Boot、SpringCloud、Mybatis 等。
• 数据库：MySQL、MongoDB、Redis （暂使用MySQL，后续扩展）
• 前后端交互：HTTP、WebSocket 等（WebSocket 后续扩展）

二、功能点

👉rich-vue3 功能一览（基础功能）：

• 用户管理：登录、登出演示
• 权限管理：页面级权限（动态路由）、按钮级权限（指令权限、权限函数）、路由守卫
• 多主题：普通、黑暗、深蓝, 三种主题模式
• 多布局：左侧、顶部、混合, 三种布局模式
• 错误页面: 403、404
• Dashboard：根据不同用户显示不同的 Dashboard 页面
• 其他内置功能：SVG、动态侧边栏、动态面包屑、标签页快捷导航、水印、Screenfull 全屏、自适应收缩侧边栏、Hook（Composables）

👉rich-vue3 功能一览（扩展功能）：

• 视频录制输出：在 Canvas 画布上实现对媒体流的录制和输出、图片的生成等，支持控制动画速度和修改画布文本（👉视频录制手摸手教程链接（待补充））
• 持续开发更新中（如果你有好的功能的 idea，欢迎在评论区提出宝贵的建议）…

---

作者想说的话

在这个内卷的时代，尤其是对于前端这种技术迭代很快的领域，我觉得我们有必要在工作和生活之余抽出一些时间来了解一些主流且前沿的技术（饭碗能端的更稳点，O(∩_∩)O哈哈~）。

虽然主流框架给我们的开发带来了很多的便利，但是我们在跟进前沿技术使用的同时，也要 注重原生和基础，毕竟万变不离其宗，原生才是真正的根基！（MDN中文文档）

吾生也有涯，而知也无涯 。以有涯随无涯，殆已！ 我们要有针对性的学习一些技术，前端涉及一些，服务端也可以根据自己的兴趣涉及一些（毕竟技术栈层出不穷，毫无目的的学根本学不完…）。

实践出真知。 当我们学习了一些东西后如果不进行使用和巩固，在一段时间过后也就忘的差不多了，所以在学习之后的实践也是非常有必要的。👉rich-vue3 就会集成我们学到的很多知识点，它也将是个不错的用于知识点巩固的实战项目！

希望👉rich-vue3 能给屏幕前的你带来一些新的思考和帮助，祝屏幕前优秀的你一切顺利！

总结

本篇文章对开源项目 rich-vue3 做了基本的介绍和说明，后续将持续维护更新，感谢你的阅读，👉也欢迎 帅气 / 漂亮 的你能点击此处给个免费的 Star（小声说：这是我们持续开发维护的核心动力）

好啦，本篇文章到这里就要和大家说再见啦，祝你这篇文章阅读愉快，你下篇文章的阅读愉快留着我下篇文章再祝！

---

参考资料：

1. Github · v3-admin-vite
2. Github · rich-vue3

---

---