00:00
好嘞,各位,咱们接着往下聊,在这一小节呢,给大家讲一个脚手架当中编写样式的一个小技巧,打开刚才写的组件啊,给它精简一下,这两行呢,我不要了,这个过滤器呢,我也不想用了,Methods呢,也给它删掉,OK,很精简对吧,再写一个叫student,我就不再从头写了啊,因为咱们讲那个混入的时候不是写过一个吗?给它复制过来,给它放在这儿,里边的东西也精简一下,同学不需要这个点击时间了啊,这些无关的注释也都给他删掉,OK,一个最精简的student也准备好了,那么APP里边就得用他俩呗,所以说我多引入一个人呗,叫做student路径呢,也得改,还得再注册一下,还得再写个组件标签。OK了,再打开midin.JS,我不想用这个插件,那就别引入了,那就别应用了,那这个插件都不用了,是不是可以给它删掉了呀?诶这回就很干净了,来看一下效果啊,打开走应该是。
01:00
这两个最基本的组件,哎,看一眼控制台啊,再看一眼这个开发者工具,OK,都没啥问题,是不好了,接下来呢,我开始写样式了,我先给谁写呢?我先给这个school组件写个样式啊,让它的背景色呢,是天蓝色,好来咱写写啊,回到school.b在这儿呢,开始写这个样式,把它隐藏啊,走style,然后里边呢,随便写啊,比如说叫做DEMO,给它来一个背景色,Bacc是sky blue,填蓝色,那我就得应用呗,在这写一个class呗,等于DEMO应用了吧,回头看一下效果啊,刷新走啊,好用,回来再给这个student也写一个啊,Style给他写呢,我就换一个名了啊,叫做点test走,再来一个背景色,让他什么颜色呢?是橙色吧,各位啊,随便写啊,在这儿再来一个class test保存,回头看一下刷新啊,都有效果对不对,哎,也没什么问题,那接下来呢,我。
02:00
我就得告诉大家一个事儿了,就是说我们在编码的时候呀,你在school.view里边写的样式和你在这个student.view里边写的样式,其实最终啊,都汇总到一起了,也就是说哪怕你写了80个组件,那么80个组件里的这些样式啊,也都是汇总到一起的,那么既然他们汇总到一起,就容易出现一个问题,就是类名冲突,你这边叫test,那我这边有可能也叫test,对不?那一冲突这事儿就不好玩了,来,APP和mean呢,关掉,我接下来呢,就给你制造这么一个冲突,你瞧着school里边那个样式的类名叫DEMO,哎,你说巧不巧,我这儿啊,嘿,也有一个啊,然后是橙色的,那我这儿是不是也得这么写呀?哎,那你说这后果是什么呢?到底听谁的呢?听school是天蓝色的,听他的呢,是橙色的,哎,那看一下效果吧,刷新各位最终听的谁的呢?Student为什么听的是student的呢?是吧,这怎么回事呢?各位其实啊是因为。
03:00
这呢,你引入的时候,你先引入的school,诶背景色呢,是天蓝色,但紧随其后你是不是又引入了这个student,那么橙色的这个背景就把刚才那个蓝色的就给覆盖掉了,说的再直白点,Student里边那个DEMO的样式类名就把死故里的覆盖掉了,因为后来者居上了,是不?如果你把他俩的这个顺序你调整一下,你看着各位先引入student,哎,是橙色的,再引入school就变成天蓝色的,保存回到这儿刷新一波,你瞧对吧?各位,哎,不是说看这儿,各位不是看你使用的顺序,而是看你引入的顺序,大家一定要知道一个事儿啊,就是脚手架呢,他在解析你这个view文件的时候啊,其实他先扫描的是这个地方,先做引入啊,然后再读取这些配置项,哎,然后最后呢,再去涉及到这个解析模板,OK,哎,所以说在这你别调调这没用啊,主要是引入啊,好,那我们把这个关掉,说说吧,怎么处理这个问题。
04:00
一个最笨的办法就是你这边别叫DEMO不就得了吗?但是同学这不太现实,你想想啊,在开发当中你能不能这么做,说老王写的school啊,然后老张呢,写的student,老王这边一旦用了DEMO,那就告诉所有开发团队里的人,你们其他人写组建的时候咋的不要用这个DEMO了,这不太现实。甚至同学我跟你讲啊,就老王自己一个前端,他都拿捏不好这个尺度,写了那么多的组件,说不定里边哪个就跟之前的冲突了,你说对吧,那咱说说怎么解决,其实很简单,用一个属性就可以。同学你瞧着啊,我来到死故组件里面,我在写样式的时候呀,我加上这么一个词儿,Scoed,什么意思呢?Scope这个词同学你得知道来有道查一下啊,Scope它本身就有作用,域的意思,有范围的意思,那scope的就是局部的,同学你给这个style标签啊,你加了一个scope的不要紧,那就意味着这个里边所写的全部的样式。
05:00
只是负责诶这个区域的结构别人他不管啊,你比如说同学,别人如果也写了一个DEMO,但是它不属于school.view里的结构,那么就不奏效,哎,就把它限制住了,那同样的,你把这个如果也加在这儿,这个问题其实就解决了啊来保存一下,回来刷新,同学你看冲突是不是没了,咱们说说啊,他是怎么办到的,同学右键检查你就知道它的套路了,其实呢,它就是给你这个最外侧的div啊,给你加了一个特殊的标签属性啊,而且后边这值啊是它随机生成的,哎,每次你去运行的时候可能都不一样,是随机生成的,然后呢,它通过这个DEMO在配合你这个标签属性选择器,诶,就完成了控制指定的div OK,哎,所以说编写样式的时候用它呢比较好,但是同学啊,有一个组件不太适合用它哪个组件呢?APP为啥说它不适用呢?你看一下各位,比如说我在APP里啊,我写了。
06:00
一个样式,大家要知道这APP是怎么一个存在,是所有组件的头,你说对吧,各位你比如说在这儿呢,我写了一个这个东西叫做title,就是标题,只要你应用了我这个样式,你的文字颜色呢,就变成这个红色的,同学我现在是不是没有加那个scope的,那就意味着同学任何一个组件,你只要加了这个class,等于title,你的字都会变成红色,你比如说我试试啊,来在这写一个,比如说学生姓名来一个class,诶等于什么呢?这个title对吧,然后再给这个呢,复制一份,给谁也写一个呢?给这也写一个,你看效果啊,各位刷新,你看它俩是不是都是红色的,但是一旦你给这个APP里边也加上这个cupped,那就不好玩了,各位刷新是吧,就不管他们两个了,只管谁,也就意味着只有APP里边你写个一,你比如说你写一个你好啊,然后你再给他加这个title,它才好用写一下啊。
07:00
走刷新一波,你瞧对不,一般来说啊,各位APP里边如果写样式了,那基本上就意味着这个东西呢,可能是很多组件都在用的,因为你想想嘛,各位所有的组件都汇总到APP这儿了是不?哎,所以说你会发现啊,公司干开发的时候,很多人在这儿都加上这个scope的,那既然聊到这儿了呢,再说一下各位,如果你用那个快捷键呢,去生成这个style标签的时候呀,你会发现一个特点,什么特点呢?你看着我把这里边的东西带走,省得我再写了,你看我写style,我让大家安装那插件了吧,你看它第一个选项啊,Style long,然后你选择它,你发现这里边又多了一个人叫long,这个long是什么呢?其实是language这个单词的简称,我们大家都知道啊,这CSS呢,除了有最纯正的这个CSS写法,还有谁呢?还有lesss,哎,还有什么SSTY那些东西对不对?哎,我们最常用的应该是这个啊,这个大家应该都知道吧,Less也就是说在里面。
08:00
你不仅仅可以用CSS去写你的样式,你也可以用这种啊,CSS预编译语言,比如说lesss去写,那你就在这写一个lesss,那啥意思,就是告诉人家你这光标闪烁的位置里边所写的样式都是拿lesss写的啊,说老师那我要用的是CSS呢,你就正常写嘛,CSS好给它放在这儿保存啊,我把那终端打开,你看能正常变异的是没问题的啊,比如说我给你换个颜色,我给你换一个粉色保存,能正常变异的回来刷新,你看也是有效果的。哎,说老师那我想写lesss,那你看着啊,我给你改一下Les保存,同学不行。你发现怎么了?脚手架处理不了lesss,哎,也就是说同学这个标签的设计是可以让你调这个CSS这个写法的,但是你写了lesss,由于view脚手架咋的,它处理不了less,你看人家给了你一个非常好的提示,叫什么呢?请你安装什么东西,Less load,那怎么办?把它停掉,哎,停掉,然后NP mi安装谁呀,Less-loader同学你要是学过web pack,对这个人简直太熟悉了,我们上硅谷讲那个web pack的时候,应该是第二个loader,讲的就是它是不各位来敲回车安装上,但是这个时候啊,你可能就会发生一个问题啊,同学完了是不是报错了呀?这儿呢,我就跟大家说一下啊,不是你的锅,是一个兼容性的问题,来我们捋一下啊,各位,你说脚手架是不是得依托着这个人,我们之前就聊过,是不是webpa,大家知道目前来说webpack的最新版本是多少吗?各位,他已经到了五版本。
09:39
了啊,已经到了WEBPA5了,但是我们的官方的脚手架呢,在用这个webpa的时候呀,他用的不是五版本,我给你找一下各位你往下找,他肯定得用we pack是不是在这儿呢?你打开他的pack.jason你发现他用的是四里边的最新版本4.46啊说老师为什么他没有用五呢?怎么讲啊,这个五啊,呃,确实出来也有一段时间了,但是还有待人民群众的检验,哎,说白了可以应该再沉淀一段啊,肯定以后都得用五,同学,这是固定的一个事物的发展规律,但是目前来说4.46相对来说比较稳啊,来折叠起来,正是因为你这个尾U脚手架里边用的是4.46,所以说你直接安装lesss loader是不可以的,因为lesss loader你要直接安装,安装的就是它的最新版本,那么less loader啊,我记得最新版本好像应该是九啊,要么就是八啊八或者九,那lesss loader最。
10:40
新的这个版本呢,它完全是为了迎合WEBPA5,而你却在WEBPA4里面要安装一个最新的less loader,那其实这就不太合适,你应该给这个less load啊,给它降一个版本就好了,哎,别直接安,直接安是最新版啊,最新版是为五服务的,但你现在是几是四说老师,那我怎么知道这lesss load最新版本是几啊?同学,这个命令大家知不知道npm view啊,不是说咱学的这个view是VI ew是吧?查看查看谁,你比如说写一个web pack,然后空格Vs is啥意思?Worse这个命令就能看一下web pack1共有多少个版本,目前的最新版本又是多少?敲回车看一眼啊各位,呃,看看它最新版本,你看5.38.1,那你看一下四里边同学最稳的一个版本,或者说四里边最末尾的一个版本是多少4.46,那么尾用脚手架求稳,所以说用了什么呢?用了这个啊,那再看一下这个人同学,就是咱们刚才安卓。
11:40
方的呀,这个less loader less loader,看看他的那个版本啊走。你看最新版本A是九对吧,同学不要安装八,也不要安装九,因为八和九都是为WEBPA5服务的,你安装什么呢?七啊七里边你就随便了,但是同学也别安装的太久,说老师我来个四,这可能还会出问题,所以说你最好在六七啊567这里边选,我建议你安装七啊,各位来吧,闲言少叙,NP mi less load咋说让他安装七艾七对吧,他默认就选择这个了,7.3.07里边的最新版本小会车给它安装上,这回你发现诶就可以安装了啊,安装完了之后呢,你的lesss脚手架也能解析了,诶你看安装完了吧,安装完了之后呢,同学来给这个关掉,回到咱们这个里面,我写的是不是lesss啊同学,Lesss一个最大的特点就是东西可以嵌套着写,对不对,来在这儿再来一个,来一个什么呢?比如说叫做啊q we吧,随便写一个在这里面再来一个,哎,别写背景色的同学,给他来一个那个啥fo size对吧,方特size让它是40。
12:49
PXOK,这可是纯粹的less了,CSS可不能这么玩是不?各位来咱们启动一下啊,N PM serve看一下效果啊。
13:12
OK,成功启动了,并且没有什么报错,对吧?来看一下效果吧,同学刷新走呃,但是这个文字的效果好像没看出来,为啥呀?诶,因为我写了这个q we,但是我没有给它应用对吧?这不太好听,叫艾特硅谷吧,是吧,随便写一个艾特硅谷好给它复制,然后应用一下啊应用在哪呢?学生性别这儿吧,行吧,写一个class等于走这个保存,回头看一下效果啊刷新诶你看是不?所以说同学技巧呢,有两个啊,第一个呢,就是在这儿呢,你可以随意的去指定你CSS使用的这个编写方式啊,还有就是这个SCO的,就这个东西最好呢,给它加上嗯复制,如果你安装了咱们推荐那插件吧,其实同学挺好的,你在这写style,你看有这么多选择,你选择这个就是,诶走SCO说老师不写这个long是啥意思呢?诶同学我这多说一句啊,如果你不写这个浪的意思,默认就是CSS,也就是说29行这种写法就是默认你写的就是CSS,但是不允许怎么玩各位啊。
14:12
不允许这么玩,哎说老师我不写,我写浪,但我不配置,你看里边马上就不对了,人家不知道你用的是啥是不?哎,所以说在这同学要么就不写,写呢,就给他写好了,到底用的是哪一个对吧?我在这写less OK,总结一波吧,笔记呢也给大家写好了,在这儿呢,Scope的样式作用就是让样式在局部生效,防止冲突,写法就是style里边加一这个就得了,那至于说为什么没有给大家总结那个脚手架如何去安装那个lights呢?是这样啊各位,我在这儿总结了,可能就过了一个月两个月,可能这东西怎么的他就不适用了,因为可能脚手架里边用到了WEBPA5,对吧,所以说那些东西呢,同学就是一个经验之谈了,是不?哎,好,那这一小节呢,我们停。
我来说两句