mall-admin-web：基于 Vue 3 + Element Plus 的电商后台管理系统前端
mall-admin-web 是 macrozheng 开源的电商后台管理系统前端项目，采用 Vue 3 + Element Plus 实现，属于前后端分离架构中的前端部分，后端对应 mall 项目。功能覆盖商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理与设置等模块，另有基于 Vue2 + Element 的 dev-v2 分支。
社区作者 · zZz
它解决什么问题
mall-admin-web 是一个电商后台管理系统的前端项目，基于 Vue3 + Element-Plus 实现，采用前后端分离架构，其后端项目为 mall（同作者开源项目）。项目主要包括商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等功能模块。
官方提供在线演示地址 https://www.macrozheng.com/admin/ 与在线接口 https://admin-api.macrozheng.com，以及《mall学习教程》全套学习资料。分支方面：master 分支基于 Vue3 + Element-Plus，dev-v2 分支基于 Vue2 + Element。
技术选型：Vue（前端框架）、Element Plus（前端 UI 框架）、Vue Router（路由框架）、Pinia（全局状态管理）、Pinia Plugin Persistedstate（Pinia 持久化插件）、Axios（前端 HTTP 框架）、vue-charts（基于 Echarts 的图表框架）、TinyMCE Vue（富文本编辑器）、Js-cookie（cookie 管理工具）、vue-element-admin（项目脚手架）。
源码目录结构（src）：apis 为 axios 网络请求接口定义；assets 为静态图片资源文件；components 为通用组件封装；icons 为 svg 矢量图片文件；router 为 vue-router 路由配置；store 为 pinia 的状态管理；styles 为全局 css 样式；types 为类型定义；utils 为工具类；views 为前端页面，其中 home 为首页、layout 为通用页面框架、normal 为常用页面（login 和 404）、oms 为订单模块页面、pms 为商品模块页面、sms 为商品模块页面、ums 为用户模块页面。
封面为 GitHub 自动生成的仓库社交预览图，正文中未提供其他教程配图与视频内容。
— 本文由 AI 根据公开来源辅助整理，命令、版本与许可证请在使用前到原始页面复核。
安装 / 开始使用
- 环境准备：下载并安装 Node.js，项目支持 v20 以上版本，建议下载 v20 LTS 版本，官方给出的下载地址为 https://nodejs.org/zh-cn/download/archive/v20.20.0 。
- 接口/后端准备：该项目为前后端分离项目，若要访问本地接口需先搭建后台环境，搭建方式参考后端项目 mall；若直接访问在线接口则无需搭建后台环境，只需将 .env.development 文件中的 VITE_BASE_SERVER_URL 改为 https://admin-api.macrozheng.com 即可；如果你对接的是 mall-swarm 微服务后台，所有接口都需要通过网关访问，需要将 .env.development 文件中的 VITE_BASE_SERVER_URL 改为 http://localhost:8201/mall-admin 。
- 克隆源代码到本地，使用 VSCode 打开，并完成编译。
步骤 4 · 在命令行中运行命令：
npm install，下载相关依赖。
步骤 5 · 在命令行中运行命令：
npm run dev，运行项目。
- 首次运行后，访问地址：http://localhost:5173 即可打开后台管理系统页面。
常见问题与注意事项：(1) Node 版本需 v20 及以上，否则可能出现依赖或构建不兼容；(2) 分支选择上，master 分支基于 Vue3 + Element-Plus，dev-v2 分支基于 Vue2 + Element，按需切换；(3) 接口地址需按第 2 步在 .env.development 中正确配置，否则页面接口请求失败；(4) 本地联调需保证后端服务已启动，或改用在线接口地址。
- 具体部署过程请参考官方文档《mall前端项目的安装与部署》；前端自动化部署请参考《使用Jenkins一键打包部署前端应用，就是这么6！》。