在开发中后台管理系统时，我们经常会遇到需要从头开始构建的问题。为了解决这个问题，我们可以使用开源的中后台管理系统来帮助我们快速搭建出基本的功能框架。在本文中，我们将介绍两个非常流行的开源后台管理系统：vue3-basic-admin 和 vue-antd-admin。

vue3-basic-admin

vue3-basic-admin 是一个开源、开箱即用的中后台管理系统，它采用了以下主流技术进行开发：Vue3、Vite、Element-Plus、TypeScript 和 Pinia。该项目内置了许多开箱即用的组件，能够帮助您快速构建中后台管理系统。目前，该项目已被完全开源，在使用过程中如果觉得对您有所帮助，不妨点一个star来表达支持。如果您有一定的经济能力，也可以为作者请一杯咖啡，毕竟开源并非易事。欢迎预览和使用该项目。

前序准备

该项目是基于 Vue3、Vue CLI 4、Vuex、Ant Design Vue 和 Axios 进行开发的。数据模拟方面采用了 Mock.js，后期打算使用 Node.js 来编写后台。此外，通过对 Webpack 进行优化，首屏加载速度更快。系统内置了常用的数据可视化图表展示工具 ECharts 和地图展示工具 ArcGIS。还使用了 Jest 进行单元测试，目前测试覆盖率还比较低，有时间再进行补充。在格式化方面，采用了 ESLint 和 Prettier。

功能

  • 登录：支持用户名密码登录和手机号验证码登录
  • 权限管理
  • 动态路由
  • ECharts 各种图表展示
  • ArcGIS 地图展示
  • 克里金插值分析图
  • 全景图
  • 富文本编辑器
  • Markdown 编辑器
  • 错误页面：403、404、500 页面
  • 个人设置
  • 系统设置
  • 更换主题
  • 提供两种布局方式：左右布局和上下布局
  • 面包屑导航
  • 标签页
  • WebSocket
  • SVG 图标
  • 全屏显示
  • 返回顶部
  • Webpack 优化
  • 抽奖页面
  • Table 表格
  • Form 表单
  • 上传 Excel 文件
  • 上传头像并支持裁剪
  • HTMLCanvas2D 截屏功能
  • 封装自定义 loading 组件

Webpack 优化

为了提升项目性能，vue3-basic-admin 做了以下几个方面的优化：

  • 关闭生产环境的 sourceMap
  • 关闭预加载（Vue 会预加载后面的页面，会导致首屏加载较慢）
  • 使用 Gzip 压缩（需要在 Nginx 进行配置）
  • 生产环境使用 CDN 加载部分插件
  • 去除生产环境中的 console 和 debugger
  • 抽取公共代码
  • 打包大小分析
  • 打包文件缓存
  • 部分依赖使用异步 CDN 加载

使用说明

  • 系统内置了三种角色权限：admin、test 和 editor，每个权限对应的路由和左侧菜单不同
  • 在个人设置和右上角的设置中可以修改界面的个性化设置，如是否开启标签页显示、布局方式、主题颜色等
  • 系统管理员拥有所有权限，并且可以修改用户相应的菜单路由和角色对应的权限。

文件目录说明

在 vue3-basic-admin 的文件目录结构如下：

├── mock                             ---mock模拟数据
├── public                           ---静态资源文件
├── src          
│  ├── api                           ---接口       
│  ├── assets                        ---图片
│  ├── components                    ---可复用的 Vue 组件
│  ├── layouts                       ---布局方式
│  ├── router                        ---路由
│  ├── store                         ---Vuex
│  ├── styles                        ---Sass 样式
│  ├── utils                         ---方法函数
│  ├── vendor                        ---导出 Excel
│  ├── views                         ---页面
│  ├── App.vue                       
│  ├── main.js            
│  ├── permission.js                 ---路由拦截           
├── tests                            ---单元测试文件
├── .browserslistrc
├── .env
├── .eslintrc.js
├── babel.config.js
├── .jest.config.js                  ---Jest 的配置
├── package.json
├── package-lock.json
├── README.md
└── vue.config.js                   ---Webpack 的配置

安装

如果您希望使用 vue-antd-admin，可以按照以下步骤进行安装：

  1. 进入项目目录：cd vue-antd-admin
  2. 安装依赖：npm install
  3. 启动项目：npm run serve

部署

如果要部署 vue-antd-admin，请按照以下步骤进行操作：

  1. 打包项目：npm run build
  2. 运行单元测试：npm run test:unit

以上就是对 vue3-basic-admin 和 vue-antd-admin 这两个后台管理系统的简介和说明。它们都提供了丰富的功能和快速搭建框架的能力，能够为开发者节省宝贵的时间和精力。希望您在开发项目时能够选择适合自己需求的后台管理系统，让开发过程更加高效！