00:00
好，那接下来呢，我们先说在咱们的项目当中几个重要的文件啊，在咱们的前端的项目当中啊，有几个重要文件，12344个，这四个重要的文件呢，分别是一入口HTML，这个入口HTML呢，是我们单页应用当中的唯一的一个HTM文件，前面我给大家讲锚点，讲路由的时候，曾经给大家提到过一个单页应用的概念，那什么叫单页应用，比如说啊，这个百度百科里面，你找到一个知识点，或者是找到一个人物的介绍，或找到一个这个电影的介绍啊等等，就是百科对吧的时候你会发现针对于这个介绍，针对于这个知识点，针对于这个名词的介绍，它只有一页，然后我们是通过锚点在这一页导航来导航去，所以呢，我们的单页应用的核心其实就是什么呀，就最本质的就是什么呀，就一个H跳到页面，而我们的路由其实它的本质。
01:01
也是锚点嘛，使用锚点在我们整个的应用程序的内部切换来切换去，只不过我们不是把所有的内容事先写好在这一个页面当中的，我们呢，是把所有的内容呢，以view文件的形式，以模板文件的形式先创建出来，然后未来呢，我们会结合一系列的脚本啊，然后在这个啊核心的这个单页的基础上呢，用这些脚本呢，把这些模板呢，动态的加载到这个。这个我不知道大家能不能理解哈，好，所以呢，这个其实就是我们的唯一的单页了啊，我再说一遍，这个inex HTML呢，是我们项目的唯一的单页，那我们项目当中的所有的内容呢，都会依赖这些脚本的运行，然后呢，把所有的或者是把必要的view文件加载到当前的单页中，所以呢，这个是我们的inex，好，那接下来呢，我们就来看一下我们项目当中的inex是什么。还在我们的public这个目录下有一个呢，叫inex HTML的文件，那么大家看这个里面呢，它会有一个。
02:10
就是比如说这块吧，叫feel啊叫FAIO.ico这个呢，其实就是一个图标了。就是上面这个图标了啊，然后呢，你会发现我打开这个网页源代码的时候呢，其实它翻译过来呢，就是这个。就是杠favorite I扣点，然后呢。这个是一个动态的路径，它翻译过来就是杠啊好，然后这个是什么呢。这个是我们的网页的标题，那你会发现在咱们这页面当中，我右键看到的就是上荣宝管理平台啊，这个就是我们网页的标题了，好，那你会发现在web pack con.name这个地方啊，它实际上是取了一个动态的数据啊，好，这个动态的数据呢，是在我们项目当中的其他的配置文件当中啊，配置的一会我们再说一下在哪配的，总之是从这些配置文件当中读取出来的，最后啊，运行起来之后呢，它就变成这样了，上升到管理平台，然后这块呢，是这个小图标。
03:19
对吧，所以这就是我们的一个单页嘛，啊，然后接下来呢，这个地方有一个叫做ID等于APP的一个div，你会发现这个地方呢，我们确实是有一个ID等于APP的div，对吧？就是它，然后再接下来呢，你会发现它会有一个叫做field files啊，自动构建的文件会被自动的注入到这个里面，那什么叫自动构建的文件呢？就是整个我们应用程序在运行起来之后啊，它会动态的生成一个脚本，这个脚本呢，就是app.js啊，还包括一些其他的辅助的一些JS啊好，那么这些JS动态生成之后呢，在我们项目运行当中运行出来之后呢，它会被自动的嵌入到我们这个入口的HTML文件的这个位置，也就是说嵌入到这个div ID等于APP的这样的一个div的下面，那所以你会看到我们这个单页呢，就是这样的一个结构了，是吧？啊这个是我们的。
04:19
登录一下啊，我们再点进来之后，看一下我们的首页面是不是这样的一个结构。你看和刚才其实是一样的结构，是一模一样的结构，其实就是它。就是它啊，然后接下来呢，我们再来看一下我们昨天做的积分等级管理的积分列表页，是不是这样的一个结构。是不是还是他呀，一模一样，没有任何变化，我们再来看一下我们新增积分等级是不是这样的一个结构。是不是依然是他呀？啊，哎，那有同学就疑惑了，那其他的内容呢？其他的内容是怎么展示出来的？其他的内容是通过脚本的形式，动态的渲染出来的，动态的渲染出来的，所以无论是哪个页面，你是表单页，还是列表页，还是首页面，还是这个登录页，它实际上本质都是谁呀，都是这个HT。
05:20
所有的其他的内容都是由嵌入到这个地方的脚本结合着整个HTML的架构自动生成出来的，那么脚本是哪个脚本？就是我们看到的这个脚本。明白吧，啊，所以这个其实就是核心的脚本了，这个里面所有的页面当中的内容，无论是登录页还是首页，还是列表页，还是表单页，都是由这个脚本自动的动态的渲染出来，计算出来的啊，所以这个是我们应用程序的一个单页入口，唯一的一个HTML，这可以理解吧，嗯。
我来说两句