mall-admin-web README

The project's README from github.com/macrozheng/mall-admin-web. As one markdown file: README.md.

mall-admin-web

公众号 交流 后台项目 SpringCloud版本 码云

友情提示

  1. 快速体验项目:在线访问地址 。
  2. 全套学习教程:《mall学习教程》 。
  3. 分支说明:master分支基于Vue3+Element-Plus,dev-v2分支基于Vue2+Element。

前言

该项目为前后端分离项目的前端部分,后端项目mall地址:传送门 。

项目介绍

mall-admin-web是一个电商后台管理系统的前端项目,基于Vue3+Element-Plus实现。主要包括商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等功能。

项目演示

项目在线演示地址:https://www.macrozheng.com/admin/

后台管理系统功能演示

技术选型

技术 说明 官网
Vue 前端框架 https://cn.vuejs.org/
Element Plus 前端UI框架 https://element-plus.org/
Vue Router 路由框架 https://router.vuejs.org/
Pinia 全局状态管理框架 https://pinia.vuejs.org/
Pinia Plugin Persistedstate Pinia持久化插件 https://prazdevs.github.io/pinia-plugin-persistedstate/
Axios 前端HTTP框架 https://github.com/axios/axios
vue-charts 基于Echarts的图表框架 https://github.com/ecomfe/vue-echarts
TinyMCE Vue 富文本编辑器 https://github.com/tinymce/tinymce-vue
Js-cookie cookie管理工具 https://github.com/js-cookie/js-cookie
vue-element-admin 项目脚手架 https://github.com/PanJiaChen/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 -- 用户模块页面

搭建步骤

公众号

加微信群交流,公众号后台回复「加群」即可。

公众号图片

许可证

Apache License 2.0

Copyright (c) 2018-2026 macrozheng

mall-admin-web (macrozheng/mall-admin-web)

Searching Database…

What is this?This is the frontend admin dashboard for an e-commerce back-office system, covering product, order, member, promotion, operations, content, statistics, finance, and permission management.
Is this a standalone app or does it need a backend?It's the frontend-only part of a separated frontend/backend project; it needs the companion backend project called 'mall' to actually work, unless you point it at the hosted online demo API.
How do I get it running?Install Node.js v20+, clone the repo, run 'npm install' then 'npm run dev', and open the dev server address shown in the terminal.
Do I need to set up the backend myself, or can I just use the online API?You can skip backend setup by switching the VITE_BASE_SERVER_URL in .env.development to the online API endpoint; if you want to connect to the 'mall-swarm' microservices version, all requests must go through its gateway instead.
Is this the latest tech stack, or is there an older version?The master branch uses Vue 3 + Element Plus; there's a separate dev-v2 branch still on Vue 2 + Element for older setups.
What UI framework and charting library does it use?It's built on Vue 3 with the Element Plus UI framework, Vue Router for routing, Pinia for state management, Axios for HTTP requests, and a vue-charts library based on Echarts for reports.
Does it include a rich text editor?Yes, it uses TinyMCE Vue as the built-in rich text editor, for example for product descriptions.
Is there a companion learning resource?Yes, the author provides a full tutorial called 'mall学习教程' (mall Learning Tutorial) alongside a live online demo of the admin panel.
How do I deploy it to production?The README points to a dedicated guide for installing and deploying the frontend project, plus a separate guide on automating deployment with Jenkins.
Creator
macrozheng
Size
2.7 MB
Stars
12.6K
Age
8y
Commits · 90 Days