wuyou91 / vueSimpleMall

一个vue全家桶实现的移动端商城

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

shop-vue

一个vue.js的简单商城

数据接口

数据由mockjs搭配json-server生成随机数据模拟后台接口
node爬取的网易严选的数码产品分类下的数据,没有把图片下载下来,直接使用的是网易严选的图片,若其删除则会造成无法获取到对应的图片。 mock-server/data文件夹下用来存放各类元数据,通过运行merge.js将数据合并到db.json内,作为服务数据。

用到的插件及工具

主要功能实现

  • axio获取接口数据,插入模板
  • 路由验证,未登录点击购物车和个人中心跳转到登录页面
  • 路由跳转附带,实现根据商品id请求详情资源
  • 添加至购物车,购物车删除和添加及批量删除
  • vuex状态存储 因为后台只有一个json-server来模拟数据接口,所以对数据的操作全放在了前端处理

项目结构

├─build
├─config
├─mock-server           // 存放mock数据相关
|  └─data
├─src
│  ├─assets
│  │  |─style           // 公共样式
|  |  └─iconfont
│  ├─pages              // 页面
│  │  ├─car
│  │  ├─category
│  │  ├─common
│  │  ├─home
│  │  │  └─components   // 页面里的组件
│  │  ├─login
│  │  │  └─components
│  │  ├─productdetail
│  │  └─user
│  ├─router             // 路由
|  └─store              // vuex状态管理
└─static                // 静态资源
    ├─images 
    │  └─categories
    └─lib 
  • npm install 安装依赖

  • npm run start 开启mock服务器并运行开发环境

  • npm run mock 单独开启mock服务器

  • npm run dev 单独运行开发环境

  • npm run build 打包生产环境文件

  • npm run data 重新生成合并模拟数据

About

一个vue全家桶实现的移动端商城


Languages

Language:Vue 57.5%Language:JavaScript 41.3%Language:SCSS 0.6%Language:HTML 0.5%