React>> react-mobile-app>> 返回
项目作者： baozouai

项目描述 ：
本项目是基于React、Antd Mobile, Redux的移动端电商App
高级语言： JavaScript
项目地址: git://github.com/baozouai/react-mobile-app.git


项目简介

本项目是基于React、Antd Mobile、redux、axios的移动端电商App，api文档请见api文档，项目已上线，有兴趣的可预览UGo Mall 。目前还有许多需要优化的地方，比如性能、体验、UI方面，我会一步步将这些加以改善

一、目录结构

  1. ├── README.md
  2. ├── config-overrides.js
  3. ├── package-lock.json
  4. ├── package.json
  5. ├── node_modules
  6. ├── public
  7. │   ├── favicon.ico
  8. │   ├── index.html
  9. │   └── robots.txt
  10. └── src
  11.     ├── App.js
  12.     ├── api
  13.     │   └── index.js // 请求api总文件
  14.     ├── assets
  15.     │   └── imgs
  16.     │       └── cart_empty.png // 购物车为空图片
  17.     ├── components
  18.     │   └── PrivateRoute.js // 私有路由
  19.     ├── data
  20.     │   └── citys.js // 城市信息
  21.     ├── index.js
  22.     ├── layout
  23.     │   └── Layout.js // 底部导航栏
  24.     ├── store
  25.     │   ├── reducers
  26.     │   │   ├── CartReducer.js // 存储购物车数据的reducer
  27.     │   │   ├── UserReducer.js // 存储用户数据的reducer
  28.     │   │   └── reducer.js // 总reducer
  29.     │   └── store.js
  30.     ├── style // 样式
  31. │   │   ├── cart.css
  32. │   │   ├── cart.less
  33. │   │   ├── category.css
  34. │   │   ├── category.less
  35. │   │   ├── errorpage.css
  36. │   │   ├── errorpage.less
  37. │   │   ├── goodsdetail.css
  38. │   │   ├── goodsdetail.less
  39. │   │   ├── home.css
  40. │   │   ├── home.less
  41. │   │   ├── index.css
  42. │   │   ├── mynologin.css
  43. │   │   ├── mynologin.less
  44. │   │   ├── orderlist.css
  45. │   │   ├── orderlist.less
  46. │   │   ├── pay.css
  47. │   │   ├── pay.less
  48. │   │   ├── register.css
  49. │   │   ├── register.less
  50. │   │   ├── searchfield.css
  51. │   │   ├── searchfield.less
  52. │   │   ├── searchgoods.css
  53. │   │   └── searchgoods.less
  54.     ├── upload
  55.     │   └── avatar.png // 用户头像
  56.     └── views
  57.         ├── AddressInfo.js // 地址信息页面
  58.         ├── Cart.js // 购物车页面
  59.         ├── ErrorPage.js // 404页面
  60.         ├── GoodsDetail.js // 商品详情页面
  61.         ├── Home.js // 首页
  62.     ├── Category.js // 商品分类
  63.         ├── Login.js // 登录页面
  64.         |—— MyNoLogin.js // 未登录前我的页面
  65.         ├── My.js // 我的页面
  66.         ├── OrderList.js // 订单列表页面
  67.         ├── Pay.js // 支付页面
  68.         ├── Register.js // 注册页面
  69.         ├── SearchField.js // 搜索区域页面
  70.         └── SearchGoods.js // 搜索商品结果页面

二、快速安装

1、clone到本地

git clone https://github.com/baozouai/react-mobile-app.git

2、打开终端，cd react-mobile-app,切换到项目根目录，在项目根目录运行以下命令

npm install，安装所需的依赖

3、然后运行npm start开启项目

项目默认运行在http://localhost:3000/，可自行修改端口

4、成功如图

首页

其他请看项目截图