day04【项目前端相关基础知识二】/17-尚硅谷-谷粒学院-项目前端页面框架介绍

就是咱们啊，把这个前端页面环境搭建出来了这个界面，然后下面呢，给大家我想说的是介绍一下我们这个项目环境中这些目录结构，它的一个相关的特点，就是介绍一下每个目录到底都是干什么的，以及里边我们要改一些东西，一些核心东西该怎么去改，比如说我改个端口号，改一下你接口地址，这些该怎么去做，就把这个项目结构给大家自我介绍，因为咱们今天结束之后，在后面一天咱就要在这上面来写我们的具体页面功能了，所以今天咱需要把这项目结构做一个完整的认识啊，这是我们要说的一个内容。那在下面把这个我就来具体介绍一下啊，给大家画个图再来详细说明。关于我们这个就是。前端页面的这么一个环境的这么一个说明啊，咱们详细来说明，首先啊，我们先来说第一个内容。大家注意啊，就是我们啊，不管你是做前端还是写后端，咱们一个程序，一个项目一般是不是有个入口啊，比如说我们写后端接口，那它的入口一般是我们的问方法，而现在咱们做这个前端有入口，而我们现在用的虽然是一套模板，一个框架，它有这个程序的入口，那它的入口是什么呢？给大家说一下啊，它的入口两个地方。

第一个地方，这个地方大家看这个啊，是一个H调文件，这是它的第一个入口啊，但是这个里边呢，没有写什么东西，它就是一个普通H条页面里边有个div，然后它的内容就写成div中，这是它的第一个啊，给大家标注一下啊，就是我们这个。前端框架的一个入口，首先第一个入口是一个H条文件啊，但是这文件中没有具体内容，它就是写了一个div，为了显示那种，然后这个框架中除了这个页面之外还有一个入口，它这个入口是用一个JS入口的，咱们点开啊，大家看啊，在这个src里边有个文件叫做问点JS，这是它的另外一个入口啊，这是它一个入口，我把这个给大家截过来，所以说大家看这程序中怎么看，第一个找它的入口，它的入口就是两个地方，一个是HTML，一个是man.JS啊这咱看到那S条中没有具体内容，它就是写了一个div。

比咱打开啊，你看div中就是这个APP，然后另外一个入口叫慢点S，那咱看这个man.JS中都是什么东西啊，咱们看一下啊。我觉得各位应该能看懂啊，咱们应该刚讲过这个东西，你看这写法。大家看啊，到这行为止，它的写法是不是都叫import from，就是都是引入其他的这个内容，就是其他的组件或者其他的文件把这引入，比如你引入voe，引入这个U，引入什么root，就是路由嘛，包括引入什么其他内容啊，这些都引入，然后都引入之后，咱看最后一部分，这个咱应该看得懂。

它是不是就是new狗voe啊，因为它是基于vuee做到的，然后里边APP。是不是就是它在里边有route，有内容，然后最终做这个操作啊，所以它本质上也是基于voe做到的，也就是说AT中只写着div用于显示，在man.JS中引入了其他组件，然后它就创建了微规对象做操作啊，这是它里面这个程序的入口，通过这两个文件，一个HTML，一个VE啊，这大家给他知道一下啊，你知道这入口在哪里？然后这个说完之后，咱们继续往下来说啊，说一下里边的第二部分。第二部分给大家说什么呢？啊，咱来看啊，就是咱现在我们这个前端的页面环境，咱们使用的是一个框架，或者说是一个叫模板啊，一个意思啊，框架模板，而我们用这个框架。

它其实是基于这么两种技术来实现出来的。说到通俗点，它是对这两种技术做了封装，让咱的开发更加的简洁，更加简单啊，但是不是只有两种，它主要啊是基于两种技术做到的，那么是哪两种技术，我写一下啊，第一个技术我先这么写啊，就是voe，咱这个模板叫ain。Time里头。这是我们的模板啊。或者这个框架，然后这个模板你可以这么理解啊，它等于主要有两个技术，哪两个技术，一个技术叫VE。还有一个技术叫这个element UI啊，它主要是基于这两种技术，对这两技术做了封装，这两技术咱都学过了，Voe是咱一个前端页面框架，IU外构建我们页面样式，所以它里边都包含进去了，所以咱用它就能直接写voe代码，也能直接用IVUI就是咱们上午说的，你把MVUI中那个代码直接复制在这模板中就可以直接使用啊，包括大家看里边这个引入的地方。

咱找的主要的啊。这个是Vue。这个是不是U啊，把它引入，而这两个东西在咱们下载这里边应该都有啊，比如咱们找一下啊，这东西比较多，咱往下拉一点直先找直接找那voe就可以了。Voe。那还往下啊。Stvuee大家看是vuee，它就是把这个引入里边能用uee组件，另外有U里边有啊，我就不一个去找了，它里边都存在，所以第二个各位记住啊，咱们这个框架或者这个模板，它是基于主要是两种技术做到的，一个叫VE，一个叫U啊这各位知道啊，就是咱们用之前先把这框架先给它熟悉，这样它那个结构，然后写代码会更加方便。

啊，这是第二个，各位明确，然后这个做到之后，下面给大家介绍，就这个里边这个相关的目录结构，到底都是什么意思啊，咱来详细说啊，这先关掉了啊。咱看这里，首先在这里边有这么多目录啊，就是。这么几个目录，然后目录中咱们一个一个来看啊，先看第一个目录，它叫build目录啊build。那我在里边给大家说一下啊，就是第三个咱说那个。我们这个框架中这个B的目录。那这个build目录是什么意思呢？我来解释啊，第一个你知道build这单词什么意思。是不是有构建或者创建的意思啊，所以这个目录是什么意思啊，它就表示啊，咱这项目在运行的时候，一例编做一些就是项目构建或者项目编译一些东西，就类似于咱们在va中，我们的Java代码是不是要编成class文件，它就是一些编译的一些东西，比如说这里边都是一些相关的编译的这些东西，不需要我们去改啊，包括咱看一个大家熟悉的这个东西。

Web pack数据打包工具啊，都是一些相关的编译的脚本文件啊，不需要咱去改什么东西啊，这你知道啊，这里边就是。放我们就是项目中一些进行这个构建或者编译的一些。小本文件就一些JS文件，它放到这个build里边啊，这是咱说的它的第三个就是build目录啊，这大家了解一下，这咱们后面基本上用不到，而咱们用的其实后面的部分啊，咱往下看啊，下面有一个文件夹叫conig，这个特别说一下咱后面要用到。啊，那我写一下啊，就是第四个。叫这位置啊，第四个就是框架中那个叫config目录，那咱看什么意思啊，Config这个单词大家应该都知道啊，它是不是有配置的意思，那这conig里边来看是什么，它主要是你项目中一些最基本的设置的东西，那我们先看第一个啊，Index。

咱看啊，在inext中呢，是项目中最基本配置，咱找一个大家都熟悉的看这个。这是什么？是不是端口号，你看啊，默认端口号是不是9528这单可以改，比如改成别的端口可以，这是你当前那个主机或者IP，咱是本地吗？Log house或者改成IP，这些可以在里边做修改啊，所以这是一个叫index文件，这大家知道啊，它里边可以改你的IP端口号这些基本信息。我把这个啊给大家截过来啊，咱现在是让大家了解这个项目的一个结构，Indext里边啊，里边有些内容，但是在这位置中呢，希望各位啊，就是目前我们先做件事情，然后后面就方便了啊，就后面更加的就少一些麻烦，做什么事情呢，咱们看啊在index里边呢，有这句话。

这个东西它叫user伊斯Lin。啊，就这句话，那我现在就是要求各位把这值咱给它统一改成叫false。啊，我先写过来啊，就是在这里边我们做一个修改。为什么改，马上解释啊，咱现在要各位修改这个值，就这个。ES Li的这个值，它万事处，咱把这个值给它改为叫false。啊，改为叫false，那为什么改它这里边我特别说一下啊，这是什么意思啊，首先这个东西叫ES Li，咱看我的课件中，我这边有一个描述啊，就最下边ES lit是什么呢？这一个插件，它是帮我们做这个代码格式整理，或者代码格式检查，也就是做一个你代码的检查工具，但是咱现在不建议各位装这个东西，因为这个东西啊，它有一个这么一个缺点啊，什么缺点呢？他会帮我们检查代码，但是他检查。

太严格了，什么叫太严格了？比如说你现在在代码中你多了一个空格，咱看啊，多了空格，比如说我多了很多换行，这些应该没有错，但是yet Li把这个也作为错误给你知晓，所以这个检查肯定是不是很太严格，所以咱们就不用它了，把这个值咱就给它统一改成false，这需要各位去改一下，后面咱就方便了啊，就说现在这个插件我这里写到这，各位咱就不需要装了，就装它实际意义不大，咱直接自己写就可以了啊，就我课件中虽然写的就大家不需要装这个，你把这个值改成false，所以咱后面方便不改的话也可以直接写代法时候要特别注意，多空格，多换行都会报错。啊，这是啊，他一个特别的地方，这里说一下啊，In代。然后除了它之外，咱再来看啊，这里边还有两个文件，一个叫DV，一个叫pro，它是针对我们的环境，就是你是开发环境还是测试环境，因为咱们刚才用的命令叫NPRUDV啊，但是这个命令。

各位是否记得啊，而这个命令中呢，它就会去执行这个文件，如果你用的是n p prod进行这个文件，咱目前这个文件，那文件中是什么呢？主要就是这句话。就这个东西啊，这表示什么意思呢？大家先了解啊，后面咱都会改到这就表示我当前要访问的接口的地址，这是它那个默认地址，但它后面要改成我们本地，比如说本地local house8001的地址啊，这是它一个文件，就是你的接口的地址，在这里边做修改。这个大家啊，我也截过来啊，大家对它先有一个认识啊，后面咱都会去改这些东西。这是第二个文件啊。这里边主要做的事情就是咱可以修改你访问的那个啊，访问的后端接口的地址，比如说我们地址是local house的8001，那在这个位置我们就可以进行修改。

这是抗B目录啊，咱是做了一个说明，所以大家把这个了解一下啊，比如说这个咱后面会改到，就是现在要各位这个要改成false，然后这个值，然后后面会改成我们本地的八零后端口或者其他端口。啊，这是第二个目录叫考IG，然后第三目录，这好理解，就是咱们下载的依赖在里面都存在啊，咱都下载过了，里面全有，然后第四个叫src，这咱一会儿说，因为主要都是在src种，这SIC没什么用，里边一般放一些什么资源，静态资源东西，但是一般用不到，主要重点是src啊，这个特别说一下啊，Src目录。那给大家啊，我在这里边，咱就画一下这个东西啊，然后我一个去解释。我把这个咱先拿过来啊。这是src目录。也就是我们里边的第五个。

S2C这么一个目录啊，咱说一下这个目录中到底是什么，然后它的结构这么一个结构，那咱们一个来看一下啊，首先在里边的第一个这个叫API这个东西。然后API是什么呢？强调啊，这里边咱一般做的就是定义一些方法啊，就定义你要调用的方法，比如说我添加修改删除的方法在里面定义啊，这叫API。包括啊，比如咱大家看一个啊，假如里边有一个log in，然后里边定义这个方法，后面咱会写到啊，大家先知道一下啊，然后除了它之外，第二个叫做access。这是第二个目录。然后这个目录什么意思呢？给大家换个颜色啊，这个目录。然后它的作用是什么呢？在这里边咱要放这么一些静态资源。啊，什么叫静态资源呢？比如说你的CSS文件，JS文件，或者说一些相关项目中的图片，咱都放到set里边去，这是第二个目录啊，这个咱后面直接复制可以，咱主要改的是API，这个会改的很多，咱在里边会一直定义我们的方法。

啊，这是第二个啊，然后除了它之外，大家看第三个就是这个叫con啊这个东西，然后这是什么呢？里边一般我们放一些就是插件的东西，或者一些组件的部分。什么叫组建呢？比如我现在举个例子啊，假如我现在我当前这框架，我们觉得里边有些东西啊没有做到，我想用一些额外的框架引进来，那咱需要在这里边放进去，就是com中可以放一些额外的插件，这是我们做到的，后面咱们里边会放那种啊，这叫com。然后除了他之外，还有下面一个，咱再来看啊，下面就是这个东西。就是这个叫I cos，那这里边是什么呢？它里边一般放的是咱项目中使用到一些就是那些图标的东西啊，相关的图标。

什么叫图标呢？比如说在在项目中啊，大家看。这些东西是不是一些图片的，就是放这些图标，咱放这个叫I cos里边，里边有一些默认的一些图标，就这些。啊，比如说随便找一个啊，它这是文件啊，直接引入那个，就是一些相关的图标里边都有啊，后面啊，咱也会用到里面一些图标，这个不需要改，然后除了它之外，下面一个东西很重要，这叫root特，Root特代表什么？就是路由，就是咱们页面中用的路由部分里边，后面咱要改内容啊，这叫路由。这个给大家标注一下啊。就是咱们的。这个部分。Utter，它代表叫路由，就是我项目中要用到的路由部分。瞧这个位置啊，这叫路由。

这个很重要，就咱说的菜单啊，然后除了它之外，下面还有一个叫这个store啊，这个没什么用啊，里边主要放一些相关的一些就是脚本文件啊，这咱就不写啊，To还有一个叫style，放的也是些样式文件，比如你看啊，有IU什么其的一些样式文件啊，这两个咱们一般很少去改，然后下面一个地方叫us，这里边放的是在这个框架中给我们带着一些相关的工具类啊，比如说什么权限的。什么请求的等等啊，这个咱也不需要变。然后下面这个很重要，它叫views。我就把重点写一下这几个写了，因为这是相关的一些文件啊，这个U是工具类，然后最后一个我们叫这个views。然后views是什么呢？这里边就要写我们那个项目中具体的页面部分了啊，就是我们项目中具体的页面。

我们写到这个views里边，然后咱看一下哈，它里边就是默认给我们自带一些页面，然后你注意它的页面都是这种后缀名，就是voe的，这后缀名咱用的都是这种页面，比如我们后面自己创建也是用vouee这个来进行创建啊，这个叫views相关的页面，所以这是关于里边这个目录结构啊，另外这些是一些其他的脚本文件啊，咱也说到了，问是主要的啊。所以大家把这结构给它先有一个印象啊，不需要你去记，而我们后面咱需要改的话，我这里都标注到了，第一个就是这里边咱会改成我们的，我们本地的，比如801的接口地址，第二个API中咱们定义方法，Root里边我们会写路由，Views里边咱要写页面，然后后面主要改的就这几个地方，别的地方基本上不需要改什么地方。啊，所以这是关于项目的一个基本结构，各位对它就有一个总体上的认识啊，你知道有这么一个框架，然后咱们在里边就可以做它的开发。

但是因为咱们用的是框架，框架这个词各位应该不陌生，咱们在SM阶段都需要框架，大家要明确啊，咱用框架的目的其实就是为了少写代码，让它就是更快的做出功能，所以说我们现在用这个前端页面，这个框架里边也是把很多功能都做到了，他做到什么功能呢？比如说我们做什么阿贾克斯请求等等这些他给我们做了一定的封装，包括咱们在上午演示过了，我们做的就是刚才刚演示过我们做那个。一六的模块化在node中是不能执行，你需要用BB转成ES5车辆执行，但是这个转的过程这框架中也帮咱做到了，不需要咱再额外转，所以它里边可以直接用这个import from能直接去用啊，这是它一个比较方便地方，所以咱用这个框架。可以极大提高我们的开发效率，里边给我们封装了很多功能，而咱只需要做的是什么，就是在里边我们定义接口的方法。

然后咱们在这个位置写路由，最后页面中调方法，页面中用IUY做个显示，咱们做的就这个事情，我再说一遍啊，第一个就是定义你要请求的方法和路径，在root里边写路由，最后页面中做调用，那来实现这个过程啊，主要咱就写这些。所以大家啊，通过这个介绍你的这个框架，先有一个总体上的认识啊，咱后面会在里边做我们的具体功能。那这个啊，我们做这个说明。这张图先保存一下啊，是咱的。第12个就是我们用这个前端页面框架这么一个结构的一个说明啊，大家就有一个印象啊，后面然后继续来写。