# ShoppingVue3ViteAntdDesignVue

**Repository Path**: zhao-jingtao-l_admin/shopping-vue3-vite-antd-design-vue

## Basic Information

- **Project Name**: ShoppingVue3ViteAntdDesignVue
- **Description**: 基于Vue3.5.24 + Vite7 + AntdDesignVue + Express开发
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-17
- **Last Updated**: 2025-11-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, vite, Express, Ant-Design, Cesium

## README

# 购物管理系统 (Shopping Management System)

一个基于 Vue 3 + Vite + Ant Design Vue 构建的现代化电商管理系统，提供完整的商品管理、订单处理和用户管理功能。

## 🚀 技术栈

### 前端技术
- **Vue 3** - 采用 Composition API 和 `<script setup>` 语法
- **Vite** - 快速的构建工具，提供热重载和优化打包
- **Ant Design Vue** - 企业级UI组件库，提供丰富的组件和设计语言
- **Vue Router** - 官方路由管理器，支持路由守卫和权限控制
- **Pinia** - 现代化的状态管理库
- **Vue I18n** - 国际化支持，支持中英文切换
- **Axios** - HTTP客户端，用于API请求
- **ECharts** - 数据可视化图表库

### 后端技术
- **Node.js** - JavaScript运行环境
- **Express** - Web应用框架
- **JSON Server** - 用于快速创建REST API模拟服务

## 📦 功能特性

### 核心功能
- **用户认证与授权** - 支持登录、注册和基于角色的权限控制
- **仪表盘** - 数据统计和可视化展示
- **商品管理** - 商品的增删改查、分类管理、库存管理
- **订单管理** - 订单查看、状态更新、订单详情
- **用户管理** - 用户信息管理、角色分配

### 高级功能
- **数据可视化** - 使用ECharts实现丰富的图表展示
- **批量操作** - 支持批量删除、批量更新等操作
- **数据导入导出** - 支持Excel格式的数据导入导出
- **拖拽排序** - 提供直观的拖拽排序功能
- **全局搜索** - 快速查找商品、订单等信息
- **实时通知** - 系统通知和消息提醒
- **主题定制** - 支持亮色/暗色主题切换
- **国际化** - 支持中英文语言切换

## 🛠️ 安装与运行

### 环境要求
- Node.js >= 16.0.0
- npm >= 7.0.0

### 安装步骤
1. 克隆项目到本地
```bash
git clone [项目地址]
cd ShoppingVue3Vite
```

2. 安装依赖
```bash
npm install
```

3. 启动开发服务器
```bash
# 同时启动前端和后端服务
npm run start

# 或者分别启动
npm run server  # 启动后端API服务 (端口: 3000)
npm run dev      # 启动前端开发服务器 (端口: 5173)
```

4. 构建生产版本
```bash
npm run build
```

## 📁 项目结构

```
ShoppingVue3Vite/
├── public/                 # 静态资源
├── src/
│   ├── api/               # API接口
│   ├── assets/            # 资源文件
│   ├── components/        # 公共组件
│   │   ├── Layout.vue     # 布局组件
│   │   ├── ThemeSwitcher.vue  # 主题切换
│   │   ├── LanguageSwitcher.vue  # 语言切换
│   │   └── ...           # 其他组件
│   ├── i18n/              # 国际化配置
│   ├── router/            # 路由配置
│   ├── store/             # 状态管理
│   ├── utils/             # 工具函数
│   └── views/             # 页面组件
│       ├── Dashboard.vue  # 仪表盘
│       ├── Products.vue   # 商品管理
│       ├── Orders.vue     # 订单管理
│       ├── Users.vue      # 用户管理
│       └── ...           # 其他页面
├── db.json               # 模拟数据库
├── server.js             # 后端API服务
└── package.json          # 项目配置
```

## 🔐 默认账号

- 管理员账号: `admin` / `admin123`
- 普通用户账号: `user` / `user123`

## 📝 开发说明

### 路由与权限
- 项目采用基于角色的权限控制
- 管理员可以访问所有功能
- 普通用户只能访问部分功能
- 路由守卫确保未登录用户重定向到登录页

### 状态管理
- 使用Pinia进行状态管理
- 用户信息、主题设置等全局状态统一管理

### API接口
- 后端使用Express和JSON Server提供RESTful API
- 支持分页、排序、筛选等功能
- 使用Axios进行HTTP请求

## 🤝 贡献指南

1. Fork 本仓库
2. 创建您的特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交您的更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 打开一个 Pull Request

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情

## 📞 联系方式

如有问题或建议，请通过以下方式联系：

- 邮箱: z19472333952022@163.com
- 电话: 15231022641
- 项目地址: [项目地址]

---

⭐ 如果这个项目对您有帮助，请给它一个星标！