这个是我的第一个vue项目，历时了两个多星期完成吧，通过这个项目了解了vue框架的基本语法以及生命周期等特性，并且了解了vue-loader、vue-cli、vue-router、vuex的基本使用方法，以及使用到axios，swiper，mint-ui，Volecity库，收获颇深，因此想在此简单地叙述一下重构有赞商城的基本思路以及当中的一些重要操作，另外当作对自己项目的回顾以及相关vue知识的总结。
以下是本次项目的代码链接和预览链接：
代码链接：https://github.com/Leonardo-zyh/Vue-youzanStore
预览链接：https://leonardo-zyh.github.io/Vue-youzanStore/dist1/
首先这次重构有赞商城使用的是一个多页面应用的重构思路，因此在进行重构之前要对项目文件进行一些配置和调整，具体的操作的话可以点击以下这个链接进行查看：基于vue-cli搭建一个多页面应用
在完成了多页面应用的基础结构的搭建之后，会出现项目根目录下有一个src文件夹，src文件里有components、modules、pages三个文件夹的情况，而components文件夹是用来放置一些共用的vue组件的，而modules文件夹里是放置一些共用的css、js模块，至于最后的pages文件夹则是用来放置有赞商城的不同页面的文件，每个页面都会在pages内呈一个单独的文件夹，里面会放置关于这个页面的独有的所有文件。
在这里先说明一下，重构过程中所有获取到的数据，都是通过使用在easymock上编写对应的接口（原在数据在rap2上，但是接口数据不稳定且无法搭建在github上），然后通过axios发送异步请求来获取到的模拟的数据，这是模仿真实的开发环境下的操作，具体的实现过程的话可以参考easymock以及我在github上面的源码文件。
以下是重构有赞商城的所需的页面列表，一共有六个页面，分别为：
1.首页
2.目录分类页
3.商品搜索列表页
4.商品详情页
5.购物车页面
6.个人中心地址管理页面
接下来我们会逐个页面来说说他们的重构思路
然后我们会用到的一些第三方插件，分别为：
axios
swiper
mint-ui
Volecity
qs库
一、首页
首页的整体结构是，顶部一个无缝轮播组件，中间是三个推荐的商店链接，然后再下面是一个“最热商品推荐”的商品列表，然后最底下是一个底部导航栏组件一共四部分，对于中间三个推荐商店链接我这边暂不做处理，原因是关于并没有重构商店页面的计划。
1、无缝轮播组件
那我们首先来说一下轮播组件，首先我们需要在src目录下的compnents文件夹里新建一个轮播组件文件，轮播的话我们会直接选择使用swiper插件提供的轮播组件库，我们只需把它封装到一个组件文件中即可，具体的操作在这里我就不详细说明了，这里只强调两个需要注意的问题：
1.应不应该在轮播组件放入图片数据呢？
回答：不应该，原因是为了使得轮播组件独立出来，在不同的组件中得以复用，并且使其可以适应不同规格不同数量的图片，因此我们的轮播组件只负责展示数据，不负责拿数据，数据应该通过props从父组件中获取。
<Swipe :lists="bannerLists" v-if="bannerLists"></Swipe>
new Swiper('.swiper-container',{ loop:true, pagination: '.swiper-pagination', autoplay: 2000 }) getBanner(){//获取轮播数据 this.$http.get(url.banner).then(res=>{ this.bannerLists = res.data.lists })
2.关于swiper的配置应将其写在轮播组件的生命周期的哪一部分呢？
回答：首先我们需要了解的是swiper是对DOM节点进行操作的，所以swiper的配置应该写在组件的mounted生命周期钩子里，因为在这个阶段已经在页面上生成了该组件对应的DOM节点；另一方面，swiper组件里的数据是swiper的父组件异步获取后传递给swiper的，因此应该等swiper拿到了传递的数据之后再对这个组件进行渲染，因此需要给这个组件添加一个v-if="bannerLists"的判断，判断swiper组件是否获取到数据，只有获取到了数据才生成这个DOM节点。
2、“最热商品推荐”的商品列表
关于这个“最热商品推荐”的商品列表的重构也非常简单，只需通过axios发送你想获取的商品列表的页数和每页的展示商品的个数的请求到对应的接口中，就可以获取到对应的商品列表的数据，然后再通过v-for把每个商品的图片、名称和价格渲染到页面中即可。
同样的，这里有两个值得注意的问题：
1.获取到的价格的格式并不统一，如何来使得这些价格的格式统一起来？