利用vue重构有赞商城的思路以及总结整理-创新互联

这个是我的第一个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从父组件中获取。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。