39-尚硅谷-硅谷通用权限项目-开发角色管理前端-搭建前端环境

各位同学大家好，刚才呢，我们介绍到了角色管理前端咱们要完成的这个内容，那下面呢，我们具体实现我们的具体操作，首先我们看第一部分，咱们先搭建一下我们项目的前端环境，那这搭建呢，我们并不是从零写这个HTML塞的代码，而咱是用一个前端框架进行实现这个框架这个概念各位应该很明确，咱们学后端的时候是不是学过很多框架，最常见的就是three、买贝蒂等框架。而用框架之后，它的优点应该说很明确，第一个是一套标准的开发规范，然后第二个咱可以写很少代码，能实现更多功能，因为它里边做了很多的封装，框架的目的为了提高我们的开发效率，而咱们现在做前端同样用框架进行开发，那里边用什么给大家自我介绍，首先我们看第一个框架，它的名字叫wave elementdmi，这个框架自我介绍，它是基于VI和UI封装的这么一套后台管理系统集中方案，里边有很多的功能，那这功能咱通过一个在线的一个地址，咱来看一下，就这个地址，然后这个地址呢，我在里边已经复制了，就这个界面，然后咱们看啊登录。

登录之后大家看里边是不是有很多内容，比如你看啊，里边有各种的内容，它里边都存在，所以咱们用这个框架来实现我们的前端的这个部分，当然各位也注意啊，这个框架中呢，有很多内容，其实咱们在开发中很多东西应该根本就用不到，所以咱们下面我们这么来做，在这个框架里边呢，有它这么一套框架，叫最少精简版本，里边只包含了最基本功能，所以咱们项目中用它进行实现，这个名字叫wavein to，我们通过它来完成前端换动搭线，然后这里边有两段话是各位之前要掌握的知识，我也做过说明，第一个叫view。

是一个用于构建用户界面的建进式框架，咱们项目中基于它做到，但是里边很多部分在这个框架中都做了封装。第二个叫imond UI是由饿了么前端出品的一个基于VI的这么一个后台组件库，也就是用它之后呢，咱们不需要过多关注样式的内容，里边都做了封装，所以咱项目中基于它进行实现。针对wave里边的具体内容，各位可以关注我们官网上的相关视频来详细学习，咱们这里边重点关注我们的项目部分。那下面咱们开始做一个搭建。怎么搭建给大家演示啊，咱们用这个行搭建，当然用这个也可以，只是说里边很多功能我们用不到，你还需要删除，所以咱用一个最少精简版就足够了，那下面再来搭建啊，首先第一步咱们到giit HUB中先下载一下这个项目的源码，就这里边我们可以做一个下载，我这里边已经下载过了，我现在下的是他的最新的版本，这里边已经下载过了，就是这个wave admit。

然后咱怎么做呢？第一步把它先解压，我现在给它解压一下。然后解压之后我们看啊，里边有很多内容，咱为了方便我给它改个名字。这个名字，我给它起个名字，就叫这个。杠front啊，就是权限系统这个前端咱们写这个项目，然后这个项目咱们解下之后，把它复制到我当前项目的工作区中，这是我的工作区，我直接复制你的工作区跟我肯定不一样，所以要复制到你的工作区中，这个咱就完成了，完成之后来到code里边，大家看啊，里边是不是多一个叫system front，然后这里边我们看有一个地方是各位熟悉的其他部分一会儿我再做介绍，大家看这个文件应该很熟悉啊，是咱们前端一个初始化之后一个项目，然后大家看里边有基本信息。

这些什么？是不是它的依赖呀，所以我们现在我们把这个甲之后，咱们需要首先做第一件事情。我在这里边啊，把过程和步骤给大家写下，其实我课件中都有，我这里再强调一下搭建前端环境。首先，第一步。我们下载这个环境的代码，然后把它解压到你的工作区里边去，这步咱刚才已经做过了。

然后解下之后呢，我们的第二部分，咱们就是根据这个配置文件，咱们来下载里边相关的依赖，也就是根据这个poem，就是package.jason然后在里边下载文件，它就类似于问中这个poem文件，那咱们下面来做个下载，怎么下载，大家跟着我一起来回顾一下啊，这咱之前讲过怎么根据配置文件下依赖，咱指的是前端依赖，大家想一下这个该怎么去做，我们之前呢学过个东西叫NPM，咱们用命令nm in道是不是就能根据配置文件下依赖，所以下面再来下载一下，那我来操作一下啊，第一个在当前文件夹中终端打开，然后咱们输入命令。N PM in道回车，现在就会联网下载依赖，咱们稍微等一会儿，等它下载完成。

现在已经下载完成了，这过程呢，稍微要等一会儿，如果你网速慢的话，可能等的时间稍微长点，我这里边已经下载完成了，然后下载完成之后我们继续往下来看，下面怎么做呢？就是现在这个项目其实就已经成功进行了搭建，那下面呢，咱们把项目直接启动就可以了，那我写一下啊第三步。咱们就可以启动前端的项目，然后启动的时候呢，我们用个命令进行启动，这命令各位要记住啊，N PM run DV用它来进行启动。那现在呢，我到里边来试一下，各位注意啊，在当前项目路径中，你别到别的路径中，然后在里边用命令NPRUDV回车，咱们进行启动。

这过程咱们稍微等一会儿，第一次会稍微慢一点。你看这里边啊，有百分比，等他100%就可以了啊，咱稍微等一会儿。大家看啊，现在就成功了，然后成功之后呢，其实它会自动给你打开浏览器访问，如果没有打开也无所谓，咱直接访问用local house9528进行访问，那我现在访问一下啊，我用这个浏览器直接咱们访问一下推车，大家看进入到的就是当前的这个界面。也就是说，如果咱们看到这个界面，那表示我这个前端环境就搭建成功了，这是我们搭建的一个过程。这个过程呢，给各位再重复一遍啊，第一步你到get up中下载它那个版本这个代码，然后把代码解下之后放到你的工作区中，放到工作区中咱们在项目里边用n PM in下载依赖，下载依赖之后最终启动，用NPMRUDV最终完成启动。

完成启动之后，最后咱通过刚才我们看这个地址local house的9528进行访问就可以了。以上是咱们搭建环境，搭建之后咱念登录，大家看它是不是能登进去，这是它自带的这个功能，比如说这里边你看啊，跟他那个完整里边相比，是只有基本功能，所以咱们在这里边来完成我们项目中的具体功能，完成咱们的硅谷通用权限系统，以上就是环境的搭建过程，这个咱们就搭建到这里。