day08/上午/150-尚硅谷-尚融宝-前端程序的入口脚本-main.js

好，接下来呢，我们看完刚才所说的这个第一个文件入口HTML之后，我们再来看一下入口的JS脚本，那我们知道单凭我们的HTML是根本就没有办法展示出一个非常丰富的动态的页面的，它一定是有脚本的存在的，那么它的脚本在哪？它的核心的脚本就是它，那么这个核心的脚本它的路径是什么？叫static。这点这。Static在哪？有吗？没有是不是啊好，他里面有吗？没有是不是src里面有吗。没有是不是，哎，那static在哪？Static动态生成的啊，就是目前为止我们是开发形式的啊，运行启动，所以呢，这个static呢，它是动态的生成到我们的，你可以把它理解为动态的生成的临时文件啊，它并不是我们编写的文件，它是由我们编写的这些。

JS文件，再加上这些什么HTML文件，再加上这些view文件。总之他们最终。被。解析到了一起，被转码到了一起，然后最终生成了一个临时的这么一个app.js文件啊，它是核心啊，它是辅助啊，我们就说核心生成了这么一个ap.js文件，然后呢，被嵌入到了这个地方，所以这个文件实际上。它是动态的，根据所有的src里面的这些内容自动生成的，明白吧，啊好，那这个呢，就是我们的。JS-app.js这个文件，当然未来如果我们做这个项目发布的时候，那么我们就会生成一些精彩的文件，就不会说发布的时候，然后在生产环境下，每次都动态生成它，那样的话效率就比较低了，是不是啊，所以现在呢，我们在开发环境的时候呢，每一次运行的时候，这个都是动态生成一下，然后自动嵌入到这个位置啊。

好，这个是我们的最后生成的JS，那我们最后生成的app.js它的最原始的那个JS文件是什么呢？它一定有原型对吧，才能产生最后一个结果，所以它原型是什么呢？就是这个闷点GS啊，就是这个闷点GS，那我们来看一下这个闷点GS它在哪。他在我们的。S2下面有一个叫闷点G的，我们把它打开。好打开之后呢，你会发现这个JS里面呢，实际上它没有写任何业务逻辑，它就是一顿import。Port是什么意思，是不是就引入一些核心的功能模块啊，那也就是说在我们这个项目当中，我们你你要干嘛，你要做什么功能，你是不是得把所有的功能先都impport进来呀，所以呢，你看一下我们后端的程序啊，后端的程序我们要干嘛，我们是不是要做一个基于spring cloud的，基于spring的spring cloud项目，然后要有数据库的增长改查呀，所以在这个后面的S文件当中，我们是不是就一顿引，先先引什么，先引spring cloud，再引spring cloud，阿里巴巴再引my class，也就是说在这个文件当中，我们先把我项目当中所有需要用到的核心功能我全都引进来。

然后我后面才能开始着手开发，明白哈，好，那么我们前端的这个闷点GS就是做这件事情的，首先先把我项目当中的所有的核心功能全都引进来啊，比如说我项目的是六项。啊，比如说我项目要有一些通用的这个CSS样式的设置啊，比如说我的项目呢，要用到element UI这个组件啊，Element u它也有CSS样式啊，也要引进来，Element UI呢，它还有国际化的一些配置也要引进来，然后呢，我自己呢，也要给我的项目呢定义一些个性化的样式，因为element UI毕竟它这个样式的基础上有一些细节，是不是我们还是需要自己调整一下的，好，那我们自己定义一些样式，然后接下来呢，我呢在咱们这个项目当中呢，还要有就是刚才咱们提到的组件，就是上面这些都是样式啊，脚本啊，核心功能啊，那么我呢，还要创建组件，组件，组件是什么意思来着，是不是就是刚才说到了最外层的组件。

套子组件，子组件，再套子组件呀，所以整个组件是一颗由组件树构成的这么一个体系，一个系统吧，那么你至少是不是要有一个根组件呀，啊，也就是最外层的这个组件，或者是用这张图来表示是这个根组件呀，你得先把根组件创建出来吧，好，这根组件是什么？就是这个APP，或者是看我的代码就是这个APP。

明白吧，这是我们的跟组件啊，好，然后接下来呢，这个，嗯，这个对于大家来说比较难，我们不会深入介绍，但我想简单的跟大家说一下是什么，你可以把它理解为我们后端的三。啊，因为前端我们做开发的时候也是需要存储到啊，存储一些数据的啊，所以呢，前端存储数据的话，它有啊很多位置，比如说存到cookie里啊，存到local storage这里等等等等啊那么它主要做存储的工具呢，就是store这个东西，所以你可以把它理解为这个就是存储这些本地信息的这样的一个工具吧，啊所以这个是store，然后接下来呢，就是那这个store在哪。这个store呢，在我们的这个地方看见了吧，啊，所以它引的呢，就是这个store这个模块啊，当然它引的是in JS，就里面的in JS好，然后这个APP在哪，这个APP就是他啊点它是一个跟组件扩展名是嘛，然后这个大家都知道，就是昨天我们的这个路由。

啊，所以这个呢，就是它引入的一些功能，然后所以这个地方呢，我们写一下吧，这个叫跟组件。然后呢，这个叫前原信息存储工具啊，然后这个呢，叫路由模块，好，所以这是这三个，然后接下来呢，这个。Echo其实就是昨天我们大家说的这个图标了，是不是啊，就小图标，它扩展一些图标，就是图标，图标模块permission这个呢？是啊，角色权限控制模块，当然在咱们这个项目当中，我们就不去整合这个前端的角色和权限了啊，因为挺复杂的，不比我们后端去整合spring security。

嗯，简单对于前端的同学来说也是一样的，在前端整合这个东西呢，也要学习很多基础性的知识，所以呢，大家就了解到它是前端的去做框架的权限处理，角色处理的这么一个模块就行了，当然这个模块是是就是这个平台的开发人员，人家自己在这里面开发的啊，并不是说哪个地方的现成的一个东西，比如说像I的UI呀，对吧，View啊，都是官网发布的现成，咱们直接安装一就行了，这个不是啊，这个是这个平台，就是我们所用的vivoin templ这个这个开发的团队，他们自己呢，在这个里面开发的一套角色权限控制系统啊，这个大家了解就行了，我们不会对他做深入的研究，角色权限控制系统，然后这个呢是。

扩展图标系统。明白啊，然后呢。这个叫全局CSS啊，因为前面都写了规模家写一下全局CSS样式定律对吧，然后这块是什么，这一大堆都是element UI。好，这是什么，这是基础。然后这是什么？这当然是核心本身了。这就是view啊，其实写和不写都是一个意思，好，所以这几个部分的内容呢，大家就了解，了解了之后呢，那么在这个地方它呢，就是。

呃，设置了一些就是环境吧，那这个环境就是如果它是一个生产环境的话，那么呢，就呃。就是什么连接一些什么Mo平台啊，然后呢，呃，这块他还写了，如果你不想去使用mark server，就是咱们昨天说的那个模拟接口，它本地的那个模拟接口啊，然后you want to use Mo JS for Mo API you can Mo X HR，总之整个这段代码是和什么相关的呢？是和前端的模拟接口服务器相相关的一个配置，所以那我们就可以忽略它，因为模拟接口服务器这块我们也不去学习啊，就比如说哪个是模拟接口务器完成的内容呢？就比如说这登录功能就是模拟接口服务器完成的，比如说这个退出功能也是模拟接口服务器完成的啊，比如说它这个里面的例子表格。

也是模拟接口服务器完成的，只不过昨昨天我们只针对登录和退出做了什么呀，做了修改，而针对这个表格我们没有做这个API的那个改造，对不对，所以表格目前为止它连不上模拟接口服务器了啊，如果你想连的话，你可以自己改造一下，这块不是我们的重点，所以这块呢，都是模拟接口服务器完成的，那这块呢，我们就了解一下就可以了啊。好。那我们可以跨过去了，然后这块就是前面我们不是引入了一些模块嘛，比如说element UI模块，比如说没有模块啊，引进来之后呢，他们还各自为政呢，就是不能够很好的融合在一起。啊，我们需要呢，让我们的element UI和view很好的融合到一起去，能够更方便的使用，所以呢，我们这个地方把element UI挂载到view当中啊，所以这块是view，这块是element UI，我们通过view.use这个方法把element UI挂载到view当中之后，就能够如何去使用element UI了呢？比如说昨天我们写的这些代码哈，Views里面。

然后呢，你会看到这个类里面，类里面呢，我们是不是在这个地方直接写了一个this this是什么，This是不是view的上下文，就是我当前的这个view文件，我当前这个view文件，我导出的这个view模块吧，啊，它是它的一个上下文对象，然后。在他这个上下文对象当中，我是不是直接可以用点Dollar confirm的方式去调用element UI里面的一些组件呀，那也就意味着我现在的element UI里面的组件是不是和我这个this，也就是view融为一体了？

啊，那它是怎么融为一体的，它是这样做。是这样做的，明白这个意思吧，啊，这样的话呢，就叫做在view当中挂载MT，当然了，因为我们这个是一个NTM项目啊，我们在引view的时候呢，我们也是是import的形式引的in element UI的时候也是import的形式引的，所以我们把它俩呢，把它俩挂载到一起啊，这个集成到一起的时候也要用这个啊，我们为这个啊，就是NPM项目的方式啊，就要用这种方式，那之前我们在学啊，View也好学这个。我们的element UI也好，那你会发现呢，我们实际上是使用这种方式引入的，用对吧，最简单的脚本的形式引入的，同时呢，我们在学这个element UI的时候也是一样的。

看这综合案例啊，你看我们也是需要的啊，也是需要view的啊，然后呢，就是view也是需要element UI的，所以说这是element UI的件，那我们是通过这种方式引的啊，所以那么你要是通过这种脚本的方式引的话呢，那么后面这个使用的时候呢，就是通过比如说像这种方式用啊，然后那你这个里面呢。你就没有办法写那个什么啊，呃，就是更高级的一些功能了，比如说哪一部分是更高级的功能了，比如说写这个模板的形式啊，像像这种root pro。我们这模板呢，就就只能这样定义，你不能定义成点view文件，因为你通过这种形式in view的话呢，在当前的这个上下文环境当中，是没有办法创建这种点view文件，它根本就不支持，所以这个上下文环境当中，我们只能这样写，只能这样写，所以这种引入的方式呢，它是有一定的局限性的，明白哈，所以为了更方便的让我们的这个view啊，View router以及element UI这些功能发挥他们的最大的作用，对吧，完成他们的最强大的功能，我们要用他们的啊，最这个合适的使用方式就是什么呀，就是这种NPM项目的方式啊，这种NPM项目的方式呢，在创建模板的时候，你就可以用这种点六的形式，那么同样引入的方式就不是这种了啊，那你就换成了，就换成了这种了，对不对，然后换成了。

换成了这种了，明白吧，啊，所以其实这个是两种view文件，或者是两种view项目的创建方式，一种是传统的方式啊，通过这样一种呢，是NPM的方式啊，然后呢，有这个有这个package对吧。有这个有这个package啊，Package里面会定义依赖，然后呢，有这些main文件，慢文件里面呢，会port的模块啊，所以这个是两种引入的方式啊，然后接下来呢，我们再来看这个慢点还是它啊。

写到最后的时候，你发现诶。他创建了一个利对象，对不对啊。之前我们在学view的时候呢，都会有一个就是view对象的一个创建过程啊，你看之前我们在写这个view例子的时候，上来第一个例子是不是说你要用view先new一个view对象啊，啊，包括后面最后一个例子。综合案例，你是不是你要用view，你得new一个view对象啊，然后这个综合案例里面，就在这个页面当中可以渲染出内容，对不对？嗯，好，那昨天我们写代码的时候，你会发现我们在写两个这个页面的时候，Views啊，里面有类似点view，有phone.view我们点进去，那么这个类view里面我们new view了吗？没有，哎，就导出一个模块，我们之前new的那个view哪去了？不是说这些东西必须得写，得写在view对象里面吗？是不是？你看哈，那之前我们写的这些这些东西都得写在view对象里啊，你怎么也得先new一个view啊，但是昨天咱们没有没有view，只导出了模块，所以那总得有一个view。

来把这个模块导进去，那那个view在哪，那个在这。明白这个意思吧，这个就是我们项目当中的那个核心的view对象啊，然后接下来呢，在这个核心的view对象里面呢，它是不是指定了它要渲染的节点呢？它要渲染的节点是什么？是Dollar APP，那么这个Dollar APP是什么，我们来看是不是就是刚才我们public里面的这个index还是TL？ID等于APP啊，所以呢，在这个地方，它要渲染的节点就是它。

明白吧，所以它是我们应用程序最外层，最外层的那个div，所有的页面，包括登录页，包括主页面，包括列表页，包括模，这个模，呃，这个表单页，所有所有的页面其实都是生成在这个。最外层的核心的div里面的啊，然后呢，由谁来渲染，由这个view对象来渲染好，那么我们呢，就给这个view对象去挂载我们的路由啊，我们学路由的时候，大家知道你看我们学路由。入票啊有。我们前面是不是定义了一个new view啊，然后你怎么把路由和这个new view结合起来，是不是挂载了一个路由对象啊，对吧？啊，这样的话我们页面当中就可以用路由了，那你再来看一下我们刚才这个分析的这个。

慢点，JS是不是挂载了一个路由对象啊，那这个路由对象哪来的呀？是在这个路由模块中。定义出来的啊，那这个路由模块就是昨天我们最开始着重改造的这个路由rootr啊，就是它因为这个模块呢，就被以这种方式引进来了，明白哈，好，我们来看一下这个JS最终。它是不是创建了一个root对象，然后导出了这个root对象啊，所以最终的这个root对象他用create root的方式啊，New一个route，最终这个router对象实际上呢，就以这个root模块的形式导出来，然后以root模块的形式出现在这再以router模块的式被挂载到view当中，所以跟咱们一开始学的这个。啊，View的这个，呃，路由的这个使用方式啊，就对上号了，对不对啊，所以这就是路由了。

啊，然后接下来呢，我们再来看view里面这个后，最后这个叫render，这个render叫什么呢？叫渲染引擎，叫渲染引擎什么叫渲染引擎呢？就是我。这个地方定义的是路由对吧，这个地方定义的是存储，存储这块比较复杂，我们就略过去了啊，总之就是刚才我们所说的什么呀，这个模块叫前端信息存储工具哈，好然后这个地方呢，就是渲染，渲染什么意思？就是页面当中要展示的内容，我们页面当中要展示的内容是什么。是不是要展示组建呀，最开始我们不是讲了一个组建的概念吗？就这个东西对不对啊，我们要展示的内容，在页面当中要展示的内容叫组件啊，叫组件，那么我们要展示什么组件呢？APP组件，APP组件在哪呢？在这刚才我说了，这个就是我们所有组件的根组件。所以。

这个APP就相当于你看到的这个跟组件节点，或者是看到的用这种图画的话，就是最外层的这个最浅色的这个组件，明白吧，它容纳了所有的子组件在这个里面，以及子组件的组件在这个里面啊，所以呢，你在这个地方看到的APP就是跟组件，然后跟组件最终以这样的形式。挂载到我们的VIVO的上下文对象当中，所以我们当前的项目会干嘛会在这个APP节点下，也就是说在这个地方去显示什么呀，所有的组件在这个里面啊，去显示所有的组件，当然它是以根组件为根节点的，然后所有的组件最终都会嵌入到它下面。所以这个就是我们整个的问点GS这个文件的每一行代码分析啊，希望大家能够了解，那分析到这之后呢，我们其实就要分析它这里面挂载的东西了，Router我们一会儿再说，因为昨天我们其实对它已经有了一些了解了，这个router就是它啊，就是它，它就是。

嗯，就是他是不是很好，然后接下来呢，我们来说一下这个APP啊，APP是什么呢？下一个视频啊，先把这个停一。