# V3-admin-management

**Repository Path**: evan_orange/v3-admin-management

## Basic Information

- **Project Name**: V3-admin-management
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-05
- **Last Updated**: 2026-01-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🛒 Vue3 电商管理系统

> 基于 Vue 3 + Vite + Pinia + Element Plus 构建的现代化电商前端项目

![Vue](https://img.shields.io/badge/Vue-3.5.25-4FC08D?style=flat-square&logo=vue.js)
![Vite](https://img.shields.io/badge/Vite-7.2.4-646CFF?style=flat-square&logo=vite)
![Element Plus](https://img.shields.io/badge/Element%20Plus-2.13.1-409EFF?style=flat-square&logo=element)
![Pinia](https://img.shields.io/badge/Pinia-3.0.4-FFD859?style=flat-square)

## 📋 项目概述

这是一个功能完整的电商前端管理系统，采用 Vue 3 Composition API 开发，提供了从商品浏览、购物车管理到订单支付的完整购物流程。项目采用现代化的前端技术栈，具有良好的代码组织结构和用户体验。

## ✨ 核心特性

### 🎯 业务功能
- **🏠 首页展示** - 轮播图、商品分类、热门推荐
- **📦 商品管理** - 分类浏览、商品详情、规格选择
- **🛒 购物车** - 添加商品、数量管理、价格计算
- **💳 订单流程** - 下单结算、支付处理、订单跟踪
- **👤 用户中心** - 个人信息、订单管理、收货地址

### 🛠️ 技术特性
- **现代化架构** - Vue 3 + Composition API
- **状态管理** - Pinia + 数据持久化
- **路由管理** - Vue Router 4 + 路由守卫
- **UI组件** - Element Plus + 自定义主题
- **HTTP请求** - Axios + 拦截器
- **开发工具** - Vite + 热更新

## 🏗️ 技术栈

### 核心框架
```json
{
  "vue": "^3.5.25",           // Vue 3 框架
  "vite": "^7.2.4",           // 构建工具
  "vue-router": "^4.6.4",     // 路由管理
  "pinia": "^3.0.4",          // 状态管理
  "element-plus": "^2.13.1",  // UI 组件库
  "axios": "^1.13.2"          // HTTP 客户端
}
```

### 开发工具
```json
{
  "@vueuse/core": "^12.2.0",                    // Vue 组合式工具库
  "pinia-plugin-persistedstate": "^4.2.0",     // Pinia 持久化
  "unplugin-auto-import": "^0.19.0",           // 自动导入
  "unplugin-vue-components": "^0.28.0",        // 组件自动导入
  "sass": "^1.84.0"                            // CSS 预处理器
}
```

## 📁 项目结构

```
vue3-project/
├── public/                 # 静态资源
├── src/
│   ├── apis/              # API 接口层
│   │   ├── cart.js        # 购物车接口
│   │   ├── user.js        # 用户接口
│   │   ├── home.js        # 首页接口
│   │   ├── category.js    # 分类接口
│   │   ├── detail.js      # 商品详情接口
│   │   ├── checkout.js    # 结算接口
│   │   ├── order.js       # 订单接口
│   │   └── pay.js         # 支付接口
│   ├── assets/            # 静态资源
│   ├── components/        # 全局组件
│   │   ├── ImageView/     # 图片查看组件
│   │   └── Sku/          # 商品规格选择组件
│   ├── composables/       # 组合式函数
│   │   └── useCountDown.js # 倒计时函数
│   ├── directives/        # 自定义指令
│   │   └── index.js       # 图片懒加载指令
│   ├── router/            # 路由配置
│   │   └── index.js       # 路由定义
│   ├── stores/            # Pinia 状态管理
│   │   ├── userStore.js   # 用户状态
│   │   ├── cartStore.js   # 购物车状态
│   │   └── categoryStore.js # 分类状态
│   ├── styles/            # 样式文件
│   │   ├── common.scss    # 全局样式
│   │   ├── var.scss       # SASS 变量
│   │   └── element/       # Element Plus 主题
│   ├── utils/             # 工具函数
│   │   └── http.js        # HTTP 封装
│   └── views/             # 页面组件
│       ├── Layout/        # 布局组件
│       ├── Home/          # 首页
│       ├── Category/      # 分类页
│       ├── SubCategory/   # 子分类页
│       ├── Detail/        # 商品详情
│       ├── CartList/      # 购物车
│       ├── Checkout/      # 结算页
│       ├── Pay/           # 支付页
│       ├── Login/         # 登录页
│       └── Member/        # 用户中心
├── vite.config.js         # Vite 配置
├── package.json           # 项目配置
└── README.md             # 项目说明
```

## 🚀 核心功能模块

### 1. 用户认证系统
```javascript
// 用户状态管理
const userStore = useUserStore()
- 登录/退出功能
- Token 自动管理
- 购物车数据同步
- 用户信息持久化
```

### 2. 购物车管理
```javascript
// 购物车功能
const cartStore = useCartStore()
- 添加/删除商品
- 数量修改
- 规格选择
- 价格计算
- 本地存储同步
```

### 3. 商品展示系统
- **首页轮播** - 动态轮播图展示
- **分类导航** - 多级分类结构
- **商品列表** - 分页加载、筛选排序
- **商品详情** - 图片预览、规格选择、评价展示

### 4. 订单管理系统
- **订单创建** - 地址选择、优惠券使用
- **支付处理** - 多种支付方式
- **订单跟踪** - 状态更新、物流信息
- **订单历史** - 订单列表、详情查看

## 🎨 UI/UX 设计

### Element Plus 定制主题
```scss
// 主题色配置
$--color-primary: #27BA9B;
$--color-success: #1dc779;
$--color-warning: #ffb302;
$--color-danger: #e26237;
```

### 响应式设计
- 移动端适配
- 弹性布局
- 图片懒加载
- 骨架屏加载

## 🔧 开发配置

### Vite 配置亮点
```javascript
// vite.config.js
export default defineConfig({
  plugins: [
    vue(),
    // Element Plus 自动导入
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver({ importStyle: "sass" })]
    })
  ],
  css: {
    preprocessorOptions: {
      scss: {
        // 自动注入全局变量
        additionalData: `@use "@/styles/element/index.scss" as *;`
      }
    }
  }
})
```

### HTTP 拦截器
```javascript
// 请求拦截器 - 自动添加 Token
httpInstance.interceptors.request.use(config => {
  const userStore = useUserStore()
  const token = userStore.userInfo.token
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

// 响应拦截器 - 统一错误处理
httpInstance.interceptors.response.use(
  res => res.data,
  e => {
    // 401 自动跳转登录
    if (e.response.status === 401) {
      userStore.clearUserInfo()
      router.push('/login')
    }
    return Promise.reject(e)
  }
)
```

## 📊 项目亮点

### 🎯 技术亮点
- **现代化开发** - Vue 3 Composition API + `<script setup>`
- **类型安全** - TypeScript 友好的开发环境
- **自动化导入** - 组件和 API 自动导入
- **状态持久化** - Pinia + localStorage 数据持久化
- **模块化设计** - API、组件、样式模块化管理

### 🚀 性能优化
- **按需加载** - Element Plus 组件按需导入
- **图片懒加载** - 自定义 `v-img-lazy` 指令
- **路由懒加载** - 页面组件异步加载
- **缓存策略** - HTTP 请求缓存和状态缓存

### 🛡️ 安全特性
- **Token 管理** - 自动刷新和过期处理
- **路由守卫** - 登录状态验证
- **XSS 防护** - 输入内容过滤
- **HTTPS 通信** - 安全的数据传输

## 🚀 快速开始

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

### 安装依赖
```bash
npm install
```

### 开发模式
```bash
npm run dev
```

### 构建生产版本
```bash
npm run build
```

### 预览生产版本
```bash
npm run preview
```

## 📈 开发规范

### 代码规范
- **组件命名** - PascalCase
- **文件命名** - kebab-case
- **变量命名** - camelCase
- **常量命名** - UPPER_SNAKE_CASE

### Git 提交规范
```
feat: 新功能
fix: 修复问题
docs: 文档更新
style: 代码格式
refactor: 重构代码
test: 测试相关
chore: 构建配置
```

## 🤝 贡献指南

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) 文件了解详情

## 📞 联系方式

- 项目维护者：[Your Name]
- 邮箱：[your.email@example.com]
- 项目地址：[https://github.com/yourusername/vue3-project](https://github.com/yourusername/vue3-project)

---

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