当今社会的快速发展，【效率】二字贯穿人们的生活！前端攻城狮在工作中更是要求要高效的完成每一个项目；目前流行的三大框架承担了此项工作，Vue 的学习使用更是将 简单、快速、高效 完美的展现了出来~

妙味北京 JS 实体班学员 * 松 正是跟随技术的潮流，紧紧的抓住了 Vue 的优势，熟练掌握了该框架，并主流使用 Vue 搭建了此项目：美图移动端商城；

项目名称： 美图移动端商城

项目地址： http://m.microbu.com/170613/shensong/#/

开发周期： 14 天

开发技术栈：

• Vue-cli 快速搭建单页应用
• Vue 核心框架
• Vue-Router 单页面路由跳转
• Axios 基于 Promise 对象，实现 Ajax 请求
• Vuex 集中式状态管理
• Stylus CSS 预处理
• IconFont 矢量图标
• Easy-Mock 模拟数据，实现前后端数据分离
• Better-Scroll 实现页面滚动
• Vue-Infinite-Scroll 实现上拉加载
• Vue-Lazyloay 实现图片懒加载

设计思路与功能：

数据获取

• 采用 Easy-Mock 模拟数据，实现前后端数据分离。

• 在 Vue-cli 中使用 proxyTable 代理解决开发环境的跨域问题。

• 同一文件目录下封装 Axios 请求，实现 Ajax 集中式管理。

页面优化

• 引入 fastclick 插件，解决移动端 click 事件的 300ms 延迟。

• 使用 Vue 内置组件 keep-alive，将匹配的组件进行缓存，减少 ajax 请求。

• 使用媒体查询(@media)，针对不同的设备像素比(device-pixel-ratio)进行缩放，实现移动端1px边框。

• 引入 Vue-Lazyloay 插件，实现图片懒加载。

• 通过媒体查询(@media)，配合不同的设备像素比(device-pixel-ratio)，分别切出@2x和@3x的图片，来实现移动端 Retina 屏幕图片的适配。

轮播图组件

• 引入 Better-Scroll 插件，实现轮播图组件的高效复用。

定位查找体验店

• 首先获取所属 IP 网络的省份信息，然后从所有省份中选择定位的省份，最后根据省份的省会城市查找到当前体验店的信息。

复杂配件页的路由实现

• 将不同配件通过动态路由:id 都匹配到 GoodsLists 组件，然后根据不同配件下是否有机型数据通过动态路由:model同样都匹配到 GoodsLists 组件。这样 GoodsLists 组件与 Goods 组件形成了路由嵌套关系，GoodsLists 组件共享了 MHeader 和 Category 组件。

登录跳转

• 通过在路由配置中添加 meta 字段，然后配合 vue-router 的导航钩子函数 beforeEach，拦截导航，实现登录跳转。使用 localstorage 保存登录信息，实现登录持久化。

加入购车小球动画

• 通过过渡动画的三个钩子函数进入前 beforeEnter、进入中 enter、进入后afterEnter，实现加入购物车的小球动画效果。

购物车

• 使用 Vuex 集中式管理购物车数据，实现购物车的单选、全选、价格合计、增减、删除、全部删除等。用 localstorage 保存已购商品信息，实现数据持久化。

遇到的难点及解决方法：

• 当使用 Vue 内置组件 keep-alive 缓存页面时，返回首页轮播图出现不轮播的现象。解决方法是利用声明周期的两个钩子函数 activated 和 deactivated，让轮播图重新计算宽度，利用 BetterScroll 的 refresh 方法，重新刷新，实现轮播的效果；同样，当屏幕宽度发生变化，轮播图出现宽度不适应的现象。解决方法是当组件渲染时，在钩子函数 mounted 绑定 resize 事件，监听窗口改变，重新计算刷新。

• 登录页面如何判断某个路由是否需要登录。在路由配置的时候添加 meta 字段，表示进入此路由是需要登录的。然后利用 vue-router 的全局钩子函数 beforeEach 拦截导航，判断是否需要登录。登录成功后将登录信息保存在 localstrage 中，下次就可以跳过登录。

• 多个动态路由匹配同一个详情页 Detail 组件，如何实现首次进入数据通过 Ajax 获取，再次进入不发送 Ajax 请求。解决方法是利用 Vuex 储存数据。结合 keep-alive 的两个钩子函数 activated 和 deactivated 实现。每个商品详情页首次加载数据都储存到 Vuex，再次进入数据直接通过 Vuex 获取。

• 配件页点击切换速度过快，会出现内容串页的现象。解决方法是利用 Axios 的取消请求实现。预先在 Axios 请求中添加一个 cancelToken 字段。每次点击切换时，先 cancel 取消本次请求。然后发送新的请求。

查看更多学员作品：http://miaov.com/index.php/example/exampleList

相关课程推荐：

妙味 Vue 系统修炼与精彩实战（周末班）

开班时间：2018 年 1 月 6 日

课程总费用：1888 元/位

课程优惠信息：

☩ 凡 12 月 29 日之前报名者，每人减免 88 元，即：1800 元/位；
☩ 凡 2 人组团报名，每人减免 158 元，即：1730 元/位；
☩ 凡 3 人组团报名，每人减免 188 元，即：1700 元/位；

详情介绍：http://miaov.com/index.php/news/newsDetail/nid/284

JS 课程目录：

报名地址：http://miaov.com/index.php/course/coursedetail/cid/36

课程咨询：

咨询QQ：2852509866

微信咨询：miaov-class

电话咨询：010-57269690