mall-app-web
前言
该项目为前后端分离项目的前端部分，后端项目mall地址：传送门。
项目介绍
mall-app-web是一个电商系统的移动端项目，基于uni-app+Vue3实现。主要包括首页门户、商品搜索、商品展示、品牌专区、购物车、订单流程、支付、会员中心等功能。
项目演示
项目在线演示地址：https://www.macrozheng.com/app/
效果展示
技术选型
| 技术 | 说明 | 官网 |
|---|---|---|
| Vue 3 | 核心前端框架 | https://vuejs.org |
| Pinia | 全局状态管理框架 | https://pinia.vuejs.org |
| TypeScript | 类型系统 | https://www.typescriptlang.org |
| uni-app | 移动端前端框架 | https://uniapp.dcloud.io |
| Vite | 构建工具 | https://vitejs.dev |
| Sass | CSS 预处理器 | https://sass-lang.com |
| ESLint | 代码质量检查 | https://eslint.org |
| Prettier | 代码格式化 | https://prettier.io |
项目结构
src -- 源码目录
├── apis -- API 请求方法（按业务模块划分）
├── components -- 通用组件封装
├── composables -- 组合式函数（自定义 hooks）
├── pages -- 前端页面
│ ├── address -- 地址管理页
│ ├── brand -- 商品品牌页
│ ├── cart -- 购物车页
│ ├── category -- 商品分类页
│ ├── coupon -- 优惠券页
│ ├── index -- 首页
│ ├── money -- 支付页
│ ├── notice -- 通知页
│ ├── order -- 订单页
│ ├── product -- 商品页
│ ├── public -- 登录页
│ ├── set -- 设置页
│ └── user -- 会员页
├── static -- 图片等静态资源
├── stores -- Pinia 状态管理
├── styles -- 全局样式
├── types -- TypeScript 类型定义
└── utils -- 工具类
搭建步骤
- 本项目使用了
VSCode开发，下载地址：https://code.visualstudio.com/ - 该项目为前后端分离项目，访问本地访问接口需搭建后台环境，搭建请参考后端项目传送门；
- 注意由于
mall-app-web中的接口都在mall-portal模块中，所以一定要启动该模块； - 访问在线接口无需搭建后台环境，只需将
.env.development文件中的VITE_API_BASE_URL改为线上地址即可：https://portal-api.macrozheng.com - 克隆源代码到本地，使用
VSCode打开，使用npm install命令安装项目依赖； - H5 端运行：在
VSCode中使用npm run dev:h5运行项目，运行成功后打开下面地址（将浏览器改为手机模式）：http://localhost:5173 - 微信小程序端运行：在
VSCode中使用npm run dev:mp-weixin运行项目，运行成功后在微信开发者工具中导入项目的\dist\dev\mp-weixin即可运行
公众号
学习不走弯路，关注公众号「macrozheng」，回复「学习路线」，获取 mall 项目专属学习路线！
加微信群交流，公众号后台回复「加群」即可。
许可证
Copyright (c) 2020-2026 macrozheng