101-尚硅谷-尚医通-前台用户系统-nuxt搭建前端环境

各位同学大家好，欢迎继续收看上硅谷视频课程，我们继续开发上移通项目。之前内容里边呢，咱们做的都是我们的后台管理系统，也就是管理员用的部分，那咱们下面的来开发我们项目的前台部分。我们在项目第一天给大家介绍过咱们的项目，基于是这个叫BTOC的这种开发模式，比如说咱们项目中有两部分，第一部分呢，是我们的管理员使用的系统，然后第二部分是咱们的用户使用的系统，然们之前做的这些功能呢，应该都是管理员系统中的监管功能，而咱们现在开始来做这个用户系统中的监功能。那下面我们来做一下，那做用户系统之前呢，首先咱先搭建一下用户系统这个前端的环境，把前端环境做个搭建，咱们之前做管理员系统的时候呢，我们用的这么一个搭建环境，用的这个叫wee admit to，用它做了实现，而现在我们在搭建前台用户系统中，咱们再选取一个新的一个框架，这框架我们叫做纳。

一会儿给大家会做个具体介绍，那咱下面就开始搭建这个用户系统的群聊环境。那怎么做呢？首先呢，给大家先介绍这么一个内容，大家看的课件中，我这里写到咱们一会儿用到na，它叫做服务端渲染技术，然后给大家先解释一下什么叫服务端渲染技术，然后咱们开始用na把这个环境我们快速做搭建，那下面来自我介绍。大家看我课建筑啊，我这里写到。服务端渲染又称为叫SSR，它是在服务端完成，因为内容，而不是在客户端通过阿贾克斯获取技术，所以这里提到一个词叫阿贾克斯，这个各位应该知道，咱们在操作中呢，有这么两部分，比如说左边呢是咱的客户端，图图说就是浏览器，右边是咱服务端。

而我们通过客户端发送阿贾克斯请求，是不是得到数据，然后把数据返回在页面中，是不是做显示啊，这是我们阿贾克斯过程，就是咱通俗说的异步进行这么一个调用。而异步调用呢，在我们操作中确实很方便，但是有一个致命的缺点，什么缺点呢？我这里写到。就是它不利于咱们做SEO，什么叫SEO呢？因为大家知道，因为我们的搜索引擎用到这个爬虫的抓取工具，它可以直接呢查看到全面渲染的页面，如果说你用这个阿贾克的方式，那我通过引擎去抓取页面中的内容，内容是不是可能还没有啊，那这个时候呢，我去抓取内容，内容不存在，那可能造成咱的网站排名比较靠后，而这个时候呢，阿贾克斯它就因为是异补，在你加载英文的时候，数据可能并没有马上出现，它还需要在发送请求的数据，所以这个过程中呢，并不利于咱们做Su，而我们用服端渲染技术就能解决这个问题，服务端渲染技术过程中，在页面中就是直接显示的这个数据，而把过程都在负端做到，而服务端显技术我们称为就是这个叫SSR，所以咱们现在用这个纳斯就是一。

是个不断线技术。因为在这技术中呢，更利于我们这个网页做Su，所以咱们现在把我们的这个前台用户系统部分就通过这个服端渲染技术纳斯的咱们来把环境自个搭建，所以这是关于服端渲染技术一个简单介绍，各位把咱知道，也就是通俗来说咱们把这个数据这个操作过程在我们的服务端完成，而在客户端只负责显示，而不负责其他事情，这么做的好处就是利于咱网页更好的进行SEO的这个相关内容。

所以这是关于它一个介绍，然后介绍之后呢，下面咱就介绍一下，这个叫na，我这里写到啊na呢，首先第一个是基于voe的这么一个轻量级应用框架，它可能用来创建户端渲染的应用，也就是说纳就是一个。基于服务端渲染技术一个框架，而这框架本身是基于vuee来做到的，所以咱们下面就用这个纳来搭建的环境。我这里写一下，它是基于。VE的框架的，然后它能实现一个叫服务端的这么一个渲染，所以咱们现在用它来把环境我们做个搭建啊，这是关于服务端渲染技术以及NAS的这么一个基本介绍。

那这个NAS呢，该怎么搭建呢？下面给各位详细演示一下啊，首先第一步咱们可以联网先下载这个就是nat这么一个安装包，就是里边有一个压缩文件，这个安装包我在资料中已经提前下载出来了，在我的前端相关中，里边有一个叫NAS的，这是我提前下载好的安装包，咱用它就能实现出我们这个环境搭建，那怎么搭建呢？给大家做演示。首先我们的第一步呢，咱们先找到就是我们这个工作区这个路径，我这个路径呢，应该在我的E盘这个预约挂号，比如说现在我在里边呢，建一个文件夹，因为咱们一会儿这个用户系统这个项目，比如说给它起个名字，我就叫这个预约挂号啊。

Sit用它所咱们这个项目，然后把它创建之后，咱下面怎么做呢？找到刚才咱的压缩文件，把它先挤压出来，比如说我要解压到当前路径，然后解压之后呢，大家看。在里边呢，有个目录叫这个time里，Time里T中是不是有相关内容啊，那咱下步操作就是把time里中的内容给它复制到咱们刚才创建这个预约挂号site这个文件夹中，那我现在把它做复制，这是里边的第二步，然后复制之后等到这里边看一下在这过程中是不是有咱们钢材建立项目，这样的话我们就完成创建。然后完成创建之后，咱下步操作呢，需要改一下里面几个参数，然后改完参数之后就可以用到我们之前学那个npi的命令，把里面的相关依赖可以下载出来，那在下面的就弄一下我们看一下怎么做啊。

大家看这里边呢，有一个各位都熟悉的文件叫拍点Jason，大家看到里边是不是有一些依赖呀，就是我们初始化项目中这个文件，然后在这文件中呢，咱需要改些地方，就是里边的这个地了，这个地方呢，它是让我们取些值，而我们现在给它写成固定就可以了。比如说第一个它的名字，那我们就叫预约挂号Z，第二个是它的描述，咱们就叫这个上一通项这么一个描述。我来写一下啊，上一通。项目平台，然后第三个also是他一个作者，比如我们叫AP硅谷，这样的话把这个值做修改。如果不改的话，后面我们下载依赖会有问题，然后改完之后咱们还需要改文件，这个文件叫NAS的con，也是里边一个核心配置文件，咱们也是把这里边改一下，我叫预约挂号。

然后下面有它里面这么一个描述，描述咱改成还是叫这个上一通。我们这个项目的这么一个平台，所以这样的话呢，咱现在把这两配置文件做了修改，修改之后呢，咱就根据拍点data里面这个依赖把它完成下载。那我们看怎么做啊，首先我们在这个项目录中用终端先打开，打开之后呢，在里边输入一个命令，命令各位应该学过啊，咱之前说过叫n PM in。然后咱们一回车，回车之后呢，它就会根据配置文件中的配置，把里面的依赖就会下载出来，那我现在把它就回车一下，现在呢，它就会联网去下载，我们就往依赖，然后依赖下载之后呢，在里面会多出一个目录，就是叫no。

Models在里边有我们的依赖，那现在我们等到现在完成这个过程，稍微要等一会儿，大概需要五六分钟时间，下载之后，这里边我们就可以启动项目，然后能看到里边一个基本效果啊，所以咱们先等它现在完成，然后咱们在里边再装一些其他依赖，比如咱一会儿装一个。IUI，包括最终把项目启动，然后咱们再进行一个测试，所以这是一个基本过程，所以各位知道啊，我们过程应该很简单，就是咱们下载出这个纳S这个压缩文件，然后把它解压，解压之后呢，把里面内容不到咱目录中去。包括该里面配置文件中的值。改完之后，咱根据拍on Jason用n PM in豆在里边先把它的依赖下载出来，那我们先等一会儿，等依赖下载完成。好，我们看啊，现在依赖已经下载完成了，就是根据我们package点这存中的配置完成下载，然后下载之后呢，在这里边呢，咱可以再安装一些其他依赖，因为刚才我提到纳呢是基于voe做到的，但是它本身并没有包含I问的UI，咱为了后面更加操作方便，我们在里边呢，可以给它安装上去这个I问的UI，为了后面方便，那咱给它来装一下啊，各位看一下我的课件图，首先第一部分咱先下载这个IUI用NPM，因此豆用它再载出来。

那我现在在里边我就直接下载下，咱们回车把IUI先下载下来，然后下载之后呢，把它安装到咱这个项目中去，让才能使用，那怎么使用呢？我这步骤写的很详细，第一步你可以建一个JS文件，然后在JS文件中呢加上相关的配置，然后包括在里边加上你的配置的部分，最终就会使用，那我们下面给它弄一下啊，首先这里写到在你的play里边先建一个。

JS文件，那我现在创建这个名字随便起，比如我就叫这个名字。我们叫这个mylegue.JS，然后创建之后呢，在里边加上里边的这段内容，我把这内容给各位直接拿过来，然后咱看一下啊，应该很好理解，第一个是不是引入vuee，第二个引入IUY，包括它样式，然后在vuee中用这个U啊，这是我们的第二部分，然后写完之后呢，第三部分咱们找到NAS框架中一个核心配置文件，这个文件叫纳点con文件，在文件中呢，咱们找到里面这个地方叫build，注意啊，在build的下边，你别放到build里边，在它下边咱们加上这段配置，就表示用咱们刚才写那个里边的配置，在里边能用到咱们这个IV。

然后大家看这是他路径写法表示里边这个myle。所以这样的话呢，我们在项目中就安装上了这个I的UI，这个就完成了，完成之后呢，下面咱就可以把项目启动，然后最终做个访问进行测试了，那我们最后启动一下啊，启动方式跟之前咱们那个管理员系统中的使用方式是一样的，就是NPM。RUDV，那我现在回车，咱就把项目最终启动下。我们看啊，它启动过程中里边会包含这么一些结构啊，跟之前有点区别，咱们等它启动起来，然后启动之后大家看这个访问用的是local house的3000端口进行访问，现在已经启动了，然后咱们打开浏览器，用这个端口号就是3000。我们访问一下。

然后大家看是不是看到这个界面，这就是na中这个初始化界面，里边没有其他内容需要咱后面往里面加，也就是说当你最终启动成功之后，看到这个界面，证明咱的项目就环境搭建完成了，然后咱在里边后续可以加入其他功能。所以这就是关于我们在上移通平台中，这个用户系统中前端环境搭建，咱们用的是纳完成的这么一个过程，所以这个我们就做到了。