一款基于Vite4、Vue3、Pinia、Naive UI构建的企业级中后台管理系统——Vue Bag Admin
Vue Bag Admin 是一款专为构建企业级中后台管理系统而设计的基础框架。它不仅采用了新的前端技术栈，还特别注重项目的可扩展性和易用性。Vue Bag Admin 的设计原则是将框架(packages)与应用(app)分离，以此减少项目之间的耦合，并提升整体的扩展性。
前端
框架：采用Vite4、Vue3、TypeScript、JavaScript构建，支持多种写法和调用。
功能：提供了完整的框架体系，适用于响应式的中后台管理系统，支持现有业务的各种扩展需求。
后端
框架：基于Egg.js封装，扩展了常用的模块如JWT、令牌桶、参数校验、加解密、多文件上传等。
适用对象：面向企业中的后端程序，下载代码后只需更改MySQL、Redis等配置即可使用。
特点
响应式设计：基于CSS媒体查询进行开发，支持手机、平板、PC等多设备自动适配。
易用性：可通过npm命令安装主程序包，也可下载源码进行开发，框架与应用分离。
社区支持：使用主流技术栈（Vue3、Vite、TypeScript等），周边插件丰富，不用担心业务受框架限制。
适合人员
适用于希望使用框架快速开发中后台系统的开发者，尤其是那些熟悉Vue并且有过实际项目经验的人士，以及热衷于技术进步和自我提升的同学们。
技术架构
Vue Bag Admin 采用了先进的技术架构，确保了其在性能、安-全性等方面的优越表现。
部署方式
安装文档
前端安装
pnpm i vue-bag-admin --save
pnpm i naive-ui pinia vue-router --save
快速开始
import {createApp} from 'vue'
import App, {install, router, axios} from "vue-bag-admin"
createApp(App).use(install).use(router).mount('#app')
后端安装
npm install
npm link
npm link egg-bag-framework # 在应用目录下执行
部署到服务器
修改<font style="color:rgb(44, 44, 54);">package.json</font>中的启动脚本：
{
"start": "egg-scripts start --daemon --port=7010 --title=egg-bag"
}
安装依赖并启动服务：
npm install
npm run start # 如果之前运行过需要先执行npm run stop
服务启动后，访问<font style="color:rgb(44, 44, 54);">127.0.0.1:7010/</font>。
即刻体验一波
Vue Bag Admin 不仅提供了强大的技术支撑，还拥有多项实用功能，以下是部分功能的具体介绍：
组件
组件库：提供丰富的UI组件，覆盖大多数应用场景，支持自定义样式和行为。
系统设置
全局配置：支持系统级的全局设置，包括主题切换、语言选择等。
用户管理：方便管理用户账户、角色和权限。
数据图表
图表展示：集成多种图表展示方式，如柱状图、折线图、饼图等，方便数据可视化。
实时更新：支持数据的实时更新，确保信息的及时性。
网页内嵌
IFrame集成：支持网页内嵌，方便集成第三方服务或页面。
瀑布流
图片展示：采用瀑布流布局展示图片，美观大方，适合图片墙展示。
编辑器
富文本编辑器：内置富文本编辑器，支持多种格式的内容编辑。
Markdown编辑器：支持Markdown语法，方便撰写技术文档。
异常页面
错误处理：提供专门的异常页面处理机制，确保用户体验不受影响。
结果页面
反馈：针对用户的提供明确的结果页面反馈，提升用户体验。
模板打印
打印功能：支持多种打印模板，满足不同打印需求。
权限测试
权限验证：提供权限测试功能，确保只有授权用户才能访问相应资源。
关键字高亮：支持对特定关键词进行高亮显示，便于快速定位。
结语
Vue Bag Admin 以其强大的功能和灵活的设计理念，为中后台系统的开发带来了全新的体验。无论是对于新手开发者还是经验丰富的工程师，都能从中找到适合自己的工具和方法。
如果你也希望能够提升开发效率，简化工作流程，那么Vue Bag Admin 将是一个不错的选择。
后端：https://github.com/hangjob/egg-bag-framework
前端：https://github.com/hangjob/vue-bag-admin
文档：https://vite.itnavs.com/doc/
