07_尚硅谷_Vue项目_组件化编码.avi原创

那我们继续啊。啊，ES的这一部分呢，前面咱是不是已经讲过了吧，我就不再一个一个去去说了啊，当然就是现在要这个咱做了吗。就这一个配置了一个，但是得去看一下，看看什么呢，就是那个这个东西有没有加上。哪个东西了，就这个。以前我们肯定是加一个，现在模板的时候没有去加这个东西，我们来确认一下，你们可能没加啊，但我就不好说了，就可能已经加过了，看一下啊。就这个。你们可能没加大家注意啊。得加上是吧，加上以后每次创建一个文件是不是自动就有了呀？啊大家注意这个事啊，别的都没什么。好，那下面呢，我们就要去开始去写了啊，写的是呢，这个配置我们在刚才已经做过了，这里我也把那个整个配置已经写给里大复制粘贴就行来看一下，现在我们要去看一下整个啊，整个应用的一个结构。

整个应用的结构看哪看一个看看它吧。因为我们实际上可以打开那个应用，我们是8080，打开应用看。那能好一点。我是不是关掉了呀。这是我的客户端8081。这是我们最终的项目嘛，我们要根据最终的项目来分析。来，我们来看一下整体应用的一个结构，怎么样去拆分，这整个我们是我们的什么。

AP吧，对吧，整个应用是P，那接着下面它下面是不是有一个固定的一个底部。看得到吧，啊接着上面上面的部分呢，这里面有这面说一下上面的部分有一个头部，还有一个这个这个不对。对吧，上面这部分有两种做法啊，就看这个头部是公用的呢，还是各个路由组件单独的。什么意思呢，就是我在点它的时候。嗯。这个大家看到这个实际上是内容有变化对不对，也就是说我把这个头部组件，这个头部肯定是个组件，是放在各个导航的路由组件里面呢，还是说放在它外部。说白了就是路由组件只有这一部分呢，还是包含那个头部。能不能听懂我说意思？这实际上有两种做法。一种是放在路由组件的外面，就跟那个它的定位，就跟我的这个底部的定位是一样的。

其实我们前面做那个项目的时候，是不是做过。头部一个底部一个，中间是我的路由组件嘛，对吧？哎，其实也可以怎么做呢，也可以这么做，这一个是固定的一个部分，上面这一个是路由组件部分。能不能上面整个是路由组件部分。你说老师这个头部啊，头部是那个路由主义内部的结构，你不用管它对不对。这个分。我们现在做法就是这么做的啊，头部是路由组件的一个组成的部分而已。但是我们各个路由组件是不是都有类似的头部？你一旦有多个组件，有类似的结构，你该怎么办？是不是可以将类似的结构抽成一个单独的组件？

能懂不要能懂啊，这个呢是我们后面要做的，现在你都可以不用去想它，不要想它来，那我们现在整体的结构是一个什么结构，大家看一下。那不就这样了吗？整体最外层是a pap，里面有一个局部的组件啊，我们可以给它取一个名字。名字。啊，我这个名字呢，叫我取的名字啊，叫get什么导航引导的意思。负责是总部吗？底部导航吗？能不能上面呢，是路由组件部分，而最终我有几个路由组件导航呢？是不是四个来看一下我们现在的一个拆分的情况啊，就一个整体的情况。来看。这不是components吗？大家看看这个是component，这个是pages啊，这个是a pap是在外层就外层了，而AP它的底部是谁？

Together，大家看together它怎么在component下面，它思路有主见吗？底部的一个导航是路由组件吗？不是对吧，它不是，它是用来去切换我们路由组件的，对不对。它不是，那我们路由组件呢，有都放在是不是page下面有这么几个啊，这是我们首页SET3点的意思啊，就主站点me m me的意思啊，就相当于后。懂吗？啊，现在接在是订单order轮廓，轮廓就是个人的意思，有时候也会用你，当然你也可以写personal。什么意思，个人？能懂吧，能懂，那我们可以把这整个结构给他什么，是不是创建出来，可以吧，可以来啊。

那先啊，APP已经有了吧，APP已经有了，接着是我的这个里面有一个组件，我们现在每一个组件都是一个文件夹。为什么搞成文件夹了？是因为我们的组件除了HTMGS和CS，还可能有图片或者其他资源，对不对？所以说啊，都创建成文件夹。啊，我们这个名字叫什么呢？大写的啊，都是大写的foot改了对吧，看下C。啊，那我们组件名字呢。有土建的，名字也叫开。能不看懂，那我这里面简单的搞一下，哎，这里面就写个。一个组件就创建这。能不能，那下面还有几个什么。

是不是路由组件，一共几个路由组件四个，看下C复制这个文件夹看见没？左边的第一个是我们的首页，我这里面取的名字叫set，也可以叫home，也没关系啊。来改一下这个文件名没问题是吧？改一下模板可以吧？好再来一套，下一个是什么设计？是不写了吧，啊是还有什么。订单，我还有个人中心啊，这个地方叫啊轮廓就是一个啊个人中心啊相当于personal。是不是一共四个，但是呢，这里面东西的一个改掉啊，我文件名改改。内容改改，这一次性改完啊，因为不改完的话都是容易忘，嗯，托尔费尔个人中心，嗯，先把文件名改改，接着把内容改改，下面这个设计把文件名改改，把内容改改可了吧，嗯，可以了，好啊。

来我们这里面呢，先写一个APP里面，我这先写写一个APP，先写APP，我们现在运行一下啊，再运行一下，这个还没写是吧，这个得先写。写import，大写view from，小写view对吧？Import什么APP from点斜杠APP接着new一个。是吧？写一个E，写一个井号APP来写一个人可以吗？人不更简单吗？RH箭头H括号大写ABB。

是这样的吧，嗯，就这样的，那现在呢，我们啊就运行一下，因为前面给它停掉了是吧NPM。拉。现在呢，安全来说应该会给我打开一个浏览器，因为我不改那个配置吧，是吧，他还在跑啊。是不是起来啦，起来啦。这样他现在的账号是改的是8808，现在是不是又显示了APP。我那个路由还没用吧，我虽然说创建了路由组件，但是还没用，对不对，等等我我把路由组件不创建出来，但还没定义啊啊而且我现在现在还各种各样的一些，这是什么东西。

知道不是不是Li的一些语法检查啊，好，那整个当然你也可以去看一下，用一下我们的view看一下结构，当前就只有什么APP组件标签是吧，这个能懂不能懂，好但是现在啊有一个事情啊，我们当前啊试用的，虽然说我切换到移动端模式，我试用了移端的解法嘛。移动端里面要有一个非常重要的一个叫什么report，是不是有一个report的引入啊，我们去做一下这个里面呢，我这里面啊，先有两个需要引入的，一个是先把这个下载引入一下吧，就是下载必须写的，而且是基本上不需要你自己写。按照我有一套通用的这个，你看你看这个你就能知道它是从网站上面扒下来了，对不对啊，别人写好的，你自己写肯定没别人好，你放心啊，有人说老师他要万一不能完全满足我的要求了，适当的什么改一改，填一填，对不对啊，来看这个位置啊，引入ET在这里面呢，需要去在这个sta里面建一个文件夹，叫什么CSS，在这个CSS里面去建一个文件叫reset，点什么CSS内容呢，不需要你写，看见C，其实我在这里面啊加了一个。

加了一个加了一个什么显示省略号的，因为好的地方显示省略号，我就把它加在这里面，那后面是不是用这个类名就能显示省略号啊，这我后来加的啊好，那现在有用了吗。没有得在什么页面里面，是不是引入一下来。

引入一下，那引入一下呢，Reset最好是写在第一位是吧，最前面啊写在这前面呢，之后呢，来先用点斜带的方式去一步一步找。啊，一般呢，这个点会最终给它去掉，大家能看到吧，是找我的这个reset啊，一上来就起作用。好，没有问题。啊完以后下面是移动端的，这个移动端呢，我这里面写了两个两个点，一个点是什么。加对应的什么report，本来它是不是有啊，给它替换掉。下面还有一个是什么，还记得吧？啊，OK 0.0.3 0.3不是二三是吧。是三毫秒的延迟吧，点击三毫米延迟这个地方用的是哪个库发。嗯，就在这下面把它搞起来啊。

代码的基本上不用大家写，因为文档里面都写好了，好那。整好他们以后呢，那我们现在啊，就相当于已经是一个这样的一种模式了，大家还是有变化的吧，有变化啊来。那到此为止呢，我们基本的使用就搞定了，下一步我们要干嘛去了？这个路由了吧。对吧，其实我们路由组件都定义好了，就是没用了是不是。