最近接触了一下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文件