# wudShop

**Repository Path**: wutopiai/wud-shop

## Basic Information

- **Project Name**: wudShop
- **Description**: wudShop是一款基于Vue和Element Plus开发而成的商城平台，现已上线Web端、H5端、小程序端。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 6
- **Forks**: 0
- **Created**: 2024-09-01
- **Last Updated**: 2025-06-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, Element-UI, TypeScript

## README

## 项目简介

### 项目说明

该项目包含四个端：微信小程序端，H5 端，App 端，PC 端。

当前仓库是**Web端**，**uni-app** 开发的**微信小程序端**，通过**条件编译**能兼容 **H5 端** 和 **App 端**

### 在线体验

<table>
  <tr>
    <td><a target="_blank" href="https://erabbit.itheima.net/#/">体验 Web 端</a></td>
    <td>体验小程序端</td>
    <td><a target="_blank" href="https://megasu.gitee.io/uniapp-shop-vue3-ts/">体验 H5 端</a></td>
    <td><a target="_blank" href="https://gitee.com/Megasu/uniapp-shop-vue3-ts/releases/download/v1.0.0/heima-shop.apk">体验 App 端(安卓)</a></td>
  </tr>
  <tr>
    <td><img width="300" src="./README/images/code-pc.png" alt=""></td>
    <td><img width="300" src="./README/images/code-mp-weixin.png" alt=""></td>
    <td><img width="300" src="./README/images/code-h5.png" alt=""></td>
    <td><img width="300" src="./README/images/code-android.png" alt=""></td>
  </tr>
</table>
### 项目架构

![项目架构图](./README/images/project_structure.png)

### 项目截图

| ![screenshot_1](./README/images/screenshot_1.png) | ![screenshot_2](./README/images/screenshot_2.png) | ![screenshot_3](./README/images/screenshot_3.png) |
| ------------------------------------------------- | ------------------------------------------------- | ------------------------------------------------- |
| ![screenshot_4](./README/images/screenshot_4.png) | ![screenshot_5](./README/images/screenshot_5.png) | ![screenshot_6](./README/images/screenshot_6.png) |

<table>
  <tr>
    <td><img width="100" src="./README/images/screenshot_1.jpg" alt=""></td>
    <td><img width="100" src="./README/images/screenshot_2.jpg" alt=""></td>
    <td><img width="100" src="./README/images/screenshot_3.jpg" alt=""></td>
    <td><img width="100" src="./README/images/screenshot_4.jpg" alt=""></td>
    <td><img width="100" src="./README/images/screenshot_5.jpg" alt=""></td>
    <td><img width="100" src="./README/images/screenshot_6.jpg" alt=""></td>
  </tr>
  <tr>
    <td><img width="100" src="./README/images/screenshot_7.jpg" alt=""></td>
    <td><img width="100" src="./README/images/screenshot_8.jpg" alt=""></td>
    <td><img width="100" src="./README/images/screenshot_9.jpg" alt=""></td>
    <td><img width="100" src="./README/images/screenshot_10.jpg" alt=""></td>
    <td><img width="100" src="./README/images/screenshot_11.jpg" alt=""></td>
    <td><img width="100" src="./README/images/screenshot_12.jpg" alt=""></td>
  </tr>
</table>
### 项目简介

该项目包含了从首页浏览商品，到商品详情，微信登录，加入购物车，提交订单，微信支付，订单管理等功能。

### 技术栈

- 前端框架：[uni-app](https://uniapp.dcloud.net.cn/) (Vue3 + TS)
- 状态管理：[pinia](https://pinia.vuejs.org/zh/)
- 组件库：[uni-ui](https://uniapp.dcloud.net.cn/component/uniui/uni-ui.html)、[element plus](https://element-plus.org/zh-CN/)

### 项目模块

- 项目起步
- 首页模块
- 推荐模块
- 分类模块
- 详情模块
- 登录模块
- 用户模块
- 地址模块
- SKU 模块
- 购物车模块
- 订单模块
- 项目打包

### 开发环境

- Windows 版本： Windows 10 企业版
- 开发工具： VS Code 、 微信开发者工具
- Node 版本： v20.3.1
- pnpm 版本：v9.7.1

### 运行程序

1. 安装依赖

```shell
# npm
npm i --registry=https://registry.npmmirror.com

# pnpm
pnpm i --registry=https://registry.npmmirror.com
```

2. 运行程序

```shell
# Web端
npm run dev

# 微信小程序端
npm run dev:mp-weixin

# H5端
npm run dev:h5

# App端
需 HbuilderX 工具，运行 - 运行到手机或模拟器
```

3. 微信开发者工具导入 `/dist/dev/mp-weixin` 目录

### 工程结构解析

**Web：**

```
├─ .vscode                     # VS Code 插件 + 设置
├─ src                         # 源代码
│  ├─ App.vue                  # 入口页面
│  ├─ main.js                  # vue初始化文件入口
│  ├─ views                    # 页面
│  │  ├─ Category              # 分类
│  │  ├─ SubCategory           # 二级分类
│  │  ├─ Pay                   # 支付页
│  │  ├─ Member                # 用户页
│  │  ├─ Login                 # 登录页
│  │  ├─ Layout                # 布局框架
│  │  ├─ Home                  # 首页
│  │  ├─ Detail                # 订单详情
│  │  ├─ Checkout              # 订单结算
│  │  └─ CartList              # 购物车列表
│  ├─ utils                    # 全局方法
│  ├─ styles                   # 全局样式
│  ├─ stores                   # 全局pinia store
│  ├─ router                   # 全局路由
│  ├─ directives               # 指令
│  ├─ composables              # 全局组件
│  ├─ components               # 组合式函数
│  ├─ assets                   # 素材
│  └─ apis                     # 所有请求
├─ .eslintrc.cjs               # ESLint配置
├─ .gitignore                  # git 忽略文件
├─ index.html                  # 首页
├─ jsconfig.json               # jsconfig.json依赖
├─ package.json                # package.json配置
└─ vite.config.js              # vite配置
```

**小程序：**

```
├── .vscode                    # VS Code 插件 + 设置
├── dist                       # 打包文件夹（可删除重新打包）
├── src                        # 源代码
│   ├── components             # 全局组件
│   ├── composables            # 组合式函数
│   ├── pages                  # 主包页面
│       ├── index               # 首页
│       ├── category            # 分类页
│       ├── cart                # 购物车
│       ├── my                  # 我的
│       ├── goods               # 商品详情
│       └── hot                 # 热门推荐
│       └── login               # 登录页
│   ├── pagesMember            # 分包页面(用户模块)
│       ├── address             # 地址管理
│       ├── address-form        # 地址表单
│       ├── profile             # 用户信息
│       └── settings            # 用户设置
│   ├── pagesOrder             # 分包页面(订单模块)
│       ├── create              # 创建订单
│       ├── detail              # 订单详情
│       ├── list                # 订单列表
│       └── payment             # 支付结果
│   ├── services               # 所有请求
│   ├── static                 # 存放应用引用的本地静态资源的目录
│       ├── images              # 普通图片
│       └── tabs                # tabBar 图片
│   ├── stores                 # 全局 pinia store
│       ├── modules             # 模块
│       └── index.ts            # store 入口
│   ├── styles                 # 全局样式
│       └── fonts.scss          # 字体图标
│   ├── types                  # 类型声明文件
│   ├── utils                  # 全局方法
│   ├── App.vue                # 入口页面
│   ├── main.ts                # Vue初始化入口文件
│   ├── pages.json             # 配置页面路由等页面类信息
│   ├── manifest.json          # 配置appid等打包信息
│   └── uni.scss               # uni-app 内置的常用样式变量
├── .eslintrc.cjs              # eslint 配置
├── .prettierrc.json           # prettier 配置
├── .gitignore                 # git 忽略文件
├── index.html                 # H5 端首页
├── package.json               # package.json 依赖
├── tsconfig.json              # typescript 配置
└── vite.config.ts             # vite 配置
```