前言

在当今的企业应用开发中，中后台管理系统是不可或缺的一部分。然而，现有的许多管理系统在开发时面临着代码耦合度高、扩展性差、响应式设计不足等问题，这些问题直接影响到了项目的可维护性和用户体验。那么，有没有一款软件能够处理这些问题，为开发者提供一个更为高-效、灵活的开发平台呢？

答案是肯定的。今天我们要介绍的是一款基于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

扫描下方二维码，一个老毕登免费为你解答更多软件开发疑问！