062_尚硅谷Vue技术_分析脚手架结构

好嘞，各位，咱们呢接着往下聊，在这一小节呢，咱们主要研究一下脚手架里边这些文件呢，都是干嘛的，哪些属于配置，哪些属于代码，那我的代码又在哪写，对吧？各位，那我先这样啊，把刚才呢，咱们开启的这个工程啊给它停一下啊怎么停呢？你按你那个CTRLC就可以，就平时你复制的那个快捷键走，他就会问你了，哎，说是否想停止掉呢？在这儿吧，各位，无论你输入Y还是N，其实它都会停掉的，我们一般什么都不输入，就是再按一遍CTRLC，它就停掉了，OK，把这个关掉，把这个文件夹呢，给它放在这儿，接下来我用Vs code的去打开这个脚手架，咱们来分析它里边的文件，那我就把刚才打开这个呀就关掉了，就是咱们讲那个不是脚手架环境的那个写法了，就关掉了，说老师那不行啊，你当时给我的承诺呢，说得把这些东西放在脚手架里边，它就运行了呀，我们还没有测试咱们的代码能不能行呢，各位别着急啊，我先把脚手架的结构捋清了，再把我的东西放在合适的位置，让他去执行，好吧，来关掉。

把这个呢，给他打开走。这里边的文件啊，各位没你想的那么多，如果你是接触过react脚手架的同学，其实你就知道这里边的东西已经比react脚手架少太多了，是吧？各位来我们先说说这个区域啊，就是绿色框里边的这些配置文件啊，首先第一个同学，哎呀，这都不想说了，是不是GI的忽略文件呢？对吧？哪些文件或者文件夹不想接受GI的管理，请你在这配好，OK，关掉结束再说这个文件同学，它可挺重要的啊，重要归重要，不需要我们往里边写什么东西，你读读它的名字啊，叫做double点点GS干嘛的呢？一句话，Double的控制文件，也就是说我们肯定得涉及到ES6转ES5也肯定得借助这个人去转，就是Bible，那Bible工作的时候有点脾气，有点性格，不是说拿过来直接就能干活，你得配置一下，你得告诉他到底怎么转换，采用什么样的标准，对吧，来打开它这里边的东西呢，不需要我们程序员呢，再去配置什么了，咱们就直接。

用官方写好的这个就可以，但是如果说有些同学比较好奇，诶说老师我就想知道一下这个里边还能写什么规则，那请你参考一下Bible官网，那里边有一套详细的配置，OK，好，我们把这会儿呢就给它关掉了，再说说他俩，诶他俩能一起说同学这都是什么意思呀，只要你打开的工程是一个符合NPM规范的，那么一定会有这个文件叫做包的说明书，对不？各位诶打开一下这里边会配置你这个包叫什么名字，是什么版本，对吧？以及下边的这些东西，你比如说采用的依赖是吧？用的哪些库都在这儿呢？而且看这同学，诶常用的这些命令是不是也在这儿呢？诶如果你学过webpa你就明白，这不就是webpa里边那个短命令吗？也就是说各位，刚才我们执行NPM，然后写一个serve的时候，人家真正执行的其实是哪个命令啊，其实是红色框里边的，你说对吧？哎，舒老师，那他还有build的命令，是的，还有这个是的，简单说说这俩命令是干嘛的？

第一个命令吧，同学，是属于我们开发的过程当中，你去使用这个命令，让人家帮你配置好一个服务器，帮你把东西都弄好了，就是刚才那个效果啊，再说说第二个build build呢，同学就是属于啊，我的代码写完了，我的功能啊开发完了啊，人家后端呀，找我要东西，哎，说小李啊，你把你写的前端代码你给我呀，你得给人家的是点HTML.css还有什么呢？点GS，你要是把一个点view文件给人家后端封了，所以说同学这个B的命令呢，是构建的意思，什么时候执行呢？你听我说啊，各位就是所有的功能你都写完了，最终想把整个工程变成一个浏览器能够认识的东西，那你再执行这个，也就说这是最后的一次编译啊，我们以后也会执行的，再说这个lit同学，这个呢，几乎不用我告诉你是干嘛的啊，如果你执行了这个lit，那就是把你整个代码里边，你所写过的GS，还有这个点view文件全都进行一次语法检查，告诉你写的不对，哪写的不太好。

是吧？哎，一般来说我们很少去做这件事儿，你知道为什么吗？同学，首先Vs code里面有非常好的语法检查插件，第二个就是在开发的时候，很多的时候我们的语法检查是关闭的，只有到最后的时候，哎，我们再把这语法打开，看看哪块有不合理的地方，是吧？哎，平时这个语法检查它总烦你啊，是特别耽误你编码了。OK，各位好，也就是说语法检查吧，得检查，但是得有个度，但是得有一个好的时间点，对不对？各位好，这个呢就说完了，再说说它，它是干嘛的呀？各位lock文件，如果之前NOEGS里边讲那个包管理器的时候，你学的还不错，你知道它是干嘛的，这个东西呢，是包版本控制文件，就什么意思呢？给大家说这么一个事儿吧，你在这儿你看用到了这么一个东西叫做compact data，那这个包是什么版本呀？啊在这儿记录着，那这个包的下载地址呢，啊在这儿呢，说老师，那记住这些东西有什么用啊，等以后你再安装这个东西的时候，它能保证最快的速度给你安装到指定版本，如果没有这个lock文件可能版。

本就锁不住了，什么意思呢？说有一天呀，你又下载它的时候，很有可能你下载回来的就是一个八点几几几的版本了，明白不？这个版本号发生变化了，但是如果这个文件里面锁死了，说诶你就是7.14.4，那么以后无论什么时候你下载它的时候咋的都是这个版本，对吧？哎，就是能锁住一下，一般来说这个文件呢，我们就留着，OK各位好了，把它关掉，还剩下最后一个了，各位什么呀？Read me同学，好像一个成型点的项目都有一个read me对吧？这东西有什么作用啊，就是对整个工程啊进行一个说明，一个描述，你比如说我这是什么什么什么项目啊，你应该如何去使用啊，点了哪个按钮，什么功能都在这儿呢，对不打开，当然view团队呢，在这里边写的呢，是一些呃教程，告诉你这东西怎么用是不是，哎执行哪个命令能怎么的，同学我们把这些东西啊全都删掉，那我们在这写啥呢？诶各位瞧好了，我给你写笔记，涉及到脚手架编程啊同学就有很多需要注意的地方啊，比如。

就我的小总结呀，一些东西我就都给你写在这儿了，OK同学，我们不再局限于这个word文档了，不再局限于它了，哎，我们那些总结就要写到这儿了，一会儿我就要写了，OK，各位好了，配置文件呢，说完了，接下来呢，我们说点重要的人啊来同学，大boss登场了，先说谁呢？Src这里边呢，有两个文件夹，然后呢，还有两个文件，我们先说说粉色框里的两个文件，同学，反正public s RC都得分析两种分析方式啊，第一种呢，不按照代码的执行顺序去分析，直接从上到下这么去分析，还有一种方式呢，就是这么分析，说执行了npm wrong serve之后，他首先找到哪个文件开始运行的呀，然后一点一点给他摸排清楚，反正我觉得第二个比较好，对于初学者来说，好，各位先说说吧，Src里面有一个特别重要的人叫做m.GS之前我就跟大家渗透过这个人了，是不同学的，特别重要，重要到什么程度呢？你听我说，当你执行完了NPM。

Serve这个命令之后，直接就去运行这个meanin.GS来，我给你验证一下各位打开它，它里边的代码同学你全能看懂，但是我不让你看啊，先给它注掉，来，我在这呢，写一个consollo，输出一个666 OK，同学，那就意味着我执行了npm server，它一运行命点GS啥也不干，就输出个666，哎，是的，来瞧效果啊，NPM让serve走，看看效果啊，是不是我们想的那样？稍等，给他点时间啊。好了，OK了吧，哎，有些小伙伴是不是不知道这个Vs code里面怎么开启这个终端呀？啊同学我说一下啊，来你摁你的CTRL，哎，加上ESSC下边那个按键，就是模板字符串那个按键就能开启，那当然如果你改了这个快捷键，那你自己看看你怎么改的，或者在这终端里边有一个新终端行法，同学，这个是基础，你应该一个基本操作你应该会的啊在这呢，同学你可以摁住CTRL键去点它啊，或者说你直接复制过来也行，在这儿就能按CTRL一点就可以了，来走你就打开了吧，T同学，页面上啥也没有对不对，没有就对了啊，而且我告诉你同学view的标都不亮，为啥我跟你讲你把VM那段代码都注掉了，这干嘛呢？是不是创建VM呢？好家伙，你把这段代码都注要了，那它肯定不亮，同学，亮不亮的不重要，嗯，有没有效果不重要，我看我那666出没出来，是不是出来了啊，但你看这啊，多了一个输出，什么waiting for update，什么等待更新的信号，说老师这是什么意思呢？这是脚手架的一个高级功能，就是你只要一改代码，你把666改成888。

然后你按一下CTRLS，你一保存，同学看不看，这刚才闪了一下，那叫重新编译，页面呢也重新刷新了，你瞧888出来了，哎，就如果你有两个显示器的话，你在这写代码，一保存，一扭头，诶那边就有效果了，哎，就这意思，好的同学我已经验证完了，这个mean.gs是一切的开端，如果把这些都注掉，那一切就都凉了，是那意思不好，把这888呢给它删掉，把这一堆呢再给你解开好了保存，你看我一保存这就重新编译啊说老师那这回这回就又回到最初的样子了呗，本来不就是这样了吗？好了，回来继续分析，把它呢隐藏掉，来同学分析这里边的文件，每一行咱们都要过一遍，首先看第一行在干嘛呢？这样吧，我先给大家写这么一个注释，叫做该文件是整个项目的入口文件，诶，一定对这个词有所理解啊，入口文件好，说说这行在干嘛呢？第五行这叫引入流，同学，我觉得这个也好理解吧，你用什么框架呢？老师，我用view。

那就引入view呗，之前你得怎么引入？哎呀，之前我得在HTML文件里面通过script的标签引入we部的JS，这回不用了，哥们儿ES6的引入语法直接走起是不？哎，可能有些同学说，老师啊，你没下载这个东西呢，你没有执行这个代码啊，NP mi view啊啊同学，不用我执行了，那脚手架弱智到这种程度吗？他就不能帮我安装一下吗？哎，是吧，各位肯定是帮你安装完了，说老师在哪呢？那不用说了呀，肯定在这里呢，对不对？同学，你看看脚手架为了能把你服务的明明白白的用了多少的第三方库啊啊说老师我一个一个看一下，你去看吧，啊这虎狼之词，来，同学走这啊，那看这行干嘛吧，引入谁呢？APP，同学APP是干嘛的，大家应该明白吧？来，我把这还打开啊，走，嗯，写好处是叫做引入APP组件，然后补一句，它是所有组件的副组件，理解理解啊同学APP是不是在这呢下。

主是不是有一堆组件都跟着他混的呀，但是他也得跟着一个人混谁呢？就是咱说那VM之前说的嘛，一人之下万人之上，OK好了，各位这行是干嘛的你应该知道，诶叫做关闭VI的生产提示是吧？各位，那你说下边十二十三十四在干嘛的呢呀，创建view实例对象，诶实例对象谁呢？VM是这意思，不但是同学你仔细看啊，十二十三十四里边有一行你看不懂，咱没讲过谁呢？13行，嘿，同学你看是吧？诶，Render完了又写个H好家伙箭头，哎呦，又把APP放进去，这在干嘛呢？各位你听我说，就13行这个代码，我们得单独开一小节跟大家去聊这事儿啊，就是说不能在这直接说，同学在这直接说吧，也不是不行，就是咱15分钟可能都说不完的，然后结果就造成的，刚开始分析脚手架，哎呀，一下子在命点GS。

这就折掉了，分析了15分钟，13行回来之后呢，哎呀，都不知道应该分析哪了，所以说同学咱这样啊，我给你写这么一个注释，叫做下面这行代码，一会儿解释，诶，然后我先跟你说说它完成了什么功能，完成了这个功能，什么功能呢？叫做将APP组件放入容器中，那容器在哪呢？来往下看，同学，这会你熟悉了啊十五行你要说你不熟悉，你自己弹自己十个脑瓜崩各位刀了佛棒呢，咱没讲过这干嘛呢？这不容器的ID吗？啊同学，但是他写的是不是感觉看起来不是那么舒服，那你说咱们还有另外一个写法怎么写来着，删掉这块配置什么呢？同学，是不是叫做EL啊哎，然后写上井号，谁APP人家不叫root了，叫什么呢？APP说老师你这么改那能行吗？肯定行啊，各位来打开咱们那个终端，是不是目前看应该是正常的呀，哎，你回到这儿呢，嗯，也没啥问题，但如果你写错了，各位你比如说你没有。

配着这个EL你也没有写Dollar mount，那你看一下吧，东西肯定丢是不？诶好了，回来同学，那就这么写着呗，是不啊，第十五行各位你先别纠结，一会儿我们会仔细说啊，我知道大家有疑问，说老师这个APP引入了，你也没有注册这个组件呢，是吧？老师我也没有见过你写这个东西啊，APP这个什么组件标签呢？那怎么它就有效的呢？一会儿我们再说，好吧，各位就整个分析过程当中，同学就是第十五行你先放一放，别的我跟你讲都是手拿把掐，特别简单啊，来把这个M呢，就给它关掉，诶同学我先不关。

我问个问题啊，如果说你自己在这儿分析呢，好吧，比如说比如是一个新出来的框架，没有培训机构，没有老师讲这东西呢，你自己琢磨到这儿的，你觉得接下来你应该看看哪儿呢。是吧？啊，来同学我说说啊，所有绿色框里的东西啊，其实你都不应该再关心了，你觉得呢？因为都能看得懂，唯独这一行咱说一会儿再说，你说你得看看哪儿，我觉得你得看看这儿了，对不对？顺着这个来吗？APP对不对？看看这个组件里面写的是什么？来把m.JS给它关掉，打开谁呢？app.view同学，只要这个文件是点view结尾的，你就不要慌，我们都会写对不？哎，说老师里边的东西可不少啊，多简单呀，就这么点是吧？各位来往上看，这是APP的结构，这呢交互，这呢样式呗，好，打开这个结构，我们看一下，同学，你看第三行这儿，它是不是用到了一个外部的图片呀，你看那个地址，各位来叫做当前目录下的asets下的logo.png那在哪呢？不就在这儿呢吗？来看这是吧，Asets说一下同学啊，就是这个文件夹吧，经常在前端的项目里面出现，那这个文件夹里边一般放什么呢？同学你听我说放静态资源，啥叫静态资。

对员，你就比如说举个例子，同学就有这么一个网站的logo图，那也别举例子了，它就是logo图，你打开是不是view的logo，为啥把这logo放在这儿，那是因为老张老李老王老刘他们在写组件的时候，可能都要用到这个图片，哎，那就放在静态资源里吧，往这一放，供大家使用，一般这里边放一些什么PNG啊，什么视频啊等等这些东西，OK好了，所以说这个文件夹啊，挺好理解的，不难是吧，静态资源好了，给它关掉，然后呢，继续分析咱们的APP，各位是不是引入了一个外部的图片啊，啊，他用一会咱也用是吧，说老师我看看里边的他这些东西，那你看看吧，引入什么？诶，读一读，引入一个hello word，而且注意各位，你看看人家这首字母是是大写的呀，第二个单词首字母是不是大写，这是比较大驼峰啊同学引入了一个组件在哪呢？

在这呢，Components下的hello word.view you同学发现一个文件夹叫components components什么意思？叫组件门是吧？Component叫组件加个S，那就是复数呗。同学一句话，所有程序员写出来的组件呀，都往这里放，唯独有一个人不往这里放，谁呢？app.u为什么呢？因为他是众多组件中的王者，那王者就得有点王者的脾气，所以说他不往这里放啊各位，哎，这里边放的都是弟弟啊，大哥呢，在外边呢？是这意思，不打开里边有个hello点同学，那咱能不能这样？各位，咱又不是没写过点，咱又不是没写过这种其他的组件，那你说接下来你知道我要干嘛了啊，完成我的承诺，来吧，各位走起啊，那这样，同学，来来来来来，先把这项目停掉，行吧，先停掉，要不一会儿我粘文件来回动，它一直在这编译，我这电脑太热了啊，我怕这录屏卡退了来给他停掉，哎，这回他就消停了，好了，各位回到这儿是吧，诶不是。

这是这个基础，这是吧，来吧，慢慢来啊各位找到单文件组件，咱是不是写过app.view来摁住回到这。放在哪啊？同学，别放components里啊，放src里边，他肯定会问你是否替换，那必须替换，OK，替换完了吧，你看同学这些我就不一点点写了，那你说这些要一点点写，那上上一节咱干嘛呢？是不？各位好给它关掉，那接下来再往下你的school view student点，你说你都得怎么办呀，来摁住放哪放哪放component里是不？各位那你说这hello word还要吗？哎，说老师，哎呀哇，这hello word哎，我天同学他能咋的，他不就写了一些比较多的这个结构和样式吗？是不？还给你时间咱也能写出来是不是？来给他关掉啊，删掉啊，来留下这两个，这里边的东西同学快速回顾一下呗，是吧，学校里边展示学校名完了啥地址是不？哎，这什么点我提示学校名，这些就不说了，OK student也说过了是吧，里边甚至连那个样式都没有，我这可是写样式的啊，这个整个学校那个组件啊，背景都是橙色的，好，我把它关掉，同学，组件是不是准备好了，APP是不是也是咱自己的了，但是我告诉你有个地方不对，哪不对，你这路径不对。

你自己看是不是路径不对，嗯，哪是跟APP平级的呀，啊说老师对哈，应该是在这里边对呀，那所以说来同学咋的，当前目录下的谁components下的谁school，那同理，你这块也得给他删一下，当前目录下的components下的谁呢？Student同学点you呢，我们就直接省略了，好吧，写不写都行，为什么要写呢？OKAPP啊，就准备好了，但同学这个图片咱这么没用上啊，那咱用用呗，在哪用呢？想在哪用就在哪用，那我就在这用用吧，直接写一个image标签，然后是当前目录下的asets下的logo.png这呢，随便给一个就叫做logo对吧？Out属性嘛。嗯，好了，把它关掉，那同学你看没啥东西了。ES说完了，Components说完了，APP说完了，Mean呢说完了，唯独留下一行，是不是好了，关掉，同学接下来说哪啊，哎，告诉你啊，说这儿各位你觉不觉得你这个容器是有了，但是页面在哪呢呀，同学啊，得是一个HTML里边完了有一个divv APP。

是不，各位，但是问题直到现在我都没有看到那个atml文件在哪儿，在哪儿呢？各位在这儿呢？打开public同学这个小东西呢，不再解释了，它是干什么的，网站的页签图标，哎，那同学我们要做的事呢，那你也知道是吧？摁住咱们上硅谷的页签图标，然后放到这儿，松手是不是给它替换掉就可以了呀？好了，关掉，再看看这个同学，这个HTML可非常重要了，它就是整个应用的界面，你可能会有一个疑问啊，老师只有一个界面呀，那这功能可太单一了，对吧？人家我们之前做那功能可高级了呢，对不对，有好多页面来回来回跳，同学，你等我讲到路由的时候，你就不会再觉得多个页面来回跳那种项目好了，哎，以后我们开发的都是单页面应用，诶说老师就是非常low的那个应用呗，同学，单页面可不意味着它功能很单一，OK好了，打开它来瞧瞧吧，这里边的东西啊，有一些呢，咱们能看得懂，有一些呢咱看不懂，我就挨个给大家说说吧，同学，这些东西不说了，你懂说说这个这。

啥意思呢？说一下这是针对IE浏览器的一个特殊配置，同学你要知道这个世界上是有一个浏览器叫IE浏览器的，是不是？哎，好了，那这么配置的含义是什么呢？含义是让这个IE浏览器以最高的渲染级别，然后呢，渲染页面，说老师这什么意思呢？就是他考虑到啊，有可能用户是用IE打开的你这个view项目，它防止产生奇奇怪怪的问题，加上这一行IE就明白了，说哎哟，那我知道了，现在我得以最高级别的渲染形式去渲染这个页面了，是吧？哎，其实同学咋说呢？这个如果你在IE8这个浏览器里啊，你打开项目其实是不可以的，对吧？其实同学你记不记得在view官网上啊，人家在这个第一个开篇的位置，你找到这个教程，这里边是不是有个安装啊，在这有一个兼容性，同学你读vu不支持IE8。

及以下版本，哎，所以说同学加上这句话吧，怎么讲也不能解决什么实质上的问题啊好了，来再说这个，走各位，这是什么呢？简单说啊，不知道各位呢，学没学过移动端网页开发，如果学过你就知道了啊，我告诉你是干嘛的，叫做开启这个移动端的理想视口啊同学，这儿的概念非常多啊，咱在这儿不做展开的介绍，如果你有兴趣的话，你可以学一下咱们上硅谷的移动端教程，OK，诶，里边有一个什么理想视口啊，还有什么这个布局视口等等那些东西啊，在这反正就是开启理想视口了，哎，来走再说这个是干嘛的，同学，Link real等于icon什么意思呢？图标啊，也就是说各位这个偏爱图标啊，你得用它，那怎么用它呢？其实就是在这儿写上这么一句话，但是你看后边同学他写路径的时候啊，诶有点让人晕，你发现没？同学我要这么写你就懂了，当前目录下的，来，把这些玩意儿全都给它删掉，我要这么写你就懂了，当前目录下的平A图标或者叫页签图标。

同学，我这么写你是不是就理解了，但是人家没这么写，人家是这么写的，来啊，间括号百分号等于base URL空格百分号，再哎回来，同学这啥意思呢？说一下各位啊，就是你的这个项目如果开发完了，部署到服务器上的时候啊，容易产生各种各样奇奇怪怪路径的错误，那么没U脚手架是这样设计的，他说你在这个HTML文件里面，如果你想引入文件，你别这么写了，什么点杠，是不是什么点点杠，还有什么杠，这些东西你都不要写了，你就用这个base URL，那base URL指的是哪个路径呢？各位指的就是public所在的路径，说的再直白点，如果你在这个绿色的HTML里边，你想引入里边的东西，尽可能不要写什么点杠，不要写什么杠，直接写这个就代表我刚才写的那个点杠了，人家底层呢是有一定处理的，OK，好了，这写好一个注释叫做配置液签的。

图标，好，再说这个同学这啥意思呀？嗯，开头大家都知道配置网页的那个标题呗，但是里边的东西是什么意思呢？来，我写着你琢磨琢磨啊，叫做配置网页的标题，说老师里边这我还是没看懂啊，说一下吧，各位，里边它是不是写了这么一长串啊，这么一长串的功能就是他默默的来到package.jason当中，诶，去找这个name，就把这个东西就作为网站的那个标题了，说老师他咋办到的呢？同学，如果你学过咱们上硅谷的webpa教程，你对这个东西应该了解是不？这是webpa里边的一个插件完成的功能，你只要这么写，他就会默默的来到这儿去找，对不？各位，诶在这儿如果说你webpa呢，可能不怎么熟，同学在这儿就直接用就可以了，OK，不用去过分的关注，再看这是什么意思，各位写了一个no script。

同学，这个我们认识script，但是no script是什么意思呢？哎，非常简单，各位，就是如果你的浏览器不支持GS，那么第17行就会出现到页面上啊，也就是说浏览器要是支持GS的话，同学，你这个no script的标签里边的元素是不渲染的，OK来写，好处是叫做当浏览器不支持GS时，然后呢，Noscript标签中的元素就会被渲染来，我们测试一下啊，各位咱就把这东西啊给它复制出来，然后呢，我重新给你写一个这个文件夹啊，咱都不在那里边，跟脚手架有什么掺合啊，然后呢，我用Vs code呢，打开它走你。

来，然后呢，我新建一个demo.html，里边呢，随便写点东西啊，比如说写一个H1啊，叫做你好啊，然后开始我写noscript的标签，然后在这里边呢，同学我把东西啊给你删一下，嗯，删一下再删，里边写个啥呢？写这个东西啊叫做不好意思，你的浏览器啊，不支持GS啊，有点旧了，下载一个新的吧，来看效果啊，打开我的浏览器肯定支持JS啊，既然支持GS那个元素就不被渲染，说老师那怎么能不支持JS呢？简单来到这儿找到设置，然后往下找，有一个我看看啊，叫做网站设置啊，这里边呢，有一个叫做这个。Javascript默认肯定是允许的来，不允许，接下来你看好了啊，刷新页面，同学看是不是出来了呀，哎，就是这么一个功能，但是把同学话说回来了啊，你说现在你能找到不支持GS浏览器吗？好像早就死掉了，对吧？各位，哎，OK，所以说这会儿呢，了解知道一下就行。同学呀，千呼万唤始出来，终于找到了我们想看的那个人，谁呀？ID为APP的div同学这儿注释只写两个字，容器是不？所以说同学从理论上来讲啊，就这些东西你删吧删吧都行，唯独谁不能删呢？就是这个，你说是不？各位，哎，OK，给它关掉，那这回同学你觉不觉得整个流程就跑通了呀？我完整的给大家复述一遍，你执行了npm wrong这个命令，叫做serve，随后来到src里面找到了mid.gs引入了view，然后呢，引入了APP对吧，然后呢，关掉了这个。

提示哎等等这些好同学，APP是不是得就位呀，于是乎找到了APP，发现里边用到了school和student，于是乎把这里边的代码就也执行了，对不对，就是school还有student都执行了，执行最终呢，汇总到了APP这个里面，然后这个里边呢，还引入了APP，而且还借助这个我们并不能看得懂的一行代码，反正就把这APP组件啊就放入容器中了，对不？各位哎，然后就找到哪了呢？这个里边的index atl诶就放到这个里面了，可能呢，大家会有一些疑问啊，说老师第一个疑问，凭啥min就是入口文件，那我告诉你啊，脚手架配置好的，你可能说老师呢，凭什么这个m.GS我都没有在这个页面里边引入它，还能找到这个容器呢？那我再告诉你啊，脚手架配置好的啊，所以说同学来打开这么多的文件，激动人心的时刻到了，接下来我们执行一下，看看我们的组件能否正确的运行呢？Npm brown，然后呢？

ERVE1走，启动一下。OK，正常启动了，来，那我们按住CTRL打开一下，看一下效果啊同学你看我们之前写的组件已经完美的运行了，对吧？各位来打开控制台，他也没有什么错误，借助V的开发者工具来看呢，同学，这是谁，VM这是谁APP，这是school，这是student，而且里边你看都有自己的数据，对吧？各位好，回来，那么各位也做到我这一步，这里边还有一些坑，还有很多细节上的问题，我们没有说，在下一小节呢，我们去说包括谁呢？包括这个东西，这个render到底是什么意思，好，这一小节呢，我们停。