day11【首页数据显示和添加Redis缓存】/03-尚硅谷-谷粒学院-NUXT框架介绍

我们启动项目呢，跟之前一样，还是这个NPMRUDV，这是我之前创建的啊，我创建好的，我叫VE front10，幺零作为我们的前台系统，现在我E回车。大家看效果啊，这个启动界面跟之前有点区别，第一次要稍微慢一点啊，咱们多等一会儿。各位看到啊，这个界面就跟之前不一样啊，但是现在没有启动成功，咱要多等一会儿，下面会有一些显示，然后现在你看啊，我们这个之前的后台系统，咱用的是那个叫9528端口，现在前台用的这个端口叫3000端口，然后咱做个启动，当启动之后，最后你看到。这种效果说你的什么内存被使用了。多少多少，那就表示我们现在请成功了，然后咱们用这个local house的3000端口进行个访问。而这个访问呢？它不像咱后台会自动打开浏览器，这个不会自动打开，需要咱们手动访问啊，就是我手动把这个访问下。

那咱来访问啊。Local house3000，然后大家看啊，就是当你看到这个界面，那就表示咱的环境就搭建成功了啊，它默认就这界面里边没有什么内容，内容需要咱们写，只给咱们提供一个普通的初始界面。这是啊，关于搭建的过程，各位能给到搭建出来啊，按照这个流程，你把我这个直接解压用就可以了，然后里边咱提了一个叫服务端渲染技术，因技术各位做过了解啊，就是你知道我们现在用的na的就是这么一个技术，它是利于我们程序做这个，就是网站做Su。这张图先保存一下啊。第二个。搭建项目的前台环境。咱用的叫。那子的。介绍完了啊，然后这个介绍之后呢，咱下面啊，就来说一下这个项目，这个环境，它里面的内容到底是什么含义，然后里边有一个小问题啊，就是咱们在运营过程中经常会有这种警告，咱们可以暂时忽略，它对咱们运行没有影响啊，对警告它有些值取不到，咱运行没有影，没有影响，只要它不是挨着啊，就是这位置不是挨着这些都。

我们可以正常运行啊，然后这个说完之后呢，下面来介绍一下，就是关于我们。这个框架中这个目录结构，就是里边这结构到底是什么样的，然后在我的课件中呢，给大家就列出来了，就是里边一些信息你可以改，也就是说里边的这些名字都可以改一下啊，我就不在课上改了，各位可以按照我这个笔记把这改出来，不改也可以，也都能用，只是里边改完之后有一些更友好的提示。包括安装依赖运行咱都讲到了啊，然后下面给大家就来说一下我们这个项目的一个目录结构，也就是里边的这些结构分别都代表什么含义啊，咱做个说明，为了咱一会儿开发做准备，那下面我来做个介绍啊，咱们一个一个来看啊。

我来画个图。我们就来讲一下。那这个环境中的目录结构，也就是里边这些目录分别都是干什么的，咱们一个来看啊，首先我们看啊，在这个项目中的第一个目录叫点纳的，这目录是什么呢？是它就是你可以这么理解啊，咱们Java代码中，最终Java代码是不是要编译啊，就是把Java文件编成class文件，而nat里边就是前端中编译之后的文件，这个文件默认是没有的，当你运行项目之后，它会生成就是一个编译文件，这里面内容咱不能改，改也不起作用，它不会生效啊，这是第一个编译之后的文件。然后但重点是下面咱看第二个文件叫set啊，这是第二个文件。这个大家啊，来说一下这文件是什么意思，就是这个文件夹。

说到这位置啊，在里边有个叫呃，Size文件夹，然后这个文件夹中呢，咱们一般要干什么呢？就是在这文件夹中，咱们一般要放一些我们项目中使用到一些静态资源。什么叫静态资源呢？比如说你的CSS文件，比如说你的JS文件，比如说你的一些什么相关的图片等等，把这些咱就放到这个叫做set里面去啊，这是我们的第一个重要目录，然后后面就是我们项目中的样式也会放进去啊，各位把这个知道啊第一个。然后咱看第二个这个目录叫。com。这是第二个啊，Comment什么意思呢？也就是你项目中啊用的一些相关的组件，咱可以放里边去啊，这是第二个。到这位置啊，就是咱们一般是放我们项目中使用的一些相关的组件，那这个就是这个文件夹，咱在之前后台中有用过，举个例子啊，比如咱们之前啊，做那个头像上传，咱们从其他地方是不是要复制组件过来啊，当时就是放到confident中，这跟他一样，如果你用其他组件也是复制到这个。com文件夹中，放你项目中使用的监管组件啊，这是第二个目录，Confidence。

然后再来看下一个目录。这个目录，这个目录很重要啊，这个目录要跟咱这目录一起来啊，一起来使用，那咱先做个说明，就是具体分析它是怎么做到，这个目录叫layout目录。给大家说过来啊，Layout。然后这个目录是什么意思呢。给大家强调啊，你注意啊，在这目录中有一个文件叫default.we，那这里面是什么呢？它就表示啊，在这个layout。啊料里边那个defa的文件中，它就来定义我们当前这个网页的一个。

布局的方式啊，就是在这个deft里边设置你网页该怎么进行布局，这叫料里边这个目录，那什么叫布局，给大家说一下啊。比如说啊，大家应该都见过啊，就是咱们一般来讲，一个网站的大体上都这么一个结构，它在网站的最上边会有什么呢？可能有什么，你网站的logo就是网站的标志。然后这个位置有网站一些什么导航的一些信息。比如说咱们这个网站中，大家看。就是这是上面有logo，有这个导航，然后你点某一个内容下面就显示它的内容啊，这个叫网站的这么一个布局，所以说我们现在在这个lay里边就是定义你网站该怎么进行布局啊，写到这个叫DEF页面中就是一个默认的布局方式啊，包括网站也是按照我们的。这种方式布局还是说其他方式镜布局，因为现在这种布局是上面是一个头部分，这是一个尾的部分，中间是那种部分，在头的部分一般都显示它的logo和导航，在尾部分比如显它什么版权信息啊，什么友情链接啊等等啊，这个叫布局layout这么一个文件夹，大家把这知道啊。

然后除了他之外，往下看，里边还有一个。这个。呃，就是这个东西啊，叫middle和这个node models这两个呢，就是放它一些相关的一些，比如这个node models是咱下载依赖，这middle里边也可以放一些相关的组件啊，这个不是很重要，No models是咱下载之后内容在里面都有啊，咱说前端中应该提到过，比如说我们后面用的东西再下载新的依赖，咱用n PM in store下载在里边都会有。啊，这就不写了啊，然后这个很重要，叫配置四。给大家。复制过来啊配置。然后这个配置S是什么意思呢？里边就是放咱项目中那个具体的页面，就是我们项目的页面都放到配置里面去。

写一下啊，就是我们项目中的页面。它就都放到这里面去，而这里边有一个默认页面叫index，这index就是咱们看到的这个首页面叫inex，后面咱肯定要做修改啊，加上我们更多页面，这叫配S。然后除了它之外，下面还有几个啊，这几个就是写一些插件，一些静态资源，包括一些JS文件等等啊，这些不是特别重要啊，主要是咱们说的地理文件，然后除了它之外，这里边最后还有一个配置文件，这个配置文件叫na con.js它就是我们这个。那模板中一个核心的配置文件啊，在里边可以加一些相关内容啊，因为它以启动项目，这个文件会加载，然后还有一个package，是咱们初始化的这么一个内容啊，主要这么一个结构。

我把这个写一下啊。就是还有一个配置文件，这个文件叫na com.X这个文件是咱这个那这个框架中的核心的配置文件。所以这个啊，就是目录结构，主要这么一个结构，我再说一下啊，主要这么几部分，第一个叫access，放一些静态资源，比如说我们的javascript。包括CSS，包括图件可以放进去。第二个叫con，放一些组件，当你用到一些组件，可以把组件的这东西放过来。第三个layout，设置你页面的布局，通过里边设置，比如你页面是上下布局还是左右布局，是上面是什么，下面是什么，在里边设置。然后另外一个叫配S，放你的具体页面内容，比如说我们现在做首页，做讲师，做课程，那页面的东西就放到这里边，在这个位置咱们创建view页面，然后做个实现。

这个啊，是咱们的目录结构，还有一个叫na con JS，这是咱们na框架中这个核心的配置文件，这是关于目录结构介绍啊，这里边我都说到了啊，就是写的这些。所以大家把这个需要一个认识啊。然后就是在这些页面中呢，有这么一个特点给大家特别说明啊，为了咱一会儿也是开发做准备，什么特点呢，咱要说就是两个东西啊，一个叫layout。一个叫这个配S啊，就是一个布局一个页面。这各位来说一下啊。然后这个什么意思，我在里边啊，强调一下这些。拿掉啊。然后这个意思是什么呢？也就是现在啊，当我们一访问我这个IP端口号，那这过程中呢，它默认进入到就是咱们的首页面，而首页面在哪里，刚才提到了在配置中有一个音袋子是首页面，但是还一个叫什么。

Default这个页面，那这两个页面什么意思啊，给大家强调啊，它主要是这么一个结构啊，我这么来做啊。这么来写。给大家说它那个本质上一个结构，就是现在呢，它的做法就是在这个就是。这个位置啊，Default页面中。也就是在layout的default页面中再来设置它那个布局的方式。default.ve里边就是设置它的布局的方式，比如说咱们现在布局在里边，我有一个那个头信息。啊头信息就是它的上面有什么logo，什么导航，然后它还有一个那个尾部的信息。比如它里边什么版权信息什么等等，但是你注意啊，在defportt里边只有它的头和尾，也就是这个页面中，它只有上面这部分，还有下面这部分，中间部分是没有的，而中间部分是在哪里？是在咱配置词的这个inext中，在里边是你的中间的具体内容。

啊，那画到这个位置啊，这是我们的具体内容，它叫inex口。点voe，而现在在咱这里边它是怎么做到的呢？在这个底坡的里边，它通过一个NAS中的这么一个标签，这个标签就叫NAS这个标签，用这个标签干什么，把你这个内容就是这个in Internet页面给它就引入到这里面来，就是它会做一个引入。用这个做到。啊引入，而咱们就是在操作过程中，咱看到的效果肯定是有头有尾，还有这个页面，但是它本质上是这个过程，先有一个布局页面，然后通过布局页面把你的其他页面给它引入过来，在布局页面中只有头和尾，没有中间内容，中间内容是其他页面中的具体内容，比如咱们看到就是这个页面中啊有头有尾，只没有写这是中间内容，然后中间内容就是音带的中等，包括咱看它。

头和尾在底座的定义，然后中间的名师热门课程和幻灯片是在咱们这个inext中做过定义啊，主要这么一个过程。给大家把这个了解一下啊，也就是说呢，加载页面的时候，先去加载default，再去引入这个index。它是这么一个建载过程啊，这是框架它本身的这么一个操作，而它这引入过程中呢，其实用到了这么一个东西啊，是一个标签，不知各位之前是否提过啊，或者你还是否记得这也是H条中一个标签，就是这个标签。叫F，它就表示引入其他的这么一个页面，把它引入到我页面中，然后最终做个显示。啊，这是关于它框架的一个实验过程啊，这属于前段动的知识啊，我再说一遍啊，大家对它要有一个认识啊，就是现在我们在访问这个网址的时候，它默认肯定会先到我的首页面，但是怎么到首页面的，首页面的页面是音带的vuee，它首先不是加载index，先加载什么是default，先加载布局页面，把这页面先加载过来，然后加载完布局之后，通过这个NAS标签把其他音位给它引入过来。

它是这个过程，包括咱看这个底破的里边各位看到。是不是有这标签？叫纳这个标签就是引入其他的那个页面，也就是说布局中只有头和尾中间部分是其他页面中的这个内容啊，这个是它本质上的这么一个加载过程。啊，大家把它知道啊，你知道他这个是怎么做到的啊，因为咱后面会用到里边的这种机制，咱会写代码啊，所以我要把这个特别说一下啊。

我们做了一个说明啊，然后这张图我先保存一下啊，这是我们的第三张图。NAS的这个目录结构的一个介绍，然后包括刚才啊，就是咱们这个页面的一个加载过程。第四个。那中页面的下载过程这个啊，我们就说完了啊，关于这么一个介绍，大家对这个框架有个认识啊，后面如果你记不住没关系，后面咱们继续来用，后面其实我们主要写到的就是里面这个。配置次里边写你的各种页面，包括各种调用，各种这个过程啊，这个我们就说完了啊，然后最后再说一点啊，因为咱们现在用的这个叫那框架，这框架跟咱之前用的后台这个系统框架有区别，咱之前这后台这个will e mean to，咱之前提到过啊，不是各位是否还记得啊，它是基于那个voe和element UI做到的。

但是咱现在这个naz的它只基于voe，它本身并没有集成那个IU，但是咱可以把它引过来，如果你不引的话，它默认只有voe，没有IPAUI，也就说之前I的UI中那些组件，如果你没有引入，默认是不能用的。啊，这个各位都知道啊，包括咱看在这个笔中有一段话，这段话这里写到啊，NAS是一个基于什么voe的这么一个框架啊，它本质上只有voe，没有那个MUY。啊，这个各位给他知道啊，当然后面在用的过程中也会引入这个东西，方便咱们其他操作。这个啊，关于框架我们就先说到这里啊，就是一个基本的介绍，通过我的介绍对它对现有一个简单认识啊，然后这个环境按照流程先能给它搭建出来。