作为一名米粉，前段子突然想到我们能不能用Vue实现小米官网。好，有了想法，说干就干！在花了一个星期左右的时间，终于完工了。刚开始设计整体的时候，用的时间比较少，但是后面不停地抠细节，耗费了将近3天的时间。

自己在查看了小米官网的布局以后，对于小米官网我们可以分为这几个部分进行设计。

中间的一整块商品区域，我们也单独的作为一部分。

最后的页面，分为三个部分

接下来，我们说明一下每个部分的实现。

我们在设计第一部分的时候，使用浮动的方式。左边左浮，右边右浮，因此在浮动的过程中，我们应当把购物侧的结构放在登录和注册栏的前面，这样才能达到我们想要的效果。

另外，就是一些简单的逻辑功能了，当我们把鼠标放到"下载app"，二维码显示，离开则消失。购物车也是如此做法。当然，我们还要加一个过渡效果，否则显示和隐藏会很快，体验很不好！

第二部分，我们又分为两个区域。第一个区域就是头部，第二个区域就是左侧商品栏。我们把左侧商品栏设计为一个单独的子组件，在头部使用li列表的时候，我们的第一个li放入的就是这个单独的子组件。

子组件中，鼠标放到相应的类型产品时，会显示对应的详细商品，显示出来的盒子采用绝对定位。由于需要的数据太多，获取太麻烦，我们只复制粘贴了几个商品的数据。

当我们把鼠标放到头部区域的时候，显示相应的产品，显示出来的盒子同样采用绝对定位。"服务"、"社区"这两个地方不显示产品。

点击搜索框，会出现相应的搜索词，点击别处，搜索词消失。但是呢？这里有个小bug，功能还未完善，后面我们会讲。

这一部分就是轮播图区域。

这里，我们把轮播图封装起来，需要的时候我们再把轮播图组件引入到Banner组件中。

这设计轮播图组件时，我们设计了三种轮播图组件。这三种轮播图组件只要传递相应的信息，即可使用，无须修改。

第一种轮播图

这个轮播图实现的功能是最完善的，具有左右按钮功能、下方小点功能（配备相应颜色变化）、定时器功能、定时器暂时和开启功能等等。

它的主要实现是依靠原生js的动画函数实现，我们把轮播图区域设计为一个ul，运动的实际就是平移ul，因此达到轮播功能。具体实现可以查看源码，这里不便陈述。

但是呢，这里还有一个小小的bug。原先我使用js写这个轮播图的时候是没有的，现在把这个轮播图通过vue实现就产生了，因为时间原因，懒得去修改了，后面有时间再去搞一下。这个bug后面会讲。

第二种轮播图

第二种轮播图目前仅仅只有左右播放功能，它的设计思想和逻辑都很简单，就是直接切换数据内的数据，和第一种轮播图的设计思想和结构完全不同。

第三种轮播图

第三种轮播图使用的技术最简单，仅仅是HTML+CSS。它没有左右按钮功能，只有小圆点跳转轮播功能，但相比第二种轮播图，它有一个动画过渡的过程，体验更好。

相比较与第一种轮播图，其设计思想也是依靠平移。但它的平移对象是某一张图，指定某一幅图平移，那么另外其他图也会跟着平移。

平移核心CSS代码

第四部分的设计和小米官网一样，通过浮动左右两个盒子实现

在设置工具栏的时候，我们采用的是fixed定位。

当下拉到一定距离，我们让“回到顶部”显示出来，否则隐藏起来。在这里，我们在钩子函数中需要对“scroll”进行监听。

第六部分是最主要和最大的一部分，其实主要也是分为两个部分，第一个部分是小米秒杀部分，其余的就是详细商品部分。这里需要的数据同样也是很多，都是CV大法那些事了，我就没有统统都获取过来了。

小米秒杀

小米秒杀区域，我们也是设计两个盒子，采用浮动设计，我们把左边的倒计时盒子设计为一个子组件。

秒杀区域的商品应该是有一个定时器的，实现定时轮播，但是由于时间有限，我们没有实现。但是呢，实现原理应该和我们的轮播图实现效果是一样的，这个不难。

在Goods部分，我们会用到很多Title和BannerBOx，因此我们又可以把这两个设计为单独的组件，需要的时候引入即可。另外，由于Title的右部分是不同的，我们使用组件插槽实现。

详细商品

在小米官网有很多这种结构，因此我们要在这里设计一种结构，它们都是由三个部分组成。

在中间盒子部分，我们又可以看到里面有很多种类型的盒子。因此，我们又可以创建相应的子组件实现我们的功能。

我们创建五个不同类型的子组件盒子实现我们的功能。

小米官网上很多都是这种结构，到后面我们直接引入组件即可使用。因此，我也做很多这个结构。下图是小米官网的截图：

……

视频部分，我们将每个视频设计成子组件盒子。

当点击视频时，会出现相应视频播放。这里我们在视频子组件中又定义一个子组件，通过点击这个子组件播放相应的视频。那么问题来了，我们得把数据从Video传到VideoBox，再冲VideoBox传到VideoPlay。设计这里的时候，真的有点被这个数据传递绕晕了。

还有最坑的一点是，也许是使用video.js版本问题引发的。我之前从来没有在vue中适用过video，因此我去百度，百度上很多人给的是这段代码

也许是video.js版本问题，autoplay: "muted",这一句语句是不能用的。我把这句语句删了才得以实现视频播放。

这里耗费了我将近一个半小时的时间，实现视频播放功能的时候，忍不住口吐芬芳，卧槽，去你大爷的！。真的是，这里太坑了！

这一部分，我们由分为上下两个部分。

下半部份的数据中，我们使用双重v-for循环实现遍历，即在数组里面我们又嵌套数组。

下半部分，我们用到了浮动的布局，因此在清除浮动的时候我们使用双伪元素清除浮动的办法。小米官网也是如此实现的。

最后一部分很常规。

但是呢，我发现小米官网的安全验证图片根据网络环境是实时变化的，这一点需要的技术高级了，我不配（捂脸），因此也就没有理会这部分。

最后呢？我们再说说我们做出来的网页存在的不足和bug。

第一

当我们鼠标移动到某些字体上时，字体图标和文字颜色使用伪类应当是一起变颜色。但是我们没有办法实现这个功能，这个功能应该和sass里面的选择器嵌套选择器相关的语法有关，但是我没有学习和了解过sass，因此没有实现。

第二

我第一次在vue里面使用动画和过渡，在过渡的过程中，里面的数据不会随过渡元素一样有个渐变的过程，而是立即消失和立即出现，这一点体验不是很好。下图是等过渡元素完全消失，数据才会消失，现在过渡元素还没有消失完全，因此数据还没有消失。

第三

轮播图功能中，我们把鼠标移动到相应的小点上时，其应该有一个伪类，颜色会变红。但是呢，我们使用vue以后，也许是轮播图设计的不合理，vue里面的方法和钩子函数会把伪类元素的影响覆盖掉。即轮播图一旦开始运转，伪类会失效，我们鼠标移动到相应的小点上，小点不变色。

第四

在搜索框内，当出现搜索词列表的时候，点击搜索词应该是可以跳转到相应链接的。但是由于我们对搜索框使用了blur事件，所以在鼠标再次点击以后，搜索词列表消失，没有实现链接跳转功能。

另外，小米官网上的搜索框的搜索词是会变换的，这个功能我们没有实现。

路漫漫兮其修远兮，努力去搬最好的砖！ 代码已上传至github：https://github.com/jack-lucy/xiaomi.git