00:00
哈喽,各位小伙伴们大家好。那接下来啊,咱们呢,去完成非路由组件hier与fer创建的业务。那这里面呢,咱们呢,先去访问一下咱们的项目8080。那目前啊,咱们的项目呢,是空空如也的。咱们呢,先把顶上的这个hier组件。以及底部的组件,先给它创建好。而且呢,它两者呢,是两个非路由组件。那这里呢,要注意一件事,老师呢,已经把相关的课件啊,已经准备好了。当然接下来这些课件呢,也会给你们。那咱们呢,看一下这个课件里面有什么。首先说呢,有相关的代码,那在代码里面有什么,有相应的静态页面,以及相应的静态组件。
01:00
那这里呢,要注意一件事。咱们进入到项目阶段,就不再以HTML和CSS为主了。也就是说咱们的样式就不在一行一行代码去敲了。主要是完成项目当中的业务以及逻辑。那咱们呢,去咱们的静态页面里面去看一下的。这里面呢,有四个咱们硅谷老师已经给咱们准备好的这个静态页面。那咱们采用的是谁呢?是辉宏老师的这个平台页面。那这里呢,有相应的home与色的静态页面,咱们先看一下home,因为咱们要完成顶部与底部的这个组件的创建。对吧,那这里呢,要注意目前而言呢,它呢就是一个静态页面。那咱们呢,可以给它打开,哎,扔到咱们的VSQ当中,咱们呢去稍微去看一下子。
02:02
就是咱们辉弘老师的这个。那这里呢,老师呢,先把没用的先给它关掉,咱们看一下就是这个后点HTML。那虽然说啊,咱们刚刚这个结构已经看见了,而且呢,老师们呢,对于这里的结构呢,都进行了相应的注释。比如说头部叫做hier啊,就是哪儿呢?就是这儿。对吧,就比如说有登录啊,免费注册啊,那咱们呢,可以给它展开稍微看一下,这不登录免费注册。所以这是咱们的组件,以及还有底部的这个组件叫做。那就是哪儿呢?带有二维码的这里。那这里呢,回到咱们的项目当中,老师呢,也说一下子就是在。咱们的项目当中,那就不再以HT啊,以啊以HTML加CSS为主了啊,CSS为主了。
03:05
咱们呢,主要呢是搞什么,搞业务,还有谁呀,逻辑这件事要注意。那这是这个文件夹,那这块呢,咱们呢还是得看看。那除了这个静态页面之外,还有一个是什么呢?是相应的静态组件,静态组件呢,有一些老师们都拆分好了,可以直接拿过来用。那一集啊,这里面呢,还有一个课件,这个呢,是咱们硅谷老师已经给大家准备好的整个项目的完整的笔记。啊,当然咱们目前不需要这个笔记。以及呢,资料文件夹,资料文件夹呢,里面呢,有相应咱们发请求的API。那咱们的前台项目啊,先用这种word的文档,当然将来咱们的后台管理系统呢,用的是swa在线文档。那所以说咱们目前而言是需要使用到这里的这个静态页面。
04:02
那所以说这块呢,咱们也写一下子。这块要注意。在开发项目的时候,它的逻辑是什么?一般第一步干啥?先书写咱的静态页面。就是搞搞你的HTML啊,加上你的CSS对吧,那第二步静态页面有了,你就要拆分啥组件了。那组建拆分完干什么?是不是要通过as获取服务器的数据动态展示?哎,动态展示,那最后一件事干什么,是不是完成相应的动态的啊,动态的业务逻辑。哎,业务逻辑。那当然咱们目前而言,静态医院已经有了,咱就不再一个一个去写了。对不,那所以说在咱们的complements文件夹当中,老师呢,已经把hello.view啊hello word.view文件已经删了,这也没有。
05:02
那咱们呢,新建两个文件夹,一个叫什么呢?Hier液压hier组件。另外一个呢,叫什么叫做F组件fo f组件。这里面呢,需要注意一件事,哎,注意一。什么呢?就是咱们在创建咱们的组件的时候,因为咱们的静态页面已经有了。那你要注意你要拿哪些东西呢?首先说组件的结构啊,你要找准的第二个呢,就是组件的样式。样式要找准了,以及最后一个就是你这个组件当中所需要的图片资源,那这些都要准备好啊,都要找找准了。那咱们呢,先看一下咱们的hier组件,这是咱们的hier就这头部。对吧,那这块呢,要注意这个组件有没有用到图片呢,用到了就是这个logo。
06:00
那咱们呢,先一点点来,那记住先捞什么,先把咱们的结构给它带走。CTRLC,那扔到咱们的项目当中,那当然咱还没有组建,咱新建一个hier。应该是APP下的这个complements下的这个ER,那这里咱来一个叫做index.view。那这个呢,就是咱们的这个hier组件了,那咱来咱的模板。当然,结构给他扔进来。那这里呢,老师呢,给他格式化一下,稍微好看一下。那这块呢,要注意这个呢,它只是结构,比如说hier组件的结构,但是你要注意这里面加了很多的类名。对不,它是有像样式的,所以说样式也别忘记拷贝。那以及这里面还用到了图片资源什么点杠,以妹纸之下的logo.png咱们目前而言是没有这个文件夹的。对吧,所以这块要注意,就说结构你要拷贝还有谁呢,还有样式。
07:03
那咱们找一下辉宏老师,这里他们有一个文件夹叫做CSS。咱给它打开,这里面呢,有相应的less样式和什么呢?和CSS样式,当然咱们的项目采用的是less样式。那所以说你也要把相应的样式给人带走,这不就是hi。那所以说啊,回到咱们的项目当中,看这这不还点吗,把样式要给他扔进来。但是你会发现一件事儿啊,什么事呢?就是咱们这个less lesss的钥匙往这里一扔,诶你会发现它咋的,它有这个语法错误的提示啊,看见了是不是有这个红色的东西,其实程序员看见红色是最害怕的一件事,红了吧唧的对吧,要么报错,要么就是报错对吧,那这里呢,要注意一件事写一下,注意二。主要。注意二就是咱们的项目,咱们的项目采用的是less的钥匙。
08:05
但是你需要注意。浏览器是不识别Les钥匙的。对不,那你需要通过lies以及lesss-loader。进行处理。赖钥匙。把它把less样式。I变为CSS样式,那你这样浏览器才能咋的浏览器才可以识别。对不,那所以说咱们的项目当中,目前是没有less与less load去处理less样式的,那所以说咱们去安装一下依赖。咱。那这里呢,老师所采用的呢,是淘宝的镜像。In杠杠杠save less以及lesss-load。这里呢,要注意一件事,Let loader最新的版本应该是九或者是十,但是版本过高他会报错。
09:08
那叫get option函数is。所以说这里面呢,咱们尽可能别安装最新版本,因为咱们应该知道,如果你没有加版本号,安装的永远是最新版本。所以说咱们采用的呢,是五版本的less loader,就是加一个艾特五给他安装一下。所以这块呢,要注意less loader安装的是五版本的安装五。版本的,哎,五。版本的这块要注意一下。那安装完事之后啊,咱们呢,给它运行一下run so还是运行不起来的啊,那是为什么呢?咱们看,因为如果你想让你的组件当中能使用less的样式,这块要注意啊,虽然运行起来了,但也要注意。这块呢,要注意一件事,就是如果想让你的组件能识别lesss钥是你看明显咱这个组件还是不识别,所这块也写成注意三,注意三。
10:08
注意三。比如说,如果想让组件识别Les样式。那么需要在style标签。的身上加上浪的属性值为什么为less?所以说呢,咱们呢,还需要在这儿加上一个属性叫做long语言language吗?为什么呢,为less语言,那这样咱们的组件就能识别lesss样式,你看它也没有这个红色的警告。对不?那当然咱们目前这个hier组件你根本没用,而且你要注意一件事,咱们这个hier组件目前还缺少图片,比如这是不是有用到了logo图片。那所以说咱们在这儿呢,再给他新建个文件夹,叫做以昧之资。对吧,你看人家这写不,这不是点杠1IMAGE之资下的logo.pg所以说呢,咱们呢,去找一下子相应的图片,它叫做logo.pg这不这儿吗?这不商品会吗。
11:13
那所以说CTRLC咱们呢,给它带走,扔到咱们的项目当中。那所以说咱们的hier组件就准备好了,那你准备好hier组件要干什么,你是不是需要在跟组件下使用hier组件。对不对,那所以说使用一个组件,咱们也写下它的步骤。这块呢,老师呢,也写一下子,这是呃4.1对吧,使用组件的步骤。的步骤,当然咱们目前啊是非路由组件。那使用步骤是什么,你像第一步干什么,你第一步得创建或者是定义啊,啊或者是定义组件,那你第二步干什么,你需要在别的组件当中是不是要引入。
12:05
第三步,干什么要注册?在complements下是不是要注册?最后一件事干啥?是不是使用,用标签的形式是不是使用。那所以说回到咱们的组件,回到咱们的app.view当中,那你已经有了,你是不是需要引入。对不,那就是import。For,谁呢?应该是点杠con coms文件夹下的这个ER。那当然你引入之后,你还要咋还要注册。这块一定要注意一件事,千万千万别忘记注册了,你不注册它不能用的,所以咱们注册一下子还,那当然这里面书写的形式呢,是KV一致省略,V是ES6对象新增的语法。那在这里咱们是不是就可以使用hier组件了?对不,那所以说咱们用一下子,那就是he a DR,那咱们保存一下,刷新一下,你看咱们的hi的组件是不是就有了。
13:09
但是有的同学可能会想,诶老师这样式他不对呀,你看他明显有个地儿他不对,你看这。左面跟顶部默认的样式根本没清。对不对,那所以说啊,找到咱们的辉宏老师这里。它的CSS文件当中啊,有个叫做rise.css就是清除默认样式样式。对不,那所以说CTRLC咱们给它带走,那找到咱们的静态页面这里,把咱们CSS给他扔进来。对不,那咱们去引入,引入咱们的这个样式,就是引入咱们的这个清除默认的样式。那其实顶上这已经有了,那这个咱给他拿回来吧,Link咱引一下子。他引的不是这个图标了,对吧,引的是谁?是这个叫rest.css2e啊et.CSS当然前面的这个路径web派已经给咱们配置好了,这是没问题的,所以咱们刷新一下,看一下子,咱们都保存一下。
14:16
咱们都保存一下,看这保存一下对吧,那这里呢,咱们呢,都给它关掉一下。保存一下。这儿呢,老师呢,也给它保存一下,回首咱们运行一下咱们的程序,看一下咱们的默认样式有没有,那咱们重新运行一下。所以说,千万别忘记了,咱们的默认钥匙得引,你不引他默认钥匙没清。对不,那当然咱们现在这个样式回首再看一下子是不是,呃,单词写错了对不?那这里面咱们搞一下子啊,这块咱搞一下子对吧,自己引一下吧,就叫link。对吧,应该是什么呢?应该是咱们的这个点杠rest.css。对不,那咱们再刷新一下,看一下子,那咱们的默认样式是不是就有了。
15:03
所以说这里呢,一定要注意一件事,把默认样式要给它清了啊,可能咱们刚刚复制粘贴的时候,是不是给他搞错了。对不,所以这块呢,一定要注意默认样式务必要轻。对不?所以说咱们回首再看一下,这是没问题的。那以及还有底部的这个组件,福特那也是同样的套路。那也就说找到咱们的foot,这老师先把没用的给它关掉,找到foot。那也是一样,你给的新建一个呃,组件,也叫做index.view。那还是一样,得要结构,得要样式,得要图片资源。那所以说咱们找一下子结构,那还是辉宏老师这个静态页面当中,底部这儿是不是有一个叫福特,那咱呢给他带走。这咱给他带走,就在这儿给他替换一下。
16:01
那咱们呢,也是稍微格式化一下,但是你要注意一件事,底部这里有没有用到图片呢,是用到了,因为底下这你你别忘了,是不是有一个叫二维码来的,我记得。对吧,咱们看下它的结构,是不是也有一张图片叫做微信杠CZ,就是那个二维码。所以这里面呢,咱们也需要图片资源,咱也引一下子叫做以昧之资。那当然这个图片名字叫微信杠CZ,那咱们呢,也找一下这个图片资源,叫做微信杠CZ,这不在这呢。就这个二维码,咱硅谷的二维码,那所以说咱们呢,给他带走CTRLC扔到咱们的项目当中。那还是一样回首,你需要在入口文件啊,不是入口文件就在跟组件当中,还是要引入咱们的组件,引入注册使用。所以说咱们也引一下子import。这个呢叫做foot,应该是点杠。
17:04
Comp下的这个。那以及也别忘记了,要咋的要注册,那咱在这儿呢,也注册一下,最后一步使用,那你使用在这儿呢,你是不是就得来一个foot特了,Foo提呀特。那这个咱们刷新看一下,咱们的这个程序是不是就有了,但是还是一样,别忘记样式是不是也要带过来,结构样式和图片资源,所以咱们的样式呢,也得找一下。找一下咱们的CSS,找一下咱们这个后,它的相关的钥匙应该是底部的这个foot就这。那咱们呢,给他带走啊,给他带走,带到福特这,咱们可以看一下子,你看它最外面这个不就叫福特。对吧,所以这也是一样加一个了,为什么呢?为less的样式,以及把人家的样式给他扔到这。
18:00
那咱们呢,最后呢,再给它格式化一下,稍微好看一下,那所以说咱们的hier与F组件这样的一个静态组件不就拆分完毕了。那最后呢,老师呢,也再说一嘴,咱们的项目阶段不以布局啊为主了,是以业务和逻辑为主,当然将来这些资料也会发给你们的。
我来说两句