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…

12.6K ·GitHub
Mall-admin-web
Что это такое?Это фронтенд-панель администратора для бэк-офиса интернет-магазина. Она охватывает управление товарами, заказами, участниками, акциями, операциями, контентом, статистикой, финансами и правами доступа.
Это самостоятельное приложение или нужен бэкенд?Это только фронтенд-часть проекта, разделённого на фронтенд и бэкенд. Для работы нужен парный бэкенд-проект под названием 'mall', если только вы не подключаетесь к размещённому онлайн-демо API.
Как его запустить?Установите Node.js v20+, клонируйте репозиторий, выполните 'npm install', затем 'npm run dev' и откройте адрес dev-сервера, который появится в терминале.
Нужно ли мне самому настраивать бэкенд или можно сразу использовать онлайн API?Настройку бэкенда можно пропустить: замените VITE_BASE_SERVER_URL в .env.development на адрес онлайн API. Если же нужно подключиться к версии на микросервисах 'mall-swarm', все запросы должны идти через её шлюз.
Это самая новая технологическая база или есть более старая версия?В ветке master используется Vue 3 + Element Plus. Отдельная ветка dev-v2 всё ещё работает на Vue 2 + Element для старых конфигураций.
Какой UI-фреймворк и библиотека графиков используются?Проект построен на Vue 3 с UI-фреймворком Element Plus. Маршрутизация работает через Vue Router, управление состоянием через Pinia, HTTP-запросы через Axios, а для отчётов используется библиотека vue-charts на основе Echarts.
Есть ли в проекте редактор форматированного текста?Да, встроенный редактор форматированного текста — TinyMCE Vue, например, для описаний товаров.
Есть ли сопутствующие учебные материалы?Да, автор подготовил полное руководство «mall学习教程» (можно перевести как «Учебное пособие по mall»), а также есть живое онлайн-демо админ-панели.
Как развернуть его в продакшене?В README есть отдельное руководство по установке и развёртыванию фронтенд-проекта, а также отдельная инструкция по автоматизации развёртывания с помощью Jenkins.
What are similar projects?vuestic-admin, vue-element-admin, vue-admin-better, vue-admin-template, d2-admin, vue2-manage, iview-admin, vhr
Which topics is it in?axios, element-ui, vue-router, vuex, markdown-editor, vuejs, vue3, ecommerce, admin-dashboard, charts, vue, dashboard
Creator
macrozheng
Size
2.7 MB
Stars
12.6K
Updated
CommitMay 14Releasev1.0.0Dec 15
Age
8y
Commits · 90 Days