45-尚硅谷-尚医通-后台系统-搭建前端环境

各位大家好，欢迎继续收看上硅谷视频课程，我们继续来学习前端中等相关知识。之前内容中呢，我们把前置中我们项目中所需要的基础知识给各位都说完了，然后咱们下面呢，就来搭建一下我们项目的前端环境，把环境搭建之后，咱们在里面进行我们的共同开发，那环境怎么搭建，给各位来说一下。我们的搭建呢，咱们也选取一个前端的模板来完成咱们环境搭建，那这个模板它的名字我们叫VE或者mean to Li，用它进行搭建，那这个模板怎么用，下面给各位做个介绍，首先呢，我们先通过一个项目的在线预览看一下这个。内容到底是什么样的，然后咱们这个搭建这个地址，我在里边已经提前打开了，然后咱们看这是我们这个框架模板中一个登录页面，咱们点登录，登录进去，然后在里面大家看是不是有不同的内容，所以咱们就根据这个模板进行我们的项目开发，而这个模板中呢，主要用到了两个技术。

第一个技术，我们之前说的VE。还有第二个技术，就是我们用到的这个I的UI，做一个前端的组件库，那咱们下面还有这个模板来搭建咱们的项目环境，我来说一下怎么搭建，第一步呢，你需要在网上先把这个框架模板先下载下来。然后我这里边呢，已经下载过了，咱们看一下，在我资料中有一个前端相关，然后在里边呢，大家看有两个压缩文件，咱们用它可以利用时间，而两压缩文件其实用哪些都可以，咱们仔细看一下啊，大家看。这个压缩文件。咱们看它的大小是不是921K，这个是不是100多K，其实咱们现在如果说你用900多K，这个就是模板，它里面有更详细的功能，当然我们一般开发用100多这K就足够了，因为它里面有一个最经典版本，因为咱们现在就以它为例，把这个环境给各位安装上，那我下面说一下这个该怎么做。

首先给大家截个图，咱们就选用100多K这个模板，然后进行我们的项目开发，这是里边的第一步，然后这个怎么做呢？我写一下啊，首先第一步操作。因为它是一个压缩文件嘛，咱们先解压这个文件，然后给它到我们的项目的工作区里面去，这就是他的第一步。这里边我们现在可以做个解压，那给各位我来快速演示一下，就是现在我这里边把这个文件我们做一个解压，我这个已经提前夹过了，比如说我给他改个名字，我叫这个，它就叫一个test。

Test，然后解压之后把它我就复制到咱们的工作区中，也是我的这里边，这是我们的第一步，给它放到工作区中，然后这步做到之后，咱们下面在工作区中，哎，看一下我们刚才解压之后的文件，就这个文件，大家看这是它那个就是相关的目录，而在目录中里边有一个文件，各位应该认识，咱之前说过。大家来看这个文件。叫pack点。不是，各位是否记得啊，当时咱们讲NPM时候曾经说过，我们项目是不是叫做初始化呀，初始化之后在项目中会多出来一个叫开点J，里边有项目的基本配置，还有一些相关的依赖，所以现在大家看里边就是有tIgEr.j这么一个文件。然后这个都夹之后，我们看一下我们的第二步在干什么。那大家说咱们第二步要做什么？

你会做什么？我们看一下啊，在pat里面有很多的什么。是不是依赖，所以第二步我们就是根据配置文件是要把依赖下载下来的。B就是第二步就根据。package.a来下载我们需要的那些相关的依赖，这就是它的第二步。那怎么下载？咱们之前说一个命令叫NPM。因此呢，通过它就能把这个依赖下载下来，那我现在就根据命令，咱们来完成一下依赖的下载，这里边我把它执行一下，首先我用终端打开，然后打开之后在里边输入我们的下载命令。NPM。一启动，然后咱们一回车，现在就会联网去下载里边的相关的依赖，所以咱们给它完成一个下载。这下载过程因为东西比较多，咱们需要多等一会儿，等他下载之后就可以了，这里边啊，我就不在课上给大家也是下载了，我这里边呢，有一个项目已经提前下载完成了，就这里边，这是我提前下载好的，用刚才的方式下载之后里边多一个目录叫no models，里边有我们下载好的依赖，所以这样的话，这个我已经提前做过了，这是我们项目的这么一个，就是基本的一个搭建，然后搭建之后我们的第三步，咱们可以把这个前端项目做一个启动，就是给它启动起来。

那我写一下第三步启动我们搭建好的这个前端的这么一个项目。那怎么启动，给各位说一下，这里边呢，我们也是直接用一个命令就启动，这命令就叫做npm ru DV，用它就可以把这个前端项目做一个启动，那在下面把它就启动一下，咱们在这里边用终端打开，然后用命令n PM run DV，然后咱就会说现在它就会把我们的项目停起来。

然后启动之后大家看啊，这里边呢，它默认访问的IP是本地端口号叫9528，用这个进行访问，所以现在我们到这一步，这个项目就搭建完成了，这是我们一个基本过程。这个过程我再重复一遍，第一步呢，你找到我们100多K的一个压缩文件，把它夹到工作区中，在工作区中用NPM，因此都下载依赖，然后下载完成依赖之后，咱们用NPMRUUDV把这项目做启动，这样的话，这过程我们就完成了。所以各位能给答出来，但是我们在下载的时候呢，就有的情况下，咱们可能会出现一个错误，我课件中写到了，就是里边说这个东西找不到，所以你需要把这个东西提前装下进行下载，当然一般应该都能成功，这样的话呢，咱们现在就完成了环境的搭建，各位按照我刚才过程能把环境搭建出来，最终你能保证到这个页面，那就证明咱的环境搭建完成了，然后咱们后面就在里边进行我们相应的功能的开发，这是一个环境的搭建。