Skip to content
一个前端基于vue,后端使用api工厂供的免费接口和云后台实现的移动端商城
Vue JavaScript Other
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public 增加砍价,拼团 Aug 1, 2019
src
.env.development 优化代码 Jul 2, 2019
.env.production 优化代码 Jul 2, 2019
.eslintrc.js 代码格式化,统一风格 Aug 9, 2019
.gitignore fix:添加注释 Aug 14, 2019
README.md 最近有点忙,暂不更 Sep 2, 2019
babel.config.js project init Jun 18, 2019
package-lock.json 代码格式化,统一风格 Aug 9, 2019
package.json
vue.config.js 代码格式化,统一风格 Aug 9, 2019

README.md

v-shop 商城(H5端)

一个前端基于vue,后端使用api工厂供的免费接口和云后台实现的移动端商城 最近有点忙,暂不更 最近有点忙,暂不更 最近有点忙,暂不更

项目设置

npm install

项目本地调试和热更新

npm run serve

项目本地打包用于发布线上

npm run build

功能清单

  • 订单管理
    • 创建订单
    • 订单列表
    • 订单详情(取消订单,付款,确认收货,评价,退换货)
    • 系统钱包支付订单
  • 用户管理
    • 用户注册/登录(手机号-手机接收验证码注册)
    • 用户资产
    • 用户信息(详情,修改)
    • 收货地址(详情,修改,添加,删除)
    • 我的收藏
    • 资金明细(加入充值/提现)
  • 优惠券
  • 购物车
  • 商城模块
    • 商品列表
    • 商品详情
      • 商品规格(支持无规格,最多支持3种规格)
      • 商品收藏
      • 商品评价
      • 商品分享海报(普通商品,砍价,拼团商品等海报)
  • 积分模块
  • 拼团/砍价
  • 微信开发(公众号)
    • 微信支付
    • 用户注册/登录(微信公众号-快速注册/登录)
    • 绑定手机号
    • 微信分享给朋友
    • 微信支付
  • 定制主题
  • 页面路由缓存栈

项目截图

上传图片会被截掉,换成点链接查看

项目截图

拼团截图

砍价截图

项目结构

src -- 源码目录
├── assets -- 静态图片资源文件
├── commmon -- 公用js
    ├── area.js -- 全国城市区数据JSON
    ├── flexible.js -- 可伸缩布局方案
    ├── request.js -- axios网络请求封装
    ├── util.js -- 工具类
    ├── validate.js -- 正则效验函数
    ├── validator.js -- 表单验证集合
├── components -- 通用组件封装 
├── router.js -- vue-router路由配置
├── store.js -- vuex的状态管理
├── styles -- 全局css样式
└── pages -- 前端页面
    ├── login -- 登录页
    ├── home -- 首页
    ├── user -- 用户中心
    ├── cart -- 购物车
    └── ... -- 其他页面

商品数据来源

https://m.mi.com/

Rem 适配

项目编写过程中样式直接使用 px作为单位 ,然后再用工具转化

  1. 引入flexible 用于设置 rem 基准值
// main.js
import './common/flexible'
  1. 安装 postcss-pxtorem 用于将单位转化为 rem

$ npm install postcss-pxtorem --save-dev

// vue.config.js
const autoprefixer = require('autoprefixer')
const pxtorem = require('postcss-pxtorem')

css: {
  loaderOptions: {
    postcss: {
      plugins: [
        autoprefixer({
          browsers: ['Android >= 4.0', 'iOS >= 7']
        }),
        pxtorem({
          rootValue: 50,
          unitPrecision: 3,
          propList: ['*', '!font*'],
          selectorBlackList: ['.ignore ', '.hairlines', 'van-circle__layer', '.van-hairline'],
          minPixelValue: 2,
        })
      ]
    }
  }
}

联系我

舒志平

联系方式:1442702103@qq.com
微信:f144270

You can’t perform that action at this time.