Uni-Shop 电商应用

Uni-Shop 是一个基于 uni-app 开发的跨平台电商应用，支持多端部署（微信小程序、H5、App等）。该项目实现了完整的电商功能，包括商品浏览、分类查询、购物车、订单管理、用户中心等核心功能。

预览(手机扫码)

项目特点

• 基于 uni-app 框架开发，实现一次开发，多端部署
• 使用 Vue 3 + TypeScript 开发，提供类型安全和更好的开发体验
• 采用 Pinia 进行状态管理，支持数据持久化
• 组件化开发，提高代码复用性和可维护性
• 完整的电商业务流程实现

技术栈

• 前端框架：uni-app、Vue 3
• 开发语言：TypeScript
• 状态管理：Pinia + pinia-plugin-persistedstate（持久化）
• UI组件：uni-ui
• CSS预处理器：SCSS
• 构建工具：Vite
• 代码规范：ESLint + Prettier
• Git Hook：husky + lint-staged

项目结构

uni-shop/
├── src/                       # 源代码目录
│   ├── components/            # 全局公共组件
│   ├── composables/           # 组合式函数
│   ├── pages/                 # 主包页面
│   │   ├── index/             # 首页
│   │   ├── category/          # 分类页
│   │   ├── cart/              # 购物车
│   │   ├── my/                # 个人中心
│   │   ├── goods/             # 商品详情
│   │   ├── hot/               # 热门推荐
│   │   └── login/             # 登录页
│   ├── pagesMember/           # 会员分包（个人信息、地址管理等）
│   ├── pagesOrder/            # 订单分包（订单创建、详情、支付等）
│   ├── services/              # API 服务
│   ├── stores/                # Pinia 状态管理
│   │   ├── modules/           # 状态模块
│   │   └── index.ts           # Pinia 入口
│   ├── styles/                # 全局样式
│   ├── types/                 # TypeScript 类型定义
│   ├── utils/                 # 工具函数
│   │   └── http.ts            # 网络请求封装
│   ├── App.vue                # 应用入口组件
│   ├── main.ts                # 应用入口文件
│   ├── pages.json             # 页面路由配置
│   └── manifest.json          # 应用配置
├── static/                    # 静态资源
│   └── tabs/                  # 底部导航图标
├── .eslintrc.js               # ESLint 配置
├── .gitignore                 # Git 忽略文件
├── .prettierrc.json           # Prettier 配置
├── index.html                 # HTML 模板
├── package.json               # 项目依赖
├── tsconfig.json              # TypeScript 配置
└── vite.config.ts             # Vite 配置

功能模块

1. 首页

• 轮播图展示
• 商品分类导航
• 热门商品推荐
• 猜你喜欢（无限滚动加载）

2. 分类

• 分类导航
• 分类商品展示

3. 商品详情

• 商品信息展示
• 规格选择
• 加入购物车
• 立即购买

4. 购物车

• 商品列表
• 商品选择
• 数量修改
• 结算功能

5. 个人中心

• 用户信息展示
• 订单管理
• 地址管理
• 设置

6. 订单

• 订单创建
• 订单列表
• 订单详情
• 支付功能

开发规范

命名规范

• 文件夹和文件名：使用小写字母和连字符（kebab-case）
• 组件名：使用 PascalCase
• 变量和函数：使用 camelCase
• 常量：使用 UPPER_SNAKE_CASE

代码风格

• 使用 ESLint 和 Prettier 进行代码格式化
• 提交前自动进行代码检查（通过 husky 和 lint-staged）

组件开发规范

• 组件文件使用 .vue 扩展名
• 组件使用 <script setup> 语法
• 自定义组件以 Jbc 开头（通过 easycom 自动注册）

API 请求规范

• 所有 API 请求统一通过 services 目录下的模块进行管理
• API 函数命名规则：动词 + 模块名 + API 后缀（如 getGoodsAPI）
• 使用 TypeScript 类型定义请求参数和响应数据

运行项目

环境要求

• Node.js >= 22.0.0
• pnpm >= 10.0.0

安装依赖

pnpm install

开发模式

# H5
pnpm run dev:h5

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

# 其他平台
pnpm run dev:custom

打包构建

# H5
pnpm run build:h5

# 微信小程序
pnpm run build:mp-weixin

# 其他平台
pnpm run build:custom

项目亮点

1. TypeScript 支持：全面使用 TypeScript 进行开发，提供类型安全
2. 组合式 API：使用 Vue 3 的组合式 API 进行开发，提高代码复用性
3. 自定义请求库：封装了基于 uni.request 的请求库，支持拦截器和错误处理
4. 状态持久化：使用 pinia-plugin-persistedstate 实现状态持久化
5. 分包加载：采用分包策略优化小程序加载性能
6. 自定义组件：开发了多个可复用的业务组件