本项目是利用业余时间开发完成的简单版，加深一下对各技术知识点的实操积累经验。基于 vue-cli3.x + axios 构建多页面应用的H5移动端电商网站，采用前后端分离技术，项目中用到的API接口是通过引入mockjs模拟数据和第三方API接口，让前端开发人员独立于后端进行开发。由于涉及微信页面，建议使用微信web开发者工具进行页面开发。
前端人员也可以开发API接口，推荐几个模拟数据的工具，注册账号，查看官网文档：
- mockjs官网 http://mockjs.com/
- yapi官网 http://yapi.demo.qunar.com/
- easy-mock官网 https://easy-mock.com/docs
│ vue.config.js // webpack配置
│ vue.util.js // 打包多页面配置
├─public
│ favicon.ico // 图标
│ index.html // 入口html文件
│ share.png // 微信分享提示
├─src
│ ├─assets
│ │ ├─css
│ │ │ common.css // 公共样式文件
│ │ ├─img // 存放公共图片文件夹
│ │ └─js
│ │ api.js // 封装所有API接口调用方法
│ │ common.js // 常用JS方法
│ │ export.js // 外部调用统一出口
│ │ fastclick.js // 移动端点击延迟事件处理
│ │ network.js // axios封装与拦截器配置
│ │ url.js // 自动部署服务器环境
│ ├─components
│ │ backTop.vue // 返回顶部组件
│ │ categoryList.vue // 商品分类组件
│ │ errNotice.vue // 错误弹框提示信息组件
│ │ jumpCoupon.vue // 跳转优惠券
│ │ loading.vue // 页面初始化加载数据的动画组件
│ │ qrcodePop.vue // 生成二维码弹框
│ │ shopList.vue // 商品列表组件
│ │ soldOut.vue // 请求数据错误展示占位图
│ ├─mock
│ │ index.js // 引入mockjs模拟数据
│ └─pages
│ ├─coupon
│ │ coupon.html // 领券页面结构
│ │ coupon.js // 领券页面入口文件，加载各种公用组件
│ │ coupon.vue // 领券页
│ ├─detail
│ │ detail.html // 商品详情结构
│ │ detail.js // 商品详情入口文件，加载各种公用组件
│ │ detail.vue // 商品详情页
│ ├─index
│ │ index.html // 首页结构
│ │ index.js // 首页入口文件，加载各种公用组件
│ │ index.vue // 首页
│ └─search
│ search.html // 商品分类/关键词搜索页面结构
│ search.js // 商品搜索入口文件，加载各种公用组件
│ search.vue // 商品搜索页
└─static // 存放静态资源文件夹
└─img // 静态图片文件夹
- vue2.6
- axios
- webpack
- ES6/7
- flex
- rem
- mockjs
- 首页轮播图
- 商品列表
- 返回顶部
- 类目、模糊搜索
- 二维码公众号
- 详情页展示
- 猜你喜欢
- 查看、领取优惠券
- 复制优惠券链接
- 朋友圈分享提示
git clone https://github.com/jackchen0120/woyouzhe.git
cd woyouzhe
npm install 或 yarn
npm run serve
运行之后，访问地址：http://localhost:8090
npm run build
