00:00
好嘞,各位这一小节呢,咱们聊点轻松的东西啊,说说这个脚手架的默认配置,你看我现在有这么多的文件和文件夹是吧,之前也跟大家交代过,哎,我说这个点GS是入口文件啊,大家呢,先别随便改名啊,因为人家脚手架里边啊写好的啊,人家就去src里面找这个点GS啊,说老师那我就想改嘛啊那来你改一下,说老师我就想给他改成这个叫做配奇点GS,同学你这么改的后果就是他没办法工作了,你看他说,哎,我错了,我找不到src下的这个min.GS也就是说人家底层的配置就是去找m.GS你只要没有我就报错,那问题是它咋配置的呢?我没有看到这个配置文件呀,那你看脚手架呢,是依托着这个web pack,那web pack想干活,大家都知道,你最起码得有这么一个文件,Web pack点空fa.GS是不是配置文件呀,那我并没有看到脚手架的配置文件呀,东西一共就这么多了呀,那这配置文件哪去了呀?诶跟大家说一下。
01:00
维修脚手架呢,做了这么一件事儿,他呀,把所有那些重要的配置文件呀,都给你隐藏了,他怕你给他碰坏了,他不让你看,隐藏起来了,说老师那我就想看看嘛,你到底在哪配置的嘛,对不对,凭什么那个页面就是public里的index呀,是不凭什么入口就是它呀,啊那个mid.gs呀,其实可以看的,各位啊,来先把这个项目呢停掉,在课件里面给大家总结了,有这么一个命令叫做view啊,Inspect output.js,中间别忘了写这么一个东西,这个命令能干嘛呢?来给它复制过来,来到我们这个里面粘过来这个命令就可以把view脚手架默认的配置全都整理成一个点GS文件,然后给你看啊,来,我们试试啊,各位,这个名我可改了啊,我可改成配齐了,来给它都折叠起来,然后呢,敲回车啊,等那么个一秒两秒的,等它输出完啊好出来了吧,各位是不是在这儿呢啊,你点开看一下同学一共是多少行呢?1000多行,我记着哎,1300多行,就所有脚手。
02:00
大的配置去哪儿找文件,然后这些东西上哪找页面全在这里边配置着呢,啊说老师他报错呀,你看你这东西弄的,你看报错啊,来往上看是吧,说老师为啥报错,很简单,同学你折叠起来,这是一个对象,你最起码也得是这种形式啊cost a等于是不是写个复值语句啥的就好了,哎,或者前面你加这么一个东西a support,我要暴露是吧?那当然得来一个default对不?哎,这是不是也行,你要直接写的肯定是不可以的,对不?各位啊,那咱们就这样cost a等于先不让他报错完,咱看看它那些配置啊,都在哪呢?啊同学搜一下,你比如说呢,咱们就搜这个啊,叫做点GS,同学你瞧你看in什么意思,入口,整个APP应用的入口在哪呢?Src下的m.JS,你瞧所有的东西同学都能有理有据的找到,你在搜谁呢?index.html同学,不是这个啊,你再往下找,这呢,你看对吧,他告诉你这些文件都去哪,我上哪找去啊,说老师那我改一改呗,同学你不要在这里改。
03:00
你看着我把这个m.GS找到,说老师刚才你不是给这改成配齐了吗?老师那我想改一下,诶我就改成佩奇,哎,说老师这样的话是不就行了,你看我把它那配置改了,让他去找佩奇,那我这还有佩奇同学这样是不行的,就是这个output.gs只是输出一下给你看一下,不是说你改了这脚手架就跟着变了,那不信你试试,各位来,你再重新执行那个npm run45,它一定就报错了,你看效果啊,等着。你瞧同学他说我找不到src下的min.GS是不?你是在这改成配齐了那玩意儿不奏效啊,对吧,这个给它改回来叫做min.GS嗯,OK,你只要改成m.GS哎,马上就对了,他就能找到了,等着诶一切正常是吧?那我知道可能有同学说老师那不行,我不满足,那你光让我看不行,你看完我改不了,那这东西它就没意思了,我就想改嘛,是吧?哎,那同学来给这个output呢,先删掉,我先跟大家说说,以脚手架默认的这个配置,哪些东西我们不能去改啊,就是如果你采用它默认的这个配置,你用人家默认写好的那个东西,哪些东西我们不能改啊,各位来把这些东西呢都打开,如果你采用默认配置,你不去修改它啊,当然也有修改的办法啊,一会儿我马上就会说,就整个绿色框里的东西,我给你说说哪些东西你不能随便改,哪些东西改完了脚手架就启动不起来了,同学,这个public文件夹你不能随便改,人家就去里边找这个。
04:34
点atml这个也不能改,当然了,同学网站这个页签图标呢,那是一个固定的名字,也不能改,哎说老师那还有什么不能改呢?Src你不能改,因为底层的默认配置就去找src这个文件夹,还有哪个不能改呢?来各位命点GS不能改,一共默认的有五个东西,哎,是我们说哎尽可能不要改的,改了人家就不认了,对不对?至于说这些东西,同学粉色框里的你随便改,这文件夹你可以改,这名儿你可以改,只不过你用它的地方,那个路径也得改名也得改,对不对?剩下这些我就不说了,同学,那这东西本身就是咱自己写的,还有这个components,说老师我就不想叫components,我就想叫这名组件S行不行?行,那你用这些东西的时候,你比如说APP里边,你这就改呗,别叫components了,叫组建是吧,各位,哎,那咱再说说我想改,那得怎么改VI呢,也给我们提供这个渠道了啊,他给了你一个办法,哎,让你能把这些默认的配置改掉,那你就得借助一个高端的配置文件,哎,同学我们去那个VI。
05:34
手架的官网啊,去找答案,找生态系统,这里边有一个VC Li,哎,然后这里边同学注意了,有一个配置参考项啊,打开这个所有在左侧目录里边出现的这些属性都是允许你改的啊说老师那没出现的呢,没出现的你也就别琢磨了,改不了了,对吧,人家给你提供的这些吧,咋说呢,足够你用了啊,你比如说我给大家演示一下,现在我就想让我的入口文件去SRC2,这不是src吗?我想让他去SRC2里边找谁呢?就找这个配起点GS,那我得怎么去配置呢?来回来各位啊,在这呢。
06:11
有个pages点击啊,说老师这里边的东西,哎呦呵,我写在哪儿啊,滑到最上方,同学view.comfort费点GS读这个文件是一个可选的配置文件,就是说白了你可不可以不用它,可以你完全可以不用啊啊然后你就使用脚手架默认的那些配置就可以了呗,但是如果你想个性化的定制脚手架,诶,那你就得用这个了,把它复制啊,这是个文件啊,各位放在哪儿呢?一定一定要放在跟package.jason同级的目录下啊,你最好把这些话折叠起来,右键新建走你希望大家不要把一个东西啊理解偏了,可能大家想到这儿了,哎呀,老师mean.gs里边我写过这玩意儿啊,你看没有点con点啊说老师明白了,他俩之间呢,是有关系的同学,他俩之间没啥关系,你这边写的是往view这个构造函数身上的某一个属性里边添加属性,或者修改属性,或者删除属性,明白不?你这个调整是调整什么呢?是调整。
07:11
View这个库在工作的时候到底怎么工作明白不?哎,说的是view的这个,呃,工作相关的东西,那你这个说的是啥呢?各位来你这个说的是啊,没有这个G啊,来这儿重新答一下,这叫做配置view相关的啊,我想调一下颜色G吗?Green是吧?来这儿同学,这个东西是调整脚手架的工作模式的,说白了凭啥面试入口啊,凭啥public下的index就是那个主页面都是在这个里边去调整的,OK,不要把他俩搞混啊,同学,打开这个文件里面写什么,同学你就别猜了,就是你可能说我的编码经验再多,那这个东西你也猜不到,因为规则是人家定的,属性名都是人家定的,对不?各位,哎,我们来这儿查字典来啊说老师,那我今儿晚上听完你这课呀,我把这些都挨个试一遍,同学真没那个必要啊,用的时候现用现查就可以,我在后续的课程当中呢,肯定也涉及到去调整这里边的东西啊,咱慢慢来,同学点这个pages,诶这里边呢,就都是对一些什么入口啊,输出的一些配置来把这一堆复制。
08:11
来到这个里边走,同学你仔细观察一下啊,我给你这折叠起来,你看一下它使用了什么暴露,如果你之前模块化过关的话,同学,这可不是ES6的暴露,这叫common GS的暴露,对不对?各位啊,说老师那不对呀,咱前端人员不都用ES6吗?同学听我这么说啊,你这个view.con.gs,最终V会把这个东西输送给谁呢?输送给webpa,请问各位web是不是基于NOEGS的?那么note JS里面所采用的模块化是哪一种啊?Common JS,所以说同学一句话去形容吧,你所写完的v.con.js那么脚手架会把这里面所有的配置拎出来,跟webpa里边已经写好的那些配置进行一个合并,你比如说人家里边也写了这个pages,人家里边配置的那个入口文件就是src下的mean,那如果你想改,你就把它那个配置再复写一遍就可以了,最后呢,人家拿着你的这个东西,以你的为主,把里边。
09:11
那些默认配置就给替换掉了,同学觉不觉得很巧妙,那个最为核心的配置文件死活不让你碰,你想改我给你个渠道去改,你再写个文件,哎,然后我主动拿着这个文件去跟那个里边你看不见的那个核心的配置文件做一个整合啊,也就是说不会产生什么严重的后果,大不了这文件右键我一删除,各位是不是还采用默认的配置啊?诶,它不会把那个核心的配置给你的,怕你碰坏了。OK,打开这里边的东西,同学,我们用不上这么多啊,我把这些删掉,再把这里的这些呢也删掉,留一个咱练练手啊,各位你看这儿来,为啥public里的index.atml就作为我们的那个主页面,是不是在这配置的呢?是不?各位你看说模板来源啊,你把这些删掉,咱们就测试一个就行,同学,入口也别说配置的入口了,就叫入口是不?各位说老师这不就写完了吗?你这么写就不对了呀,你要这样写同学那就得这样玩了,Src里边你还得创建一个文件夹叫index,里边再写那个点JS明白不,但我们的目标是什么来着,不是这个。
10:11
把它删掉也不是命点GS叫啥叫配奇点JS,那你这能不能改呀,这回就可以改了呀,写上佩齐,OK同学,你信不信,现在再启动它就没问题了,说老师这不还报错呢,这不还不行吗?你得关掉它,哎,重新让它启动一下,各位你听我说啊,这个文件只要你修改了,你一定要重新npm serve,否则不行的,来,我们重新再来一下,走,你看看这能不能启动,肯定是可以的,嗯,稍等。OK,各位启动了呗,你看我改成佩奇了吧,你打开啊,这个效果肯定也是没问题的,在这儿呢,你看是吧,各位所以说可以改,允许你去,你去这个自定义是不?哎这是入口,当然别的都能改,什么public那些都能改,但是一般来说同学咋的,哎,咱就不去改,用默认的就挺好,我写一个mean.js啊,那这块就也得改呗,min.JS然后啊,有些同学呢,他这么玩,说老师啊来你不是min.JS吗?那这样我呀写着这个文件,哎我也写着这些配置,但是我把这注掉,哎说老师我这啥意思呢,就是我给自己啊留条后路,我在这提前把这些东西写好,万一哪一天我要改,我把这注释咔一解开不就得了吗?那我注掉,那之后我没写,那他就用默认的了呗,哎,各位可不是这意思啊,你这么写的意思就是人家拿到了你的page,拿到了你的index,然后发现你里边没有配置任何东西,那就废喽,同学你看一下效果啊,来走,让serve你看一下,现在可就完了啊,不是你想的那样对不对?同学你看他说你这东西不对啊,是不?你这配置项都少东西啊。
11:46
所以说同学要么就别写,写就给他写好了啊,给他写这儿说老师那输出什么的那些东西,同学你没写那就咋的,那就默认还用正常的就可以,但如果说里边你什么都不写,那是不可以的,OK,各位哎,你看这个能调整这个入口,还能调什么呢?再给大家演示演示啊,还能调这个东西,同学就是目前来说啊,来我重新启动一下,让它正常能够运行啊,目前来说呢,我的这个脚手架呢,是有语法检查的啊,语法检查都能检查什么呢?它能检查出来很多你代码不合理的地方,你比如说我写一个不合理的啊各位我到这个命点GS里面,然后呢,我也得关掉,我在下边啊,我写这么一段代码light a等于一同学我命点GS终归是个GS吧,我是不是可以随便写代码,或者这样写,同学,我把这light a呀,给它放在上边,就是我在真正创建,比如实例的时候呀,我这么写,别写A了,写一个person啊,是一个人,人呢有名字,比如说叫做Tom,单引号就行,写一个Tom,人呢还有年龄,写个age 18岁同学,我是不准备好。
12:46
给人了,但是我想问你,Person这个东西我用没用,我没有用,诶这个时候你看同学他就报错了,他说person这个东西诶被分配了一个值,但是你却没有使用,他认为这不行,然后你整个项目就都起不来,所以说同学语法检查是不是好事儿,当然是好事儿,可以把你的代码呢,就是里边不合理的问题都能给你检查出来,但是有些时候同学我们在讲课的时候,经常会出现这种情况,哎,我说同学咱们在这儿呢,先准备一个person啊,然后咱去看一下效果,结果你没用他就报错了啊,或者说呢,在这说来同学们,咱们这样临时啊,咱们模拟一个函数啊,叫做这个aten是吧,咱模拟一下,把里边呢写点东西,一会呢我们去用啊,先在这放着,然后一保存,啪,又报错了。
13:29
对不同学在公司干开发的时候吧,这个语法检查呢,得根据你们公司的这个team leader定啊,你的领导说检查到什么程度那就是什么程度,对吧?每个团队得有标准的,你不能说你写代码的时候啊,从来都不加分号,完了人家那边加分号,要么就都不加,要么就都加,对吧?那咱就说说我不想要这语法检查,那我怎么给它关掉呢?同学你听我说,在我的课堂上,语法检查我会关掉的,如果不关掉的话,接下来讲课的时候我就疯了,我随便写一个变量,我说同学来准备一下,一会儿咱们再用,结果你发现程序起不来,所以说怎么关呢?各位,诶,简单,你先把这个项目给它停掉,还是回到这个字典里边,咱去找有这么一个东西,就在page的下方,叫lit on save lit啥意思呀?就有检查的意思啊,各位应该知道吧,常见的web派里边做那个语法检查的库有什么呀?E lint是不是能做语法检查,还有什么呢?S lint是不是也能做语法检查,还有什么呢?GS hi是不是也能做语法检查?这些东西说老师你说的都是啥?
14:30
哎呀,我说的这些东西都是wepa里的loader,哎,都能进行语法检查的啊,OK,好,来打开这个Li on save同学,你就把这个配置项给它拿过来,回到咱们这个里边啊,找到这个地方,然后注意了啊,和pages是平级的,Pages里边配置啥什么入口啊,模板去哪找啊等等这些东西,所以说不要往这里边写,跟他评级,你来个逗号,写个lit on c同学直译过来啥意思,检查帮你保存的时候,说白了就是保存自动检查,你给它调为false语法检查,恭喜你关闭了啊,写好处是这个叫做关闭语法检查,说老师这回就行了,这回就可以了,你定义了一个没有用的东西,他也不会再给你报什么错误什么警告了,你看一下啊,清掉来重新再启动,你发现就可以启动起来了。
15:20
嗯。慢慢看啊,稍微等会儿。呃,我们平时啊,没有必要就是一遍一遍的关掉再启动,关掉再启动,平时一般来说就是启动一次啊,一直用就可以了,同学你看我确实定义了一个构造函数instant,但是他有说不行吗?没有打开,一切正常,而且你看这同学也没有什么报错对不?哎,这就是view.conflict.gs的使用,当然了它还能调整很多的东西,那我们在这呢,就不做一一的演示了啊,等我们用到的时候直接来到这儿查去改就可以了,是不?各位好,还有一个小细节就是我开始偷偷的呀,给你写笔记了,各位啊,你想脚手架文件这么多,一会儿这个一会儿那个啊,调这个能实现这个功能,写那个能那个功能记不住啊是吧?各位来关掉,我已经偷偷的在给你写笔记了,笔记都在read me里呢,同学,你瞧,我们开始接触脚手架呢,讲的东西我都在这儿给你写了,你看脚手架文件结构分析,看这个结构会看吧?各位啊,这是markdown里的一个,那个树形结构大家得会看啊,以后你公司的文档里面可能会出现这种结构,我。
16:26
说可能啊啊,你看note modus我就不提了,依赖包都在这那呗,什么页签图标啊,这个那个的都在这儿了啊,那再往下呢,就是关于不同版本的view的说明我也给你写在这儿了啊,还有就是v.confident.gs这个配置文件对吧?使用这个确实可以查看这个默认的配置,但是你改是不奏效的,那改怎么办呀,借助这个是不?哎,个性化的定制详情简这然后我希望大家下去呢,你别拿这种那个Vs code的去看这个东西,或者你安插件也行,你看我这有这个来走。你看在这边能形成一个哎,特别好看的这么一个结构,或者说呢,你用一点这个markdown的查看软件也可以啊,给大家推荐一个吧,我用的是谁呢?叫做ta pro啊,我觉得还不错,这儿呢,这儿呢看这单词叫type pro,哎,如果感兴趣的小伙伴呢,自己下载一个,你看在这看这些东西多清晰啊,对不对啊,这缩进可能有问题,一会儿我再调一下啊,OK,行吧,各位,那这一小节呢,我们就停,哎说了这个V有点坑,费点GS去定制你的脚手架同学不要随便调啊,默认的就差不多,好,这小节停。
我来说两句