00:00
各位同学大家好,在前面的这些内容中呢,咱们把前端中要用到的基础知识我们就都说完了,然后咱们下面呢,来搭建一下我们项目的前端环境,然后最终实现前端的开发,那下面我们开始做这个事情。就是项目的搭建,项目的前端环境,这个啊重新写一下。我们的最后这个内容小的位置。搭建。项目的前端的环境,然后这个搭建呢,我们通过一个框架进行搭建,那框架用什么,咱们看一下啊,这个框架叫vein,或者说也可以叫一个模板。Voe这个模板呢,它是基于两个技术做的封装,第一个技术就是咱说的view或者voe,然后第二个技术是这个element u。通过它进行封装,所以咱们项目中用这个框架进行前端开发,那这框架怎么用?给各位说明一下,首先第一个你可以联网下载框架的源码,我这里边已经下载过了,就是这个源码。
01:16
然后下载之后我们怎么做呢?把这个先解压到你的工作区中,然后咱们进行操作,咱们看一点啊,首先解压,然后解压之后预摸命令,这命令呢,咱们刚才刚讲过NPM因此斗,那大家想一下这命令什么意思?什么意思?是不是根据配置文件下载依赖,等咱把依赖下载之后,用命令NPRUDV启动就可以了,你这里边把一些基础功能给我们已经做到了,在那里边完成咱们后续的开发。那下面呢,给各位同学把这个搭建过程咱们来做一个演示,看他该怎么搭建。首先我复制这个文件是一个压缩文件,把它复制到我们的工作区中,然后复制之后下面我进行解压。
02:10
咱们先解压一下,然后这里边解压完成,我把这个文件先删掉,然后解压之后,咱们到这个工作区中找到这个文件,就是它找到之后怎么做,大家看里边啊,有很多文件,找一个各位同学熟悉的文件,各位看这个文件。拍点J,然后你看里边是不是有很多依赖,所以咱们首先做的就是根据配置文件先卸载依赖,然后这里边右键终端打开,然后输入命令n PM in到咱们回车,根据配置文件把依赖先下下来。这是我们要做的事情,等依赖下载之后,我们通过命令npm ru DV启动就可以了,这个项目用的默认的端口号是9528,通过它咱们可以完成这么一个访问,那咱们等它下载,这过程可能稍微要慢一点,决于你的网速,如果你网速快可能会快一点啊,咱们稍微等一下这个下载,而这个下载时候咱们之前也配置过一个那个淘宝的镜像,为了提高我们的下载速度,那咱们稍微等一下,等他下载完成。
03:22
好,咱们看啊,现在已经下载完成了,然后咱们启动用n PM run DV回车把项目进行启动。咱们等他先请起来,然后启动之后呢,通过local house9528进行访问,但这个过程中呢,其实它会给我们弹出那个浏览器的界面,如果不弹出,咱直接访问也是可以的,你看现在就弹出来了,然后他就到这个界面,这时我们框架一个登录界面在里边我们登录。然后各位看啊,它里边这么一个效果,包括里边有一些路由这个菜单的部分,有一些基本的页面部分,所以现在咱就把这个框架的环境就快速做了一个搭建,各位知道这个过程很简单,你把这压缩文件解压。
04:14
在工作区中,然后你code中用终端打开。通过NPM因联网下载依赖。然后下载之后用刚才咱们说的命令npm ru DV启动就可以了。这是我们说的这个过程,然后我在课件中这个图里边给大家画一下这个过程啊。搭建项目的前端环境。首先,第一步,压缩文件。解压到你的工作区里边。然后解压之后第二部分。使用命令。NPM。阴死道。下载依赖。
05:01
然后依赖下载之后我们的第三步,咱刚才刚演示过,咱们通过命令n PM run DV,我们启动这个项目就可以了,然后启动之后我们进行项目的访问。它的反路径咱也看到了,HTTP冒号杠杠local house这个9528。通过它进行访问,所以这就是我们搭建项目前端环境一个基本过程,各位把这过程给它能搭建出来,这单就完成了,然后完成之后呢,在这个框架里边呢,其实给我们封装了很多功能,包括大家看啊,在它的依赖中有很多依赖,比如各位看到你看这个依赖啊,有什么AXLS。IU包括voe部分里边都有,所以在里边我们可以直接用voe加U加艾克斯的这个相关代码进行功能的实现。
06:01
这个做一个说明,然后这个之后呢,我们看一下啊,它的目录结构,首先有咱熟悉的开点,Jason是核心这个文件,然后里边有很多目录,这目录中呢,其实咱主要改的是src里边内容,在里边完成咱们后续代码,那我们说几个主要的就是咱后面会改到的,我们看一下啊,第一个目录这个叫rootor。Root什么意思呢?是不是路由啊,比如说咱们后面啊,我们加这个叫讲师管理,那里边要加上一个路由,然后实现我们的功能,所以咱们路由加到这里边或怎么加咱再说,然后里边还有一个叫API。这里边是什么呢?就定义你访问的接口路径,提交方式,包括参数,还有一个叫views,写你的具体的页面部分。另外它有一个就是项目的入口是问点JS,比如大家知道啊,咱们一个后端代码中入口是那个启动类或者问方法,这里边是问点S。
07:05
然后大家看啊,这里边干了什么事情。很明确是不是引入了各个组件,最终是不是new voe,所以这是我们项目的一个基本结构。这各位给他知道啊,然后咱们后面就在这个框架中来完成咱们前端的具体开发,目前咱们把项目环境做了一个搭建,各位把这过程搭建出来,最终能反映出来看到这么一个界面就可以了,这个我们先说到这里。
我来说两句