00:00
就咱这个课呢,基本上是我写一写一些,大家就做一些啊,至少要跟的差不多啊,到时候晚上大家自己再写一写,基本上就能跟上了,好行,下面我准备做一件事,另外一件事情什么是了,我准备在我的项目里面引入on d,因为我们的整体界面是用什么写的,很简单,是用什么on例来做的,把这个把这些都都关了啊,怎么用啊,就我们整体界面的构建是用案例自己写的,样式很少听懂了吧,所以我们要去将二地引入到我们的项目里面来,那我现在我我假设没有这个文档,那我就不知道怎么做,那怎么办呀。我应该去找到按地是什么官方文档,是不是应该有教程了,来找一下啊,我大家找到位置啊,主要是找到位置怎么找,首先我们要找到under地板,嗯。来。在这里面干嘛,@利啊,现在阿利还有专门的版本都。
01:03
啊,当然基本上用的是版本,不是这个吗。能看到吧,来打开它。它除了有under d还有一个under,这个under了么?一般一般叫pro的是不是比那原本的要强大一些?你那手机,你那手机经常是不是叫pro啊,Pro是不是高级版。能懂吧,这实际上他做了个什么呢?他写好了一个。管理项目呢?整体的一个框架,你甚至说这个应用就跟你已经写好了。嗯。你如果公司里面真正做,很有可能在这个基础上进行改造。能听到不啊,就在这个基础上进行改造,而不像我们,我们现在是完全自己搭的啊,那说实话就稍微比他丑一些。啊,功能没有它这么强大,听懂了吧?啊,当然我们现在学习过程中,我们不太适合直接用这个啊,如果你这个能掌握,基于他去改造去写,也应该是可以完成的,就怕你这个搞不定。
02:12
你只要这个能搞定,你那个一样能搞,能听到,不因别人都已经写的差不多了,你只要去改了。能理解吧,好,来。那下面呢,我们有一个开始使用啊,点过去当然也可以点组件啊,好,这里面看谁去。这个吧,我们现在是不是在这个react的脚手架应用里面去使用它呀,这里面是不是有些说明。是吧,其实完全可以按照这个从上往下是不是一步一步走。那前面大家是不是做过一下的。做过吧,做过那做过的话,那为了简化一下,那我就直接啊按照我写好的这个流程来去整一下,那首先我们是不是要下载一些包啊啊这里面参考文档地址也在这啊来这个包首先我们肯定要下载谁out d。
03:06
证明是吧,啊下载安利好。来再启动一个窗口啊,去下载安利。好,那等他下载啊,等他下载好,那下载好以后是不是它有些组件可用。但我们后面要实现一个非常重要的一个特性。还记得吗?叫按需,什么打包,什么叫按需打包?我的一个组件库,UI组件库,它是不是定义了很多很多的主页,比如说他定义了40个主页,但我只想用什么其中的十个,甚至比如说甚至极端起来,我就用两个或者用一个。那你想,我们是不是应该只打包什么?我们使用的那几个组件吗?别的组件应该打包吗?不应该,但默认他会把所有的打包,听懂不?这个有问题吧,有问题那我们要想实现按需打包啊,它的文档里面其实也说啊,按需打包这里面要用到一些工具。
04:10
啊,要用的一些工具啊,把这些工具包啊,也要去下载一下啊,这里面实际上有三个工具包啊。这不用背啊,记住你要备注他们嘛。不用啊,你就根据结果,根据它的文档是不是一步一步操作就行,嗯,好来,我们现在呢,需要去下载它啊。咱下载咱1.1人一个下载吧,也是一个麻烦事,咱这次走完以后,下午的时候,我们就把那个最终最终版本的所有包都搞进来。咱别浪费时间了,可以吧,啊,因为这这完全是在等那个时间,等他下载完嘛,就没没那个必要了,就。啊,不过这一次我们还下载一下啊,等一下。
05:02
好来我们说一下怎么大概怎么用啊,我们先用上,先用一下,先稍微用一下。啊,当然没用是吧,假设我们在APP里面想用一下安利。怎么用,那用的话,首先是不是得引入它的主件法,它最最简单的用,比如说最最直接的可能比如说一个八人。那八怎么用,我怎么知道呢?对,UI组件库非常简单,就跟你学X标签差不多。能到不啊,就是写标签传属性是不是啊,来是不是要写一个八层对不对,那这里面是不是有示例啊,你也不用太自己写,说实话。其实你为了学习,你开始的时候是没有必要拼命一点一点自己写的,完全可以干嘛。复制粘贴不丢人,丢人是什么?你复制粘贴最后不行?能你懂吗?啊,你复制最后行了,那已经达到目标了啊,当然中间有一个环节要看懂。
06:03
听懂吧,啊,这是不是引入了一个发展啊,这里面为什么引入,为什么写个大号。为什么要结构?主要太多,你想啊,我们2D是不是定义了很多很多的组件,是不是相当于用一个对象把很多组件包起来,那我们现在是不是引入其中对象的某一个。能听到不能啊,这个要理解啊,就是你靠记住,完全靠记住和理解他是两码事啊,好来下面怎么用呢?我来找一个,比如说我,诶这个颜色还是看起来比较舒服是不是啊,这个实际上就是第一个也就它呗。把它什么拿过来,是不是替换掉这个什么div。可以吧,这个写法其实跟咱H法八是不是有点类似,只是多了一个什么太就这个能写小写嘛,不能,为什么,这个怎么理解react它的所有组件的组件名首字母必须什么大写。
07:06
哎,这就是一个依据。啊,这个T等于它对吧,当然这个值一定是它吗。不一定,那我怎么知道用哪些词可以用呢?看文档,这只是看了个例子,下面是不是应该有文档说明呢?啊,就他提供了一些语法是不是啊这个地方,比如说我们这个刚才用的那个type值啊,它好吧,它是不是可选的,是不是这么一些。能听到不,那每个是什么意思,每个什么效果,它这里是不是有演示啊,比如说我要写这个红色的是不是应该用钝角啊,说白了是不是应该这个样子。你说这个这个有什么难度。大家一定要有信心,你心里要产生这种信心,你面试的时候,你跟别人交流的时候,才能很自信的表达。好,来,我们来看一下我们当前的。
08:02
现在啊,是有问题的。哎,现在说是什么,说安地没有找到,应该是还没有什么没有下载完,哎,现在应该下载完了,他估计还不知道啊,大家看到我的我的这个波浪线,说明他这个包还没什么,是不是还没识别呀。我还没下载完吗?刚才不下了吗。嗯。我下第一个下载就是这个包吧,嗯,看一下一般情况下是一般情况下是不需要重新启动的,我们是下一个MB嘛,对吧?啊来看一下。呃,来切换一下啊,把它打开啊,平常的时候我们就可以这么打开一下它这个识别。
09:01
嗯,我现在怎么看呢?看首先看下看有没有添加依赖声明,有没有是不是3.18.1啊啊可以。他怎么不自动加,他没有没有自动去自动去加,我改一下代码看看。能不能能不能识别,识别到应该是下载来看一下,怎么再可以看一下这个里面有没有安D吧,能听到不啊来说一下安D。哎。是不是出问题了,这就是下载,下载的过程中没有问题。我用哪个下他都他都可以可以下载,你看现在身上没有看到吧,特地有吗?没有是不。能看到吧,嗯,这就是有的时候就是还是因为我觉得这个东西吧,还是因为网速的问题,有时候会会出现下载的异常的问题啊,你用NPM和其实都可以啊,并不是我刚才用压的原因,而是说它有时候网速的问题会导致于。
10:03
这个下载失败的一个情况,但好像看似刚才好像看似又成功了,是不是啊。啊。再一个啊,这么整它是有一个问题啊,就是我们现在有营养是吗。没有啊,主要现在还没成功啊,没成功所以很难看到这个效果,就有时候说起来就挺费劲,所以说把这个包最好是提前就全部整好。这样可能效果还好一点。啊,刚才我们是不是已经下载这个了是吧。也不知道这个下载成功没有啊,这很值得怀疑。就是比如说我们的这个react-APP杠,看看react。港APP。诶,这个好像什么。是不是下载成功了,这就下载成功了,我们那个D没有成功。
11:06
好。那就等他这样,咱就再说一下啊,咱再说一下好,我如果这个按钮想加一个点击接听应该怎么做。后边执行。呃,后面是不是来一个什么on click等于一个什么。是不是回调函数,而回调函数一般是不是放到组件对象上this点,比如说我叫它hand的。Click。这可以吧,啊,那汉的肯定的话,那我是不是应该在我的这个组件内的,这里面是不是定一个函数,定一个方法,那我这么定义,大家看行不行,这样好吧。这样不好,我们自定义的那个组件的方法最好用什么来定义是不是函数的写法来写,这样能保证什么this没有问题是不是?
12:00
这能听懂吧,啊,你就掌握这个规律,基本上就没问题了来。我们不用的,他自己有相应的提示的那个语法,我们来看一下找一个啊找一个,反正他在下载,我们也稍微的写一写。来找一个什么呢?大家看好了,这里面呢,它有一个有一个组件叫message,叫全局提示,我们来看一下是一个什么样的效果。看到这上面这个了吗。能看到吧,比如说我再点一下能看到吧,可以吧,诶我可以产生一个这样提示,没你吧,没问题,那再一个怎么做呢,是不是我想要这样一个效果可以吧。那我去干嘛?是不是打开它这边说明引入了一个什么,哎,记住是一个message,而且这是个小写的,挺有意思,说明它肯定不会写的标签,我敢肯定为什么。
13:07
你说它不是组件,也不完全对,它也是个组件,但这个组件吧,不是标签组件,它不会写成标签。他们看它是个什么,来看用法就知道了,message.success。这是一个什么组件呢?是不是对一下组件呢?是现在是,其实我能确定它不是函数。能不能,我能100%的保证它不是函数吗?不能,我只能说它是它是对象,至于它是不是函数,这个我也不太清楚。从这代码来看吧,听懂不?啊,一定要能看懂代码啊好,那也就是说不就是这个语法吗?你可以把它拿过来。可以吧,那我们这里面来写一下,稍微写一下,嗯,这个就是嗯,欢呼一下成功了,OK吧,OK,那最终我点这个按钮,他是不是应该要成功了,要提示这样一个成功了对不对?好。
14:12
来。这是应该是成功了吧。看着好像是应该下载了是吧。嗯,来再再来什么。是不是搜一下叫什么D,哎,这个有了,这是应该是有了,就出现这个东西相关的东西了,是吧,好来。看一下我们的这个引入。是不是有了没问题吧,没问题好来,那按说来说界面就应该我们要什么。能看见了,但是。啊,这个地方说我们看到的是一个这样的按钮,缺什么缺样式,我们把这个写一个叫测试安排力。
15:01
就没样式是不是,那这个地方没样式,我们是不是引入样式啊,那引入样式的话,大家想啊,引入样式我最简单办法是将所有的样式都给了什么引入进来,那所有样型引入可以在这里引入。但这种做法是不太对的啊,是不太好的,我先以啊,先找到安利。它的下面有一个什么呢?D是他。啊,需要去点开它,你可以进行一个同步,就能知道它是,诶同步这个啊同步ND。能看到吧,嗯,最终是要找他的什么呢?CSS。能听懂不,那就来一个Dis,下面有什么呢?啊,来先写一个。找到它压缩的或者未下的是不是都可以,这能听懂吧,好,那这个时候我们再来看。
16:11
就卡住了,怎么。因为它可能是因为它比较大啊,现在我们要加载的文件其实是比较整个是比较大的啊,等待一下。有了吗?有了,但就通过他反应都知道这个东西加载的内容太多了,是吧,没必要。啊,那我们最终是不是要实现按需打包啊,按需包刚才我是不是下载了这些相关的工具包,对不对,但还不够,需要去创建一个配置文件。创建一个配置文件,这里面有两个按钮,大家一定要会。一个用来收缩的,一个用来定位,展开,指定某一个关系,这个非常有用啊。特别方便,嗯,因为有的时候涨的太多了,我有点受不了了,我就可以搜索一下,再去打开我想要的能听到不?嗯,好来看好了,是在项目的根目录下面去创建一个GS文件啊注意啊,这个别搞错,前面没空格,看刚right.gs。
17:11
好,这个配置啊,内容其实也是文档里面的啊,只是我把它搬过来了。这个里面是去干嘛去的是重点是这个。它是去针对我们的安D实现什么呢?按需打包针对哪个户,针对安地实现啊?按需打包,按需打包怎么理解?所说的的话就是根据import啊来打包,什么意思,大家想想看啊,我们现在是不是只是import了谁。Button和message。
18:01
是不是别的没有引路吧?那你说只用打包八和message吧。大家想想看,Button是不是相当于啊,大家看啊,相当于就是这个文件能不能听懂。能懂吧,当然这一个button,它应该是不是也有自己的样子。而我们前面是不是打包的是整个样式。这样好吗?那肯定有问题,那肯定不好,是不是太奢侈太浪费了是吧?那我们只需要打包我引入的组件的相关样式吧,这个已经配置好了。这个里面它的这一个意思是什么意思,自动打包是吧,相关的样式,你说你不引入了,引入了某一个组件吗?那就打开这个组件对应的样式,听懂了不。
19:03
这个说的是真的二吧,这个什么意思呢?为什么有一个import呢?这个使用一个工具,使用哪个库呢,实现呢。要使用到一个啊,一个工具包,每个工具包这个地方要说。来写一下啊,哎,使用啊,我们前面下载过一个插件叫Bible plug inport。诶,刚才我们有没有下载这个包。有下载的,我们来看一下这个包有没有下载,有没有。有,而B的所有的插件前缀名称都一样的吧,所以我在指定名称的时候,只需要指定什么后面的名字。这能不能听到?
20:01
可以吧?可以,好,这是这个啊,当然光写了这一步还不够。还有一个东西。他需要去修改这一个配置。我先改过去,再跟大家说。来看好了,拍我们前面啊,是用的这个,我们对比一下,看一下它们之间有什么区别。当我去执行start命令的时候,以前是不是用的react?这个命令实际上对应的是这一个包。能听到不,而下面它改成哪个命令,是改成下面这个命令是吧?而下面这个命令对应的是我后来下载的这个包。听懂了吧?这两个包的区别在哪里?很简单啊。我先把这个干掉啊,也就这个不能要啊,不能注释,因为它这是个文本文件啊,注释没用,我来说一下啊,简单来说就是这样这一个。
21:06
这一个包,它执行这个命令的时候,会去加载这一个文件。去把以前的配置做一个扩展,或者叫做一个覆盖。也就是说,如果我不改命令,就用前面这个命令。有个什么问题?那我的配置就是什么白写了,听懂了吧,没有效果怎么样,我的配置效果就需要用这个什么。是不是这一个包所对应的命令,而这一个包其实就对以前的这个包做了一个包装扩展,扩展的功能是什么呢?就去读取这个这个配置。大概能清楚吧,啊好,那也就是说现在我整好以后啊,我现在直接把这个做了是吧。
22:00
我现在就应该可以了,对不对。应该已经要,而且是去打包的来,这个时候必须得什么?必须得重启,这个时候是必须得重启的。因为我们开始的命令有读这个文件吗?没有。这能听懂吧?来啊好,那他现在呢,就去启动啊,好在启动过程中,我们来去说另外一个东西。这个我们已经写过了是吧,我们已经写过了,还有一个概念叫自定义主题,什么意思呢?我们它那个默认的主体颜色是个什么颜色来着。蓝色啊,是个蓝色对不对,就这样的一个颜色是吧,那我现在想要的颜色呢,是个绿色,因为我们的项目的那里面呢,你看都是绿色的主题对吧。这个该怎么办呢?这个时候就是它提供的自定义主题的一个,呃,一个配置啊。其实里面呢也有啊,这上面也有了,这是我在这里面我们就直接看这个了,需要干嘛呢?首先啊,需要去下载两个包,一个是nice,一个nice load。
23:12
Nice是不是CS编译器啊,为什么?是因为D内部写样式是通过什么写的?Nice写的?相当于我们要对它里面的那个代码进行一下编译啊,进行一下重新的编译啊,用到nice相关的语法,是不是需要nice以及let。包啊好,那这个两个包是不是也是需要的,所以我要把它干嘛。下载下来。下载包就浪费时间,有点浪费时间啊,这是最后一个下午的时候,我们要改一下,等会我们去把它改一下,好来去下载,下载以后还要做什么呢。这个时候我们以前的配置文件去再一次进行修改。
24:05
再一次进行修改,这个啊,我来把这个拿过来,我们来看一下。他改了些什么呢?大家注意啊,跟我们的前面比较一下,首先呢,它加了一个加了一个那个引入了一个函数,就是从这一个这样一个下载模块引入函数,大家看这个函数。这个函数用来干嘛呢?就这一个功能,添加什么let。能懂吗?还有哪些要改?大家注意观察一下,这一个style不能用CSS。啊,它这里面写成true,写成true实际上是什么意思,实际上是去处理它的文件。处理它的源码文件相当于,而我们现在用CS,相当于是用的是他编译以后的CSS文件。听懂了吧,好,来写成数啊,接着还有一个事情啊,把这个其实刚才直接覆盖就行啊,这是我想跟大家大概说一下。
25:05
大家大概能看懂。来看一下这是个这是个什么东西啊,这里面主要是看这个就行。这里面要说一个事情啊,大家知道这个是以这个开头,这是个什么东西啊。大家写过,应该这是在干嘛,定义了一个什么,这是一个变量名义里面变量义听懂不?而这个变量呢,它是里面指定的一个。主体的颜色那个是蓝色,我希改成。绿色听懂不?它其实一定只有一个变量,肯定是不是好一些变量呢,那如果我还想去改别的一些颜色的值,那我应该怎么做呢?你说我应该怎么办,是不是应该干嘛去?
26:00
看那个文档,文档里面,看文档里面有没有告诉我是不是还有别的一些配置可以配啊,别的一些变量可以配来,我们可以尝试找一找。啊阿定啊,找到我们那个主题的位置啊,自定义主题吧。啊,制定主题,接着是不是让我去添加下载这两个包啊,接着去改配置是不是啊,接着大家看到有一个什么。是配置主题啊,配置主题我们就可以看,从中可以看到,嗯,你看它有这么多一些变量可以什么。可以配置。能懂吗?那实际上我是不是可以配置把这个一改。可以改吧,可以改,只是说看需要还是什么不需要的问题是不是?嗯,这个要需要知道啊,如果万一你到时候需要改别的,你要知道怎么样弄啊。好,那现在呢啊,我就去已经配置也配置完成了,那个下载包是不是也完成了。
27:04
能看到吧,那我现在我这个颜色改了吗。啊,我们来看一下。改了吗?改吗?没有,为什么没改啊?啊,这个本来就是这个延长,为什么没改。因为我没有什么重新启动,因为刚才我不是又改了配置吗。啊,这就最后一步了,这个搞完就算结束了。其实刚才我说了很多话。但其实说实话,如果。呃,按照我去做,我就直接咔嚓一下,就跟着文档一配聊了就可以了,这东西你太记着占空间没用。能听懂吧,啊主要还是要去,其实配置环境嘛,主要还是要根据文档去一步一步配置,但是说实话,你文档也就是他这个配置背后怎么去一步一步实现的。你去探究这种事情就有点嗯得不偿失了,你把精力花在这种配置上,就是它这个里面怎么实现的,这个里面怎么实现的啊,完了。
28:09
那你这是你想啊,你要这么搞的话,那我们写了这么多。组件,那每一个组件是不是里面都有自己的实现。能听懂吧,当大致上你要知道,你要至少要知道这是在干什么,对不对,起了个什么作用,要知道吧。这个起了什么作用,是不是用上了我的nice load实际上是对我对他的什么呢?使用nice啊,对它的源码中的是不是那个赖的变量进行覆盖啊。进行重新指定,这能听懂不?以前它是个蓝色的值,现在我是不是指定了一个新的值?这个可不是去改CS文件,实际上是相当于改了他的什么文件。
29:03
刚才大家应该也看到了啊,大家注意观察,这里面它是啊有less大家看好啊,看好了,比如说我们这个,这不是我们的and吗?啊,他写有没有写自己的light文件,大家注意观察一下有没有,有吧,是先写好light文件以后,是不是后面它才编译的什么。是不是CSS文件?啊,这个要去注意一下啊七。啊,来看一下我们的当前的这一个考拉,按说来说是应该行了,可以了吗?可以了吧,可以吧,那就说现在啊,我们实际上两个大的特点啊,记住两个大的特点,你要知道在干什么。啊,一个是按需打包。是吧,再一个是什么制定什么主题,嗯,自定义主题主要就这两个事,当然我们首先是引入力是吧,嗯。
30:05
嗯,别的就没什么了,后面呢,我们应用中会用到好一些on d的一些组件啊,这个先我们不用去背啊,我只是把它列出来,大家有时间可以看一看啊,行,这是这个。
我来说两句