013-尚硅谷-尚品汇-Home首页拆分静态组件

哈喽，各位小伙伴们大家好，那接下来啊，咱们呢，去完成home模块当中其余的静态组件。那咱们呢，看一下呢，咱们的这个项目啊，比如说目前而言，Home模块当中，咱们已经把三级联动这部分已经拆出来了。而且呢，是拆分为一个全局组件，那接下来咱们就得细心一些去完成其余六个组件的拆分了。那这块呢，一定要注意，在拆分组件的时候，一定要注意这几件事儿，第一个结构。第二个样式，第三个图片的资源。那这三部分一定要牢记，那所以说剩下咱们呢，就耐住性子给他拆分完。那咱们呢，先看一下已经拆分好的这个结构啊，老师呢，都给你做了注释。那底下这儿呢，有一个叫做列表，其实列表里面啊，你看这不就是轮播图吗。

这不就是s wiper的一个结构吗？以及还有商品会快报更多，那不就是这一部分吗？对吧，啊，那所以说咱们呢，把这一部分呢，也给它拆分为一个组件，那咱们给他带走。那首先说现在咱们的项目当中找到咱们的home模块，它呢还有一个子组件叫做list container con。那当然啊，这个组件呢，你那咱们呢，还是得新建一个啊组件。找一下子就在这儿来一个叫做index style view，那当然你是不是还是在啊这个，呃，View快速的生成咱们的模板。那接下来呢，就是耐住性子，一点点的去给他搞好，所以说第一步先把人家的这个已经写好的结构给他带走，CTRLC，这不叫list container。

那么扔到咱们的这个组件当中，这是第一步。但是呢，你要注意，一定要细心。对于当前的这个静态组件，它呢有属于自己的样式，那这是毋庸置疑的，而且还要注意它这里面呢是有图片的。啊，而且路径呢是什么，是点杠以之资下的什么什么图片，那你要注意咱们现在的这个目录下是没有以妹之资文件夹。对不，而且这个路径它也不对，咱们是在home文件夹下的，所以这块一定要注意，它是有图片资源的。那所以说呢，咱们一定要来再找到相应的样式，就是list container can see。咱们呢，也给它扔到咱们的这个组件当中，那这千万别忘记了，是不是要写咱们的long l，为什么呀，为less。

那当然样式呢，你也得得有对吧，那这个呢，咱们呢给它格式化一下。但是除此之外呢，还要注意一件事，他这里面呢，用到一些图片资源，咱们的这个你还真得看一下子。首先说轮播图，这用到了班一到四，以及咱们再往底下看看还有没有用别的图。对吧，以及还有个叫ADE偏。那所以说咱们的图片资源你也得带过来。老师呢，是直接放到了咱们的这个list container里面。那总共呢，应该是有五张图，大概是五张图，那咱们先看一下。他的应该是什么呢？是BANNER1234。这四个。以及加上ADE1。那找到咱们的这个组件当中，你给它扔起来。那当然这个路径它是不对的，你看这个路径是不对的，它不应该是点杠，应该是点杠以昧之之下的般的1234，没有这个后。

所以说啊，咱们替换一下子，你就是把这个杠哄。对吧，给它替换为一个空就行了，全都替换。对吧，哎，但是咱们眼睛贼一些，你看这这是不是也出现了一个叫icon.pg所以说还有一张图样式当中出现的，你看嘛，这不样式。那所以说啊，咱们呢，也找一下这个叫icons。对吧，找一下看有没有叫icon，这个真的耐住性子一点点找，叫icon.png。啊，咱们找一下I开头的。对吧，先看咱们这个home下吧，有没有叫icon.pg。对吧，这不在这儿呢，CTRLC，那把它呢也扔到咱们的项目当中，那也说一共六张图，但是你要注意啊，咱们的这个icon这个路径可不对，应该是点杠一妹之之下的icon.pg那这回是OK的。

对吧，那所以说这个静态组件它不就有了吗？那你有了之后，那你需要在哪儿啊，在咱们的这个home组件当中，你是需要引入的。所以说咱们引入一下，你要注意它可不是全局组件，所以说你需要引入注册使用。所以说咱们写一下子引入其余的组件。那咱们一定要来叫import。他们应该叫做list container con从哪引呢？应该是艾特杠。Pages下的这个，Home下的这个叫做list container contain单词千万别错了。那一集啊，他也得咋的也得注册注册什么注册组件。这块一定要积极，因为它不是一个全局组件，所以说咱们是需要注册的。

对不就跟咱当年呃是在哪的，不也注册过吗？对吧，Complement，为什么呢，为咱们的list container注册一下。对不？那当然你在这里呢，是需要使用的，那就是list啊，单词别错，Li就是它嘛。所以说这是咱们的一个list container组件，那不就给它完成了。那所以说咱们保存一下子，看一下咱们的项目，OK，看一下有没有，那如果说没有啊，你看他报的这个错，你学会看错，他的意思是你这个list container组件没有注册，那所以说应该是注册这里单词写错了，少了个S。那所以说回首咱们再看一下子，那咱们的这个list container组件不就有了吗。对吧，但是你会发现一件事，什么事呢，就是这个轮播图的图片呢，它有点多，它顶出来了，所以说轮播图的图片呢，现在应该是有1234，那咱剩下仨先给他干掉，让他的布局至少是正常一些。

所以说呢，咱们找到这个轮播图。哎，找到它这个结构，后面这三张图咱就不要了，先把它的静态先给他搞定。那所以说咱们list container静态组件，那这不就搞定了。那剩下的活其实都是一样的，耐住性子，一点点的把结构样式、图片资源引入注册使用，完事就OK了。那所以说呢，咱们呢，接着个。哎，接着搞，接下来就是谁呢，今日推荐，那咱们呢还是一样，它叫那咱们呢也先来一个文件夹。对不？先给他来一个文件夹，叫recommend，那就叫做re。那一集啊，它呢里面呢，也得有一个组件，那咱们找一下子应该叫做这个，那也是一样，Index there inex will。

那当然咱们呢，得快速生成咱们的组件。那老师呢，先把没用的先给它关掉，那第一步把人家的结构给他带走，这不今日推荐嘛，那所以说结构呢，扔到咱们自己这里。结构有了，那接下来咱们看它这里面有没有图片，要记住啊，一定要看有没有图片，有吧，就是today啊，01020304，以及加上有一个叫做clock。这五张图。除此之外呢，还有什么呢？还有样式，那咱们别忘记写了，为什么呀，为less，那找一下子人家已经写好这个样式找一下。那不就是它吗？CTRLC给带走，扔到咱们的这里。那么除此之外呢，你还要注意，人家是有图片资源。那所以说啊，在当前的这个组件当中，咱们也给它来一个叫做以昧之资文件夹，分别有哪几个图片呢？Today开头的。

1234加上clock。那所以说咱们呢，去找一下子。T开头的啊，这对吧，Clock是有的。以及找压，可这不是1234嘛，所以说这五张图啊，给它带走，扔到咱们的以昧之资文件夹下，但是你要注意路径当中不应该出现home，虽然还是同样的套路，咱们给home全都替换一下。那所以说这个组件其实也已经完事了，那也是一样，回到咱们的home当中，你去引入注册使用。那咱们引一下子，那就是inport，这个咱们就叫做re，应该是从谁那引呢？艾杠。配置之下的home下的这个叫做re com men，对不，单词千万别错了，错了就送你俩字凉凉，所以说呢，咱们呢也要注册。

那咱们呢，注册一下以及呢，也需要使用，那使用呢，咱们这儿呢，也搞一下子走。那所以说啊，回首咱们再看一下子，那咱们的这个组件不就应该有了吗？对吧，刷新看一下，那这不就是今日推荐吗？所以说一定要记住结构样式，图片资源就这三部。那接下来咱们再接着搞，一口气给他搞完，因为也没啥难度，商品排行排行榜叫rock，那咱也来。对不，那咱这呢，也给他来一个叫做2AK。那老师呢，先把没用的先给它关掉，那以及它里面呢，应该也有一个组件。叫做index.view，那也一样，模板快速生成，把人家的结构给你带。对吧，那咱们呢，给它格式化一下，先看一下有没有图片啊，先看有没有图片。

那首先说咱们先看已经完成的这个，它有没有图片，那一定有。对吧，应该是有四张，那咱们看一下子啊，叫做一点勾PG啊，都叫做一点勾PG。对不，哎，所以说大概先瞄眼以及浪为什么呀，为less。那以及咱们呢，也要把人家的相应的样式也给他带走，就是这个嘛，Rock，那所以说啊，咱们的样式也有了。那剩下的活呢，就是图片资源要给你带过来，但是你瞄一眼，看样式当中有没有关于图片。对吧，这不有吗？叫BJ啊BJ0.pg对吧，路径它也是不对的，对吧，你至少应该是点杠。对吧，啊好了，那接下来呢，就是把相应的图片资源给人带过来，叫以昧之资。那咱们找一下子分别有个叫BJ0和1.opg，那咱们的找一下这两张图片。

一点勾PG，还有个叫BG啊，0.pg，这两张图咱给他带的。对吧，给它扔起来。那接下来呢，就是改图片的路径，它还是一样没有home，那咱们呢，也是把home给它替换一下。OK吧，那么组件有了之后，那就回到咱们的home当中，也是一样引入注册使用。Inport这个呢，叫做rank for从哪引呢？At盖pages下的，Home下的这个rank。那当然你还需要注册，那这呢应该叫RAK，那以及在顶上呢，应该使用一下。对吧，所以说这一部分你就记住一句话。耐住性子啊，静下心来一点点搞就没问题了，因为人家已经把相应的样式啊，结构啊，图片啥都给你了，那你剩下的活儿无非就是一点点给他搞好。对吧，咱们刷新看一下。

对吧，所以说咱们的热卖排行那不也完事了。那接下来咱们再往底下搞，那接下来就是猜你喜欢，那猜你喜欢也是一样，咱来一个这个老师给他啊干掉一下，看这。那咱们再来一个这个文件夹，咱们叫like吧，喜欢吗？对吧，那也是一样，快速的给它来一个组件，找到home下的这个like，这也一样，Index there will。那这块呢，咱们模板快速给它生成一下，那接下来那还是一样先找结构。结构呢，应该是猜你喜欢CTRLC，给它带走，扔到咱们这里。但是呢，你大概呢，还是得瞄一眼，看有没有用到图。对吧，分别叫like啊，010203。对吧，大概这几个图，Like 010203，大概瞄一眼，以及把人家的钥匙也给他带走，这不这样吗？Like。CTRLC给它扔到咱们的项目当中，那这也要注意啊了。

为什么呢？为less。那以及看一下样式当中有没有关于图片的，那咱们呢，也稍微呢看一下。对吧，哎，你看这不也有吗？用到了icons.pg对吧，这个先给点干掉，那以及咱们再瞄眼没了，那你说总共几张图呢？Like相关的，以及还有这个icon图标。那咱们呢，去找一下子图片。那虽然说有like相关的，那就不就这几个图吗。对吧，123以及加上icons OK，那咱们呢，给它扔到咱们的项目当中也是一样，来一个叫做以昧之资文件夹图片给它扔进去。那也是一样的道理是没有home路径，所以说呢，咱们也把home呢给它替换一下。那组件有了之后，还是一样回到咱们的这个home组件当中引入呗，Import这个呢叫做like from应该呢是at啊，At盖pages下的，Home下的这个like。

那当然你还是需要进行注册，以及在顶部呢使用一下。在这搞一下like。那所以说猜你喜欢的静态组件，那不也就有了吗。对吧，猜你喜欢。那接下来咱们再往底下看，底下的家用电器啊和手机通讯，它两者的结构几乎是一模一样的，那所以说咱们这一部分呢，就来一个组件就行了，对吧，进行复用。那所以说咱们看一下结构，你看他这不有两个flower对吧？类名都一样，所以咱们只需要带走一个就行了，那咱们呢，现在咱们项目当中先给他搞一个对吧，搞个文件夹，咱们叫做什么呢？叫做flower。哎，单词别写错对吧，Floor写下floor。对吧，那老师呢，还是一样，把没用的先给它关掉，那以及这里呢，也需要相应的组件，那咱们找一下子应该是flower，那这里也是一样，Index there，谁啊，Will这里呢，模板快速生成。

那以及啊，咱们的这个结构给它先找到，就这找一个就行了，对吧，到时候复用一下不就俩了吗。所以这个结构呢，咱给他拿过来，咱们呢，也瞄眼他有有没有用到一些图片。看一下子。对吧，因为底下有个轮播图嘛，我记得这不有个轮播图嘛，对吧，应该是几张三张，因为它有三个点点嘛，这咱们看一下啊，分别叫做FLOWER1FLOWER1FLOWER1FLOWER1FLOWER相关的这个图片。对吧，这不都是flower相关的图片嘛，对吧，那以及把人家的样式也给人带走，就是flower。对吧，CTRLC咱呢给他带走，看下样式当中有没有出现啥出现关于图片。

对吧，那这块呢，千万别忘记加上谁，Long less快速的瞄眼应该是没有。对吧？浪为less，但是还是得瞄一眼有没有图片相关的路径。对吧，你还是得瞄眼。对吧，应该是没有的，那以及啊也是一样，给他来一个叫做以昧之资文件夹，那图片呢，应该都是相关谁呢，咱们再还是回手看一下，对吧，Flower相关的图片叫flower，那咱们找一下子看有没有叫这不就这。123456对吧，这些都给他带走，就是你只要叫flower我就给你带走，那扔到咱们的项目当中。那还是一样，路径当中不应该出现杠后，所以说啊，咱们呢，把杠后嘛，也是替换一下，替换为空，全都替换。那接下来那组件有了，还是一样回到咱们的home首页。我到这还是一样引入，那就是inmportt，叫做floor floor应该呢是at杠，Pages下的，Home下的这个floor那也是一样，你需要咋的，需要注册。

Floor floor以及呢，也需要在顶部呢进行使用。那这里呢，咱也给他来一个叫做flower。对吧，千万别忘记了，这个是个标签啊，所以说该写的标签你还是给人写上。对吧，咱们得稍微给它格式化一下。好了，那咱们呢，看一下子，看一下咱们这个是不是有了。对吧，只不过这个轮播图啊，它有三张图多出两张，因为咱们现在只考只考虑静态。对吧，那所以说找到flower，把其余的轮播图，找到轮播图，这不这吗？其余的这两张图咱给他干掉。对吧，那咱们这回再回首看一下，这不就OK了。对吧，只不过这个组件呢，需要复用两次，那咱们呢，再给他来一个CTRLCCTRLV。

对吧，把没用的先给它关了，那这样这个floor组件不也就完成了吗？只不过它俩长的是一模一样，将来服务器有数据的一替换不就OK了吗？对吧，那以及还有最后一个就是这个，呃，这个商标了，那咱们呢，还是一样。看一下它的类名叫啥啊，叫做brand商标，那咱们呢也是一样。在这儿。再来一个最后的一个文件夹，叫做商标B。对吧。还是得来看一下。对吧，叫D，那所以说咱们也来个brand。对吧，那以及呢，也得有相应的组件，那咱来一个。找下这叫做in代点will，那还是耐住性子，第一个结构带走。CTRLC扔到咱们的这个组件当中。对吧，那当然这块你得干掉啊，这块你得干掉那一集看下有没有图片，那图片呢是有的，就是相关叫做brand商标。

那以及样式为什么呀，为less，那把人家的这个样式啊，咱也给它带走，就这CTRLC。扔到咱们的这个样式当中。以及看一下样式当中有没有关于图片的路径，哎，应该是没有，大概瞄了一眼。那以及啊，图片你得有，那咱们在这呢，新建一个叫做以昧之资，那图片呢，应该都是关于商标的。那所以说啊，咱们回到这儿也找一下商标，对吧，就把带B开头的brand开头的对吧，你给他带走。如果缺少呢，你回手呢，再找一下CTRLC，那扔到咱们的项目当中。对吧，当然路径当中也不应该有后，咱们全都给他替换一下。那这样这个组件也有，那也是一样，回到咱们的home当中去引入注册使用。

Import这个呢叫做brand，应该呢是at-pages下的。Home下的brand对吧，那以及你也需要注册。所以说呢，咱们呢，在compment这里进行注册，以及呢，你也要使用一次，所以说在这儿呢，咱们也搞一下这个brand商标，那到此为止，咱们的home首页的所有的静态组件咱们就完成了。对不，所以说相应的静态组件就完成了，但是现在什么都玩不了，全都是假的。对吧，所以说呢，老师呢，在这儿呢，也最终呢，去做一下笔记，也就说home组件这个拆分静态组件，它没什么这个这个难度，但是你要注意就是当拿到老师资料的时候，你自己在拆分组件的时候一定要注意，一定要细心。对吧，这个结构。

哎，结构样式，还有这个图片资源缺一不可，当然将来你在实际的工作当中也是一样，这些布局啊，图片都是需要你进行处理，当然咱们现在只是已经处理好了。对吧，那所以说咱们完成了home首页静态组件的拆分的业务。