vue2.0打造美图官网（移动端）

看着各位大神的vue项目泉涌而出,本阶段正在学习Vue的小小白也打算亲自操起键盘来感觉一把Vue世界的美好~~

线上体验

在线demo（ps:记得切换到移动端体验哦~）
github源码

技术栈

• vue2.0

• vue-router spa开发

• vuex 专为 Vue.js 应用程序开发的状态管理模式,集中式存储管理应用的全部组件的状态

• axios 一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端

• mint-ui 基于vue.js的移动端组件库 帮助快速搭建页面

• easy-mock 先后端分离，提供数据接口

• html5 css3

页面预览

主要实现功能

商品信息展现

• 轮播图

• mint-ui navbar 切换商品信息，产品参数

• Toast 用户提醒信息

• 主页面展现

手机预定

预定功能的实现主要在state中添加一个预定商品数组，当预定了商品后就使用数组的push方法将商品加入预定数组中，而后再个人预定页面就能够查看你预定的商品，同时你也能够取消预定，这就更简单了，直接将预定数组清空，固然这只只有一条预定消息的状况下，若是有多条记录，就能够借助splice方法进行数组切割。详细实现能够参考代码。

购物车

（1）加入购物车
首先要作出判断，即将加入购物车的商品是否已经存在购物车中，此时会出现两种状况：

1. 加入的商品在购物车中已经存在， 该商品已经存在购物车中,此时商品数量+1便可。

2. 商品不在购物车,将新加入的商品信息push进cartList
   （2）删除商品

根据根据选中即将删除商品的id在cartList中遍历出该商品并给予删除,由于我在state里是一个数组暂存购物车中的商品，
因此可使用数组的splice方法将指定下标的某个商品删除,即 cartList.splice(index, 1)
（3）商品支付
根据用户选中前往支付的商品动态的显示须要支付的总金额,此时购物车中的商品如同一个个复选按钮，可选可不选，可单选可多选,使用户的购物体验更好,这些共享状态之间相互切换，来及时驱动界面的渲染 。
（4）用户登陆状态判断
在提交订单和当即购买时,须要对用户的登陆状态进行判断，
经过return this.$store.state.login 来获取登陆状态 。
（5 ) 用户收货地址生成
提交订单时 若用户未生成收货地址 前往设置收货地址，
此处我借用localstorage来存储收货地址信息，当用户再次登陆时,则不须要再次设置收货地址。
（6）生成订单
用户选中商品后生成相应订单，
commit mutations ['CREATE_ORDER']
（7）查看订单
支付操做完成后，在登陆的状况下用户可在我的中心查看个人订单。
（8）购物车更新
已经支付生成订单的商品从购物车中“消失”,已经加入购物车但还未支付的商品继续保留其原有的状态，这些状态间的切换，以及组件的更新都仰仗Vuex的响应式状态存储。

小结

1. 采用rem 自适应布局，移动端必备,但使用时需注意rem是相对于根元素,建议项目初期就严格使用rem进行布局，会减小后期的适配工做

2. 初学vue,使用methods和computed可能会存在必定误区，首先须要明白computed是计算属性，实时响应数据的更新，而methods是方法，必须有必定条件去触发，可能这样说上去仍是不够清晰明了，那么就请仔细阅读下面这段话： 计算属性是基于它的依赖缓存。计算属性只有在它的相关依赖发生改变时才会从新取值。这就意味着只要 message 没有发生改变， 屡次访问reversedMessage 计算属性会当即返回以前的计算结果，而没必要再次执行函数。每当从新渲染的时候，method 调用总会执行函数。 也就是说只要不是直接使用浏览器刷新页面，当咱们改变数据、DOM操做等引发页面从新渲染时，计算属性会直接使用缓存，不会从新执行函数。 适合那些计算量很大且改变频率很低的属性；若是使用methods，每次页面从新渲染时都会从新执行methods函数。

3. v-if 和 v-show 的使用,二者都是动态的显示DOM元素,但二者存在区别,性能消耗也不一样，如果频繁的切换状态建议使用v-show

4. vuex使用： - Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化, 那么相应的组件也会相应地获得高效更新。 - 咱们不能直接改变 store 中的状态。改变 store 中的状态的惟一途径就是显式地提交(commit) mutations。
   关于Vuex你想了解更多？一块儿去看文档吧（https://vuex.vuejs.org/zh-cn/） 这样你离大牛又进了一步~

5. 须要继续完善的模块：

• 搜索功能 如今已经能够搜索了，但还未实现先后端同构，主要是依赖easy-mock 构造假数据，而后根据输入的关键字匹配，axios异步请求数据，再将数据渲染到页面上

• 手机预定 这个功能也已经初步实现，但还略显粗糙，会进一步完善~ 毕竟学习永远没有尽头，就像喝了脉动同样，根本停不下来~~~
  最后

这是我的的第一个Vue项目，略显粗糙~ 接下来会不断完善的。
欢迎你们提出issue，共同窗习。

Build Setup

bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For detailed explanation on how things work, checkout the guide and docs for vue-loader.