登录注册

[开源]MIT协议、现代化的管理系统，快速搭建和开发管理后台应用

开源系统流程管理
2026-06-28 04:27 0 次浏览 • 0 次下载 0KB
[开源]MIT协议、现代化的管理系统，快速搭建和开发管理后台应用

一、开源项目简介

Vue3-Antd-Plus

基于 Vue3 + js 现代化的管理系统【完整版】

Vue3-Antd-Plus是一个现代化的管理系统，提供了一系列功能丰富的组件和工具，帮助开发者快速搭建和开发管理后台应用。

基于 Vue 3 + JavaScript + Pinia +Vite + Ant Design Vue 构建 管理后台+web前台+Node后端代码一整套

做这个项目主要原因：全网大都是 Vue3 + TypeScript 版本的,so so 决定做一个JavaScript版本的供大家使用

二、开源协议

使用MIT开源协议

三、界面展示

截图(管理后台+web前台)

 

 

 

 

 

 

 

 

 

 

 


四、功能概述

功能：

  • 前台端- 整体框架已搭建好
  • 前台端- 接口已经接入
  • 前台端- axios全局统一错误处理
  • 管理端- 大屏数据可视化
  • 管理端- 集成各类富文本编辑器
  • 管理端- 自定义主题、菜单权限、按钮权限
  • 管理端- 登录、注册、菜单、tabs顶栏菜单、全局搜索菜单
  • 管理端- 用户管理、角色管理、权限管理、自定义指令权限判断
  • 管理端- 用户操作日志项目代码生成器（前后端代码文件）、图标选择器
  • 管理端- 错误统一处理
  • 管理端- 表格导入、导出、下载
  • 管理端- 图片文件音频上传、下载、预览...
  • 服务端- 项目结构清晰
  • 服务端- 集成邮件发送、定时器任务、统一响应数据格式
  • 服务端- JWT验证、接口数据权限验证、角色权限验证
  • 服务端- express-validator统一的参数验证
  • 服务端- 接口日志记录、表格解析等等...

功能特性

  • 使用 Vue 3 和 Vite 构建，具备高效的开发体验和优秀的性能表现
  • 集成了 Ant Design Vue 组件库，提供美观的 UI 界面和丰富的组件选项 和主题切换
  • 使用 Vue Router 实现路由管理，支持多层级路由和动态路由
  • 使用 Axios 处理 HTTP 请求，与后端进行数据交互
  • 集成 ECharts 图表库，展示数据统计和可视化效果
  • 使用 Pinia 进行状态管理，提供了一种响应式的数据流方案
  • 集成 Tinymce 富文本编辑器和 Vditor Markdown 编辑器，满足不同的编辑需求
  • 使用 hotkeys-js 提供快捷键支持，增强用户操作体验
  • 使用 Lodash 提供常用工具函数，简化开发流程
  • 集成了测试工具集 @vue/test-utils 和 vitest，方便进行单元测试
  • 更多....

五、技术选型

快速开始

  1. 克隆本仓库到本地
  2. 访问一飞开源：https://code.exmay.com/ 下载
  3. admin/client/server安装依赖
  4. npm install
  5. admin/client/server本地启动
  6. npm run dev
  7. 打包生产环境
  8. npm run build

admin添加路由页面


/**
 * 在主框架内显示
 * 路由配置说明
 * {
      path: '/dir-demo-info',    // 页面地址（唯一）
      name: 'dir-demo-info',     // 页面名称（唯一）
      hidden: false,              // 隐藏（不展示在侧边栏菜单）
      meta: {
          title: '用户管理',       // 页面标题
          icon: 'yonghuguanli',  // 页面图标
          cache: true,          // 页面是否进行缓存 默认true
          link: false,           // 页面是否是外链 默认false
          frameSrc: false,       // 页面是否是内嵌 默认false
          requiresAuth: true,   // 页面是否是需要登录 默认true
          perms: [               // 页面的操作的权限列表
              'sys:user:list',   // 查询
              'sys:user:create', // 增加
              'sys:user:update', // 更新
              'sys:user:delete', // 删除
          ],
      },
      component: () => import('@/views/sys/user/dir-user-info.vue'),
   }
 *
 */

....

评论