00:00
好嘞,各位,咱们接着往下聊,把这个问题啊解决一下,就是我不想一上来就引入所有的组件和所有的样式,这样的话我代码体积太大了啊,那得怎么引入呢?叫按需引入来回到代码里,意思就是我只用到了它,它还有它这三个组件,那么我就只引入这三个组件,我也只注册这三个组件,同时呢,我也只引入这三个组件相关的样式,这是不是一个最好的做法啊?哎,那怎么去做呢?回到m.JS里,你第一件事各位就得把第14行注掉,为啥说同学14行一写谁也救不了你,你这11USE词,那么最终导致的结果就是element UI里面所有的组件全都被注册了,根本停不下来,所以说这块千万不要直接use,那这块呢,都不用这个element UI了,这当然也就住掉吧,还有第八行你也得住掉,你这么写同学也是没人救得了你,你只要一引入不好意思了,这个index.css就是全套的样式。所以说把。
01:00
它也得注掉,哎同学说老师合着我刚才写那三行都注掉了,嗯,那可不啊,我不删啊,给大家呢留下痕迹,写一个注释完整引入是吧?那这块呢,不多说了,就是应用这个element UI呗,嗯,那回到他的官方文档里,他告诉我们了,应该怎么去做这个按需引入啊,你看你把刚才的东西一注掉,看咔咔各种报错是吧?哎,说这个EL肉不认识了,然后样式也没了,这很正常啊,先不关注这儿来,回到官网里面找哪去呢?还找这个快速上手,然后往下看啊各位有这么一东西叫按需引入哪去了?哎,在这呢,按需引入他说呀,你得借助这么一个东西,这是啥呢?啊,好奇哈,打开看看走,这时候呢,你发现啊,它是往一个github地址去跳,然后这呢,跟大家说一下这个东西啊,就是专门用于在UI组件库里面进行按需引入的啊,哎,正好打开了,就跟大家说说,哎,同学你看这个库名字叫做Bible pluging component,它的作者是谁,就这个仓库的归属者是谁,隶属于谁element UI说老师的名。
02:00
明白,就是element UI团队所打造的呗,不是,你看下边这小字folk from aunt design哎,学过咱们上硅谷react的小伙伴,或者看过咱们react项目的小伙伴肯定对这个库比较熟悉,On design同学谁出品呢?蚂蚁金服出品的这么一个UI组件库,跟element UI同学是一类东西,都是UI组件库,但是人家这个aunt design同学是给谁用的?给react用的,也就是说基于react蚂蚁金服团队所打造的这么一个UI组件库,可以这样讲啊,是UI组件库里面的领军者,做的非常棒,封装做的非常好啊,人家写了这么一个东西叫做Bible plug in import,专门做on design里边的啥啊,那个按需引入,然后呢,Element UI觉得还不错,拿过来了啊,进行一番调整是吧,然后改了个名叫做double pluging component是吧?根在哪呢?根在这呢是吧?各位,哎,那你看ant啥意思呀?蚂蚁的意思吗?Design。
03:00
设计蚂蚁设计嘛,是吧,各位,哎,当然啊,这呢也跟大家说一下,这个on design啊,也出了view版本,最开始啊它只有一个react版本,现在呢,也有view版本了,哎,也就是说在view项目里面能不能用on design这个UI组件库呢,也是可以的,哎,在咱这儿呢,我们不关注啊,这里边的东西咱们也不用去仔细的去看啊,按照它的文档里说走就行了,第一步是不是给它安装了,诶值得你注意的是这写了一这东西啥呀,叫开发依赖是不?我们在安装依赖的时候,不是区分那个开发依赖和生产依赖嘛,是吧?那这个东西同学你想想,按需引入明显是开发的时候应该做的对不对?诶你这项目上线了,到生产环境下,那早就打包完了是不?所以说加上这个杠地,你得能区分好这个开发依赖和生产依赖啊,区分不好的小伙伴赶紧去看看咱们的webpa教程是吧,各位来走着把它安装上,它呢,安装他的咱们的往下走,各位他又教你了,说然后将Bible RC修改为诶,这一堆东西是不?哎说老师我看看这里边的东西,不用看这。
04:00
在这啊,你就已经输掉了,为啥你没这文件点Bible RC,哎,你去找来到你的代码里,你找同学,你在哪能给我找到Bible RC,能找见算计营没有?哎说老师这怎么办呀,这好尴尬呀,说一下各位,我们目前用的是最新版本的v CI Li,所以说呀,它生成的我们目前用的这个工程啊,也是最新版本的,最新版本里边那文件已经不叫Bible RC了,那叫啥呢?哎,当然就是这个呗,Bible con.js同学你咋猜?我觉得你也不能猜到这儿去吧,你也不能猜到这儿去,肯定里边得有Bible,你说对不?哎,最新版的文件叫这个bible.con.js说老师,那好嘞,我就全选复制,就来到这儿找到它,全选删掉,一粘贴,同学,那你就犯错了呀,你把原来的东西给破坏掉了,是不是,哎,回来别这么暴力啊,慢慢来,各位注意观察啊,给大家呢放大一下,在这看他说啊,首先有第一个配置叫做precise,啥意思呢,叫做预设。
05:00
哎,就是预计的预,预习的预啊,然后呢,是设计的设预设包,预设包的意思呢,就是能帮你处理一些事情啊来回头看我们这里啊,已经用了一个预设包了,同学,这个预设包是干嘛的呢?你看什么view c plug b,其实用于解析我们那些view相关里边的文件的GS的啊,在这呢,我们不过分关注,但是你不能往下删啊,你删了肯定就废了,说老师,那我们得怎么做呢?追加,哎,在这儿小一逗号,注意观察形式啊,Precise。本质是不是一个数组,数组里面有一个元素,这个元素还是数组是吧,各位,哎,那你就把里边这个拿出来,因为人家文件里面precise已经是一个数组了,在这追加一个是不是就可以了?哎,那下边这些东西同学那你就放心吧,整个全都复制,因为这边没那配置了是不?千万注意不要写这里边不是这的东西,哎,是跟谁平级的呢?跟这个precise跟这个预设是级的,所以说在这儿走你哎这么写就对了,而且呢,我没有必要非得把这个K啊,给它写成字符串,就直接这么写呗,简写形式这么写不也是字符串吗?OK,这不就写完了吗?好让改的呀,我改完了那再往下他说,接下来如果你只希望引入部分组件,比如button或者是s select,那么需要在命点GS中写以下内容,哪些内容呢?我给你画出红色框,你只关注红色框里的就可以了,因为其他的地方我们都会写,这是啥呀?
06:25
哎,引入东西呢,你发现同学诶能单个引入了,我只用谁按钮,我只用谁瞎拉框,那这干嘛呢?这你要忘了同学我可就伤心了啊,我这隔着屏幕这眼泪都掉下来了,这view有点component,它是干嘛的呀?注册全局组件吗?第一个参数啥组件名,第二个呢,到底是哪个组件?那就写呗,这一堆复制回到哪命点JS里面,然后怎么着别完整引入了,写好注释,按需引入走,你引入完了吗?我们用select框吗?不用啊,说老师,那就只引入一个button吧,你觉得呢,肯定不行啊,你看你的APP里面各位来,你用到谁?不仅仅是button,还用到了ELL,还用到了data picker是不?哎,那可能有一些同学说,哎,老师啊,那我知道了啊,就直接一会再引入这个ELL就得了,没发现规律吗?你用的那个组件叫做EL-button,然后引入的时候是没有EL杠的,并且把这B大写是不,所以说你知道接下来我要引入那个肉,我得怎么写是不得。
07:25
这么写叫做RO,哎,这是英文的,是不得是这个大写的R,那同理,你说这个呢,把这个EL杠去掉,把data picker直接拿过来,哎,然后在这儿呢,逗号写上,然后D咋的大写,那多个单词那呀,是不是也得大写,如果你不自信,那你就这么写data,等着它提示呗,你看有没有有,那接下来呢,哎,回到这儿,把注册组件那一块给他拿过来复制,往这一写,咱写一行就得了啊来,在这基础上改。说老师这啥意思呢?button.name哎哟,这啥意思,这没见过呀,这button身上还有name,同学如果没见,如果不喜欢,那就把它删掉,反正就是给你的组件起一个名字吗?哎,跟大家说啊,这个button啊是个组件不假,然后他身上啊维护了一个内幕属性,你知道button身上的name幕是什么吗?
08:15
就是EL-button,哎,那同理各位你知道RO肉身上的内幕属性是什么呢?哎,就是EL杠肉,明白不?这是他维护的一套规则,如果你不喜欢,各位完全可以自己写呀,比如说这按钮的组件以后啊,我都让它叫做艾特硅谷button是不?你看这挺不要脸的,非得加上咱们的名字好再写几个,那同样的注册谁呢?这个RO还有谁呢?这peer那这块你知道怎么写了,你把这个东西ell你给他拿过来,然后呢,我就非得叫艾特硅谷,我就直接写了,然然后回到这儿呢,你再把这个date picker啊给它拿过来复制,然后呢,放在这,哎,我不叫EL date配ER,我就叫at硅谷date配ER是吧?同学你看引入这三个,我用这三个,我就只引入这三个,我就只注册这三个,对不对?嗯,那你说现在只解决了什么问题呢?组件的问题样式呢?老师知道解开废了,白写了,同学,你这么一引入的全部的样式不就又来了吗?所以说可不是这么玩的啊,住掉,哎,老师,那怎么办呀?
09:16
样式我怎么把控呢?同学,听我说啊,如果你这里边按照人家的要求写了,那么你放心,样式它会自动分析的,他发现你用了这三个组件,那么就会自动的把这三个组件的样式给你引入进来,我们的关注点只是用哪个组件注册哪个组件,至于样式你自己分析去,对吧,这不就是脚手架嘛,对吧,智能1.ok啊,你看让我改的,我也改了啊,形式呢,也按照他那写的,那接下来呢,就剩下一件事儿了,是不是启动啊,但是在启动之前我给你个建议啊,同学,你这名都换了艾特硅谷button,那你说这呢,别叫EL的搜索,把所有的EL全都改成这个艾特硅谷button,走,你改完了吧,还有这个走,把所有的都改成艾特硅谷。
10:03
OK,那还有一个这个同学我就别搜索了,直接改呗,是吧,艾特硅谷date配ER是不是都写完了,嗯,OK,那接下来呢,停掉你的脚手架,哎,重新再启动,理论上就可以了是不?哎,我给你拉长一点,我一说拉长一点就证明啊同学这东西啊,肯定它有点问题啊,在这儿呢,它有一个提示,他说什么呢?同学你读一读啊,说什么解析文件遇到了一个什么不存在的一个暴露对象,同学这儿呢,我说一下啊,不是你的锅,就你写的挺好的,你完全是按照他官方这个提示来的,一步一步的是不是,但是在这就报这错误了,这你咋办呢?啊说说各位啊,这个UI组件库啊,在进行按需引入的时候,他需要跟你的脚手架呀,打一次,配合UI组件库告诉你乱七八糟的,你这么调这么调,这么调完了呢,把它所给你写的那个粉色的写法啊,还得加上咱们这个黄色的脚手架里的配置,他俩得打一套组合拳,才能真正的完成按需引入。但是有些时候存在什么问题呢,就。
11:03
这脚手架呀,已经更新了,但是UI组件库这个网站吧,咋说他没有及时的给你做出一些更新,就比如说这同学这文件都不存在了,完还告诉你在这个文件里改啊,还有就是这里边可能有一些写法啊,也已经都不对了,因为脚手架那边升级了,你这么写可能就行不通了,所以说哎造成的这个问题,还有可能出现什么问题呢?各位就是你启动啊,他给你报这么一个错误叫做什么呢?模块,什么not found啥意思,就是模块,诶not啊模块没有找到,说老师遇到这种问题怎么办呢?Not found,比如说not found,一个module ABC,那同学你说接下来你怎么办,很简单嘛,NP mi谁ABC是不是给它安装上,哎就按照他那个提示来我这儿可能说,哎,目前来说比较顺利,没有提出什么,哎说哪个东西找不见,有些同学啊,之前在线下讲的时候,可能是你本机的NPM环境造成的啊,就是报了三个不存在的包,诶,然后安装上呢就好了,完还挺委屈的说老师你看我同桌那可顺利了,一下子就起来了,我这怎么回事,同学报告诉诉你啊,缺什么你就引入。
12:03
就得了,你就下载什么就得了,OK,这你不用纠结,那我这同学啊,不是少包的问题,我这没有报这错误什么玩意儿note found是吧,我这报的什么问题,说什么一个预设文件,不能说老师这怎么解决呢?直接跟大家说啊,这些东西同学就没有什么太大的参考意义,你知道吧,就是我们读完这之后,你GS有多好,你比有基础学的有多棒,对这块没有任何帮助是不?你要说你webpa好一点,诶,那对这可能说有点帮助是不直接告诉大家啊,是哪出的问题,同学你没有缺少任何一个东西,你只有一个地方啊,写错了哪呢?就是在这个配置文件里,这会同学按照老版的脚手架确实应该写ES2015,但现在换了应该写这个东西啊,艾福bbible代表Bible里边的一个子库,然后呢,后边别写ES2015啊,写这个preet有预设的意思,杠ENV预设环境,诶一改这个就好了,同学咱凭良心说啊,你说这东西,咱说你这基础学的有多好,Atml c3学的有多棒,对这块同学没啥帮助,这只有两条路可以走。
13:03
一凭着经验来,二咋的,自己亲自去找到这个里边去研究它那个文档,看看目前针对最新的脚手架应该咋写,诶我直接告诉大家在这一改就可以了,好了给它清掉,然后接下来呢,NTM,呃,然后呢,So,哎这块也跟大家说,反正你在进行这个配置的时候,他说少啥你就安装啥,你就听他的准没错,他只要说什么not found,那就证明你确实没有,你就装就得了,是不?各位嗯,等会儿你看是不?各位就是这的问题啊来重新打开一下,我们看一下效果,哎同学东西是不是都在啊,我们主要验证一下你到底做没做,按需引入同学样式我不想提了,样式都出现了,你说它分没分析你的样式分析了,那看一下这个network这个里面刷新一波,各位,你发现原来七点几兆的东西是不是变成了三点几兆啊,同学已经小了将近一倍都多了是不?哎,这就已经非常棒了,这就是我们所说的这个按需引入,然后也建议各位吧,就是在闲暇之余啊,你把这些常见的U。
14:03
组件库呢,你都大概的看一看,不用去搭建,各位你去看一看,就比如说没事的时候啊,你打开element UI就这个,然后呢,缩小一点啊,你找到组件,你就把它提供这些组件呀,你就点大概看一遍,你比如说啊给我提供了布局是吧,哎这color给我提供了色彩等等这些,还有什么input框,然后以后用的时候啊,你就知道大概哪个UI组件库里面它有什么样的功能,你比如说上传呀等等这些不需要去写,写是浪费时间,你可以大概看一下,是不也可以横向的去对比一下,然后刚才呢,咱们提到了这么一个人,各位是不是那个on design呀,啊简称呢,就叫做on d,你打开同学他的这个官方网站啊,设计的也不错,你看on design什么4.0正式发布了,然后在这呢,你点一下这个设计吧,在这里面还是文档里面啊,你看同学这是谁呀,React的logo是不?然后你可以搜on d,然后来一个for view,哎,就是为view设计的,就在这呢。嗯,也挺不错的,自己反正可以去琢磨琢磨,你看昂D结合view同学也有组件也给你提供了什么快速上手,也给你提供了什么按需引入,这么怎么一步一步的,同学你看多像啊,哎,各位引入on d啊,从on design view身上这是完整引入,然后再往下呢,再找应该有那个按需加载,是不是在这儿又开始告诉你了啊,引入这个按钮同学,我问你是不是都差不多,哎,UI组件库同学很类似的,OK啊,在这里呢,不给大家整理任何的文档,咱们就参考官方的这个去写,你说是不是就可以啊,哎,OK,好了,那这一小节呢,我们。
我来说两句