Skip to content

Smallmotor/jumei-project

Repository files navigation

前言

最近接触了一下vue,发现vue这款框架有点也是很多.它非常的简单:官方文档很清晰,比 Angular 简单易学。非常的快速:异步批处理方式更新 DOM。组合:用解耦的、可复用的组件组合你的应用程序。紧凑:~18kb min+gzip,且无依赖。强大:表达式 & 无需声明依赖的可推导属性 (computed properties)。对模块友好:可以通过 NPM、Bower 或 Duo 安装,不强迫你所有的代码都遵循 Angular 的各种规定,使用场景很是灵活。

我在学习初期,不仅看了vue官方文档,还查阅了大量的博客.源码等,发现有很多都是生搬照抄,对初学者并不能起到很大的作用,所以现在自己做出一个demo,供大家学习.

在选择应用方面,我选择的是< 聚美优品 >.因为电商应用页面较多,而且交互复杂,要求逻辑严谨,适合各种阶段的vue学者.

这个项目我初算大大小小有 50+ 的页面,其中涉及登录注册,购物车,商品展示,下单等,是一个完整的项目流程.

技术

vue2 + vuex + vue-router + webpack + ES6/7 + sass + flex + svg + vue-resource

功能

  • 定位功能
  • 选择城市
  • 搜索地址
  • 搜索商品
  • 商品详情页
  • 商品评论
  • 直播社区
  • 社区动态
  • 好友申请
  • 好友互动
  • 登录、注册
  • 修改密码
  • 个人中心
  • 发送短信、语音验证
  • 下单功能
  • 订单列表
  • 订单详情
  • 下载App
  • 添加、删除、修改收货地址
  • 帐户信息
  • 服务中心
  • 红包
  • 上传头像

部分截图

项目布局

├── build                                       // webpack配置文件
├── config                                      // 项目打包路径
├── jumei                                         // 上线项目文件,放在服务器即可正常访问
├── screenshots                                 // 项目截图
├── src                                         // 源码目录
|   ├── components                              // 组件
|   ├── config                                  // 基本配置
|   ├── router
│   └── router.js  
|   ├── store                                   // vuex的状态管理// 路由配置
|   └──
│   ├── App.vue                                 // 页面入口文件
│   ├── main.js                                 // 程序入口文件,加载各种公共组件
├── favicon.ico                                 // 图标
├── index.html                                  // 入口html文件