这是我的第一个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/

首先这次重构Zan Mall采用了多页应用重构的思路，所以在重构之前，要对项目文件做一些配置和调整。具体操作可以点击以下链接查看：基于vue-cli构建多页应用。

多页应用的基础设施搭建完成后，项目根目录下会有一个src文件夹，src文件中有三个文件夹：组件、模块和页面。components文件夹用于放置一些常见的vue组件，而modules文件夹用于放置一些常见的css和js模块。至于最后一页文件夹，用来放置赞商城不同页面的文件。每一页都将在Pages中显示为一个单独的文件夹，该页独有的所有文件都将放置在该文件夹中。

首先这里要说明的是，重建过程中得到的所有数据都是在easymock上写入相应接口(原始数据在rap2上，但接口数据不稳定，无法在github上构建)然后通过axios发送异步请求得到的模拟数据，模拟真实开发环境下的操作。具体实现过程请参考easymock和我在github上的源代码文件。

以下是重建赞商城所需的页面列表。共有六页，分别是：

1.主页2。目录分类第3页。产品搜索列表第4页。产品详情第5页。购物车第6页。个人中心地址管理页面接下来，我们将一页一页地谈论他们的重建想法

然后我们将使用一些第三方插件，它们是：

Axios swiper mint-ui Volecity qs库I .主页

主页整体结构是顶部无缝轮播组件，中间三个推荐店铺链接，下面是“最热推荐产品”列表，底部是底部有四个部分的底部导航栏组件。我不会处理中间的三个推荐商店链接，因为没有计划重组商店页面。

1.无缝转盘组件

让我们先来谈谈转盘组件。首先，我们需要在src目录下的compnents文件夹中创建一个carousel组件文件。如果是carousel，我们会直接选择使用swiper插件提供的carousel组件库。我们只需要把它打包成一个组件文件。具体操作我这里就不细说了，只强调两个需要注意的问题：

1.您应该将图片数据放入转盘组件吗？

答：不是，原因是为了让轮播组件独立，在不同组件中复用，适应不同规格不同数量的图片，我们的轮播组件只负责显示数据，不负责取数据，数据要通过道具从父组件获取。

轻扫： list=' banner lists ' name=' swpie . vue ' v-if=' banner lists '/Swipenew Swiper('。swiper-container '，{ loop:true，Pagination : '。swing-paging '，autoplay : 2000 })get banner(){//get carousel data this。$ http.get (url.banner)。然后(RES={ this . banner list=RES . data . list })2。

答：首先我们需要了解swiper是在DOM节点上操作的，所以swiper的配置应该写在组件的挂载生命周期钩子中，因为这个阶段页面上已经生成了组件对应的DOM节点；另一方面，swiper组件中的数据由swiper的父组件异步获取，然后传输到swiper，因此该组件应该在swiper获取传输的数据后呈现。所以需要在这个组件中加入一个v-if='bannerLists '的判断来判断swiper组件是否获取了数据，只有获取了数据才能生成这个DOM节点。

2.“最热门产品”推荐产品列表

关于这个“大部分