前端---【1】如何制作小米商城【全套】？

本内容用的是vue2以及elementui组件库来制作，内容很详细，只要按照我图片内容敲，手把手教会你噢！！

【不熟悉不知道elemntui的用法的话--建议先看看我主页的“学生管理系统”解析，里面会教你如何使用elementui！】需要全套代码的私我，免费送并且教你运行起来！前提点个关注噢！

第一步：基础配置

1.创建空文件

首先创建一个空文件

用vscode打开空文件---点击“终端”----再点击“新建终端”

2.创建脚手架

敲“vue create xiaomi-store”--回车

点击方向键“向下箭头”---选择第三个-----回车

按照如图选择---然后回车

选择第二个---回车

敲n--回车

选第一个---回车

选第二个---回车

敲n

这样就创建好了

3.配置生产环境和开发环境

【 想知道关于“生产环境和开发环境”具体代码详细解说->点击链接：vue2---.env.development和.env.production不会配置？这篇就够啦！-优快云博客】

（tips:咱们先不写后半部分的路径，到时候我们写完了再配置到环境中去）

总之先按照我给的图片敲就行！！长这样！

4.运行脚手架

打开终端

运行起脚手架

打开网页

网页

5.引入elementui【浏览器搜索elementui就可以进去网站】

安装elementui：复制图片中代码

点击拆分终端

复制进去---回车

来到elementui--复制

然后按图操作

6.安装cookie

按图敲--“npm i vue-cookies”---回车

再引入cookies

7.下载axios

第二步：小米商城布局

1.公共样式引入

小米的主要内容区的宽度都是基于1200px，那么我们可以把样式写在公共区域，【scss也就是css一种更优化写法】

来到main.js引入公共样式

 2.画头部和底部组件

1.首先观察ui图，小米的头部和底部在任何页面下都会用到【ui图链接需要的话--后台踢我噢】，那么我们可以把他封装成组件

先删不需要的页面

来到App.vue删除这三部分

创建两个页面

2.来到路由，注册首页----修改成如图所示！

来到头部底部组件

1.画头部

引入组件到App.vue

查看页面--发现头部出来啦！

写头部内容

效果

给span标签的文字添加上颜色+间距+字体大小

效果

接下来封装这个导航栏【最顶部+导航栏=头部】

先引入图片

效果

思考：这个如何实现

来到elementui------这个效果跟我们需要实现的效果大致一样

那么复制这一串

黏贴到这里

改写成这样

index里面先改为这样-----也就是对应页面路径

页面效果

接下来实现这个搜索框

它处于右边，故布局为

把左边和右边区域装进一个el-row中，再使用flex布局中的space-between，让他们贴边

效果

发现输入框和按钮没有横向排布---可以用flex布局--给他俩放入el-row----再用flex即可

效果

效果

但是el-input不好看，我改写为input标签

右边的标签样式内容如下

效果

由于导航栏和头部间距为20px

所以代码加个padding-top

效果

但是你发现搜索框并没有在y轴居中，直接用flex加align-items:center

效果：搜索框居中了

底部有个横线

所以

效果

这样头部就封装好啦！！！

2.创建三个初始页面--首页，全部商品，关于我们

接下来将home改为Index

【打错啦，是Index---开头字母大写】

改成这样

创建三个页面

来到路由--注册这三个页面

效果

3.画底部

创建底部组件

引入到App.vue

回到底部组件-----画出底部轮廓（如图）

效果图--底部出现了

接下来完善底部内容【具体步骤不说啦，你们看代码图敲就行，前提是会elementui组件库】

代码如下：

公共样式新增

底部代码

底部样式

效果图如下！

4.封装头部和底部组件

我们已经画好了：头部+底部---现在我们将头部和底部组件封装在一个组件中

第一种布局方式：引入头部组件和底部组件到App.vue,内容区用div包裹

第二种布局方式：再创建一个组件--引入头部和底部组件，内容区用插槽实现---那么App.vue只需要引入刚刚创建的组件即可【我是使用的是第二种】

创建Layout组件

在创建Layout组件中-----引入头部和底部组件

来到App.vue--按图写

效果图

3.画轮播图

elementui组件库有这个轮播图

复制这个代码----复制到index首页

效果图

轮播图高度是456px，el-carousel有这个hight方法，直接如图用

效果

给底部加个距离

效果：这样好看多啦

又因为轮播图上下都有间距

因此加个padding

轮播接口步骤:

先写总接口地址（request.js）

再写api分接口地址文件

配置好开发环境

也配置好生产环境

来到request.js，写好配置【baseURL装的是相对路径----他会自动拼接浏览器域名】

响应拦截改一下：把request改为response

导出：export default instance

来到这里--照着图片敲现有的

重新开起来：npm run serve

查看报错：首页不需要登录也能看见轮播图--但是它告诉我获取轮播图列表需要token？

原因是因为：地址有问题，有两个xiaomi/v2

1.地址有问题解决办法

怎么做？如图操作

再重启开起来

查询成功啦！！

渲染图片数据

但是发现图片信息没有显示！

因为后端返回的图片地址是不完整的

2.图片地址是不完整的解决办法

配置自动拼接完整地址！在vue.config中添加图片转发

结果：出来啦！

再优化一下，给img占满

4.画商品栏

观察：卡片很多页面都会用到----卡片封装成一个单独组件

观察间距：头部20，底部30

代码如下

这张图布局--左右用flex布局即可

再观察，我们封装好手机布局样式后，其他比如家电之类的布局，我们可以通过遍历数据来实现。

但是这里有个情况如图，思考如何一张图是这样布局，两张图是贴边布局。直接可以用->转轴在space-between即可

代码如下

、

效果

两张图片有距离，因此

效果

1.封装卡片

初步样式代码如下

代码有个小错误修改一下：现价的删除线搬到原价这面

然后将卡片组件引入到首页

效果

但是图片和文字都太紧凑了，原图是上下贴边的

所以在卡片这边用flex布局

2.接卡片接口--首页热门商品列表

引入到index中获取

 看看获取的数据：

数据在rows里面！

所以我们把商品列表那边改为rows

这个数据获取的内容刚好对得上这个图片布局

接下来先遍历三栏

效果

左边图片与右边图片距离是10px

接下来遍历卡片

效果：卡片数量渲染出来了！

接下来进行卡片渲染：

我们已经遍历每一栏了-----然后拿到每一栏的卡片进行遍历------将遍历的每张卡片传入卡片组件进行渲染

根据上面图片对应的名称进行渲染，如下图

效果

接下来画：浏览更多卡片

效果

优化：我们在首页用了flex布局，一般写其他页面的时候也会用到同样的flex布局，为了减少代码冗余，我们把他们写在公共样式中---需要某些flex的布局的时候调用即可！

把这两个复制---再删除这两个

复制到这里面

调用

页面效果

这样我们就完成首页的页面布局啦！--------【这是小米商城第一部分，另外一部分抓紧中！！！到时候再发布！】