00:00
我们来了解一下五米GS。这个是五米GS的一个,呃,官网,那它对五米的一个简介,就是插件化的企业级前端应用框架啊,注意两个词啊,一个是插件化,一个是。哎,这个前端的这个框架啊,那作为框架呢,一般它都会集成这个路由啊,比如说构建部署测试等等啊,那五米GS它的特点就是它使用插件化的方式啊,包括它内部的一些功能也都是使用插件去完成的啊,所以说那我们简单的来说,这个五米GS它什么呢?它是我们前端应用的一个框架,我们用它可以很方便的去开发我们前端的这个项目,对吧,那它的特点呢,就是它是插件化的。啊,那怎么使用呢?在这里我们可以去看一下它的文档,以及它的呃,简单的一个一个介绍啊,那我们要想要使用呢,就看它的这个快速上手。好,他这么多文档呢,就是告诉我们啊,你要去诶创建一个目录,然后。
01:04
用这个命令去创建项目,哎,接着去安装依赖启动项目等等等等啊,那这里也给大家整理好了一个简单版的一个安装的一个。呃,一个笔记啊,当然大家看着这个文档也能一步一步去安装下去啊好。那我们来快速上手去安装一下啊,首先是这个环境啊,这里也说了是要10.13以上,诶,之前我们在介绍我们的开发环境的时候,也跟大家说过,我们要保证这个诺的环境要在这个十点几的版本以上啊。啊。环境没问题之后,我们找个地方来新建一下我们的这个目录。我讲课的目录呢,我就放到这个桌面啊,我在这儿去新建一个文件夹。比如说叫哎优米GS。在这啊,新建一个目录啊,当然你也可以使用命令去创建目录。他这里就是使用的这个命令去创建的这个目录啊。
02:04
那新建完这个目录之后,你要在你的命令行或者控制台进入到这个目录。打开我们的终端啊,把这些听一下CD。U色,然后是桌面。我们的这个。优米GS啊,要确保你的所在的这个目录。就是当前这个终端,或者说是你的这个CMD,当前所在的这个目录,是我们刚才创建的这个项目目录之后。在这里面,哎,来进行创建项目啊,使用这个命令创建项目,那这里我使用的是这个,呃亚,你如果。呃,使用这个NPM也可以,推荐大家使用这个样啊。创建创建项目的过程还是呃比较快的啊。
03:02
在创建完这个项目之后,我们要进行依赖的一个安装。先等他创建完。可以看到啊,它官方的这个手册,它使用的也是这个,呃,这个这个亚啊,然后它这里。使用的都是这个样啊。因为在国内的话,我们使用这个样的话,呃,我们去下载一些相关的依赖一些包的时候,速度是比较快的啊NPM的话会比较慢,有时候你即使是改了这个国内的一些圆的时候,嗯,也也比较慢啊。这里他推荐的就是使用这个样来管理我们NPM的一个依赖。好来看一下,应该是安装完了啊。嗯,这个有时候会受到网络的影响的话,它安装不成功,多安装几次就可以了啊,再来执行一下啊。可能是我这边的网不是特别的好啊,你们如果碰见安装失败就是呃,再执行下可能就好了。
04:06
啊,因为我这边的网络一直有问题,经常装一个包得装两次三次他才装成功,嗯。啊,如果你的网络没问题,就是安装的速度,大概就是刚才这样的一个速度是比较快的啊接下来。呃,大家可以看一下,现在里面啊,会有一个呃这样的一个文件,那但是呢,没有我们的NPM的依赖,是不是我们要去安装依赖,安装依赖这个速度会比较慢一些啊,你使用这个亚in套或者直接执行这个样,或者使用这个NPM都可以啊。那这个速度呢,会稍微呃慢一点点。看一下我们的,呃,笔记在。依赖安装好之后,我们就可以使用这个啊start命令去启动我们的这个项目,可以发现前面这几步其实跟我们去使用嗯,那些比如说VIVO的呀,或者react等等的脚手架都差不多,对吧,就是创建我们的项目的目录,然后去创建项目运行这个安装依赖,只不过有的脚手架呢,它是在我们创建项目的时候自动帮我们去安装依赖,但这个这个不是啊,这个是我们要手动去安装一下依赖才可以。
05:10
啊,注意所有的这个操作都是在我们的项目的这个目录里面进行的啊。等它安装完啊,那等安等待安装的过程,我说一下Windows的这个同学,你Windows的话呢,你使用的是CMD,哎,CMD呢也是可以使用这个,呃,CD命令啊,也是可以使用这个CD命令,哎,然后呢,你可以把你的这个。这个文件啊,拖到CD命令之后,也可以去呃,快速的进入到那个目录啊,进入到这个目录,哎,当然也可以在你的呃资源管理器里面。比如说你把这想象成是Windows的资源管理器的话,上面会有一个地址栏,对吧,你在那个地址栏里面直接去,呃,输入这个CMD回车,也是可以打开所在的这个目录的CMD啊,假如这个是地址栏的话,我们想象一下,假如这个是Windows的那个呃,资源管理器的地址栏,你在这里输入CMD啊,也会直接去进入到这个目录啊,就是说会打开一个CMD会并且进入这个目录也是一个方式啊,因为这边没法给大家演示Windows。
06:17
把这个关了啊,这边已经安装完成了,安装完成之后就可以使用啊命令去启动我们的这个项目。啊,他会在我们本地去开启一个服务,然后监听一个端口。好,他今天的是8001的一个端口。因为。我这边项目还在运行的,我这边用的是800,所以他呃。八零端口就是说8000端口被占用了嘛,它自己启动那个8001,诶你具体你的访问的这个端口呢,你就根据你终端提示的这个就可以了啊,这两个地址都可以,一个是我们网卡的一个地址,一个是local host的一个地址。啊,那当我们访问这个地址加这个端口号,出现这个页面的时候,啊,出现这个效果的时候呢,就说明我们的项目已经安装完成了。
07:09
啊,那接下来我们来看一下我们这个项目都包含了什么啊,找到。啊,回到我们的这个。桌面。我们使用编辑器来打开这个项目。这里我使用的是呃web STEM啊,那这个项目呢,是我,呃在这个浏览器里给大家做演示的这个项目啊,那我新。新打开一个啊。在这里feel。Open。选到我们的这个桌面,然后找到这个项目。这里啊,直接打开这个目录就可以了。在新的一个窗口打开。
08:04
看一下啊,我们看一看这个package的杰森里面给我们提供的一些命令,以及他都安装了什么包啊。啊,给我们提供了这些命令,一个用来啊这个开发环境来做这个启动的,再一个就是呃,Build的啊,就是说构建的啊。这个还有一个是做测试的啊,可能是我们用的比较多的,就就前两个啊,接着看看他给我们安装的一些依赖。好,首先他安装了。这个啊,它的这个核心内核。哎,五米3.4的一个内核,接着呢,可以看到以这种艾特加五米GS,哎,这种斜杠开头的一般都是它的插件,嗯,它给我们装了什么插件呢?装了一个,呃,布局的一个插件,以及这个。Press set react插件。然后这些是我们开发中用到的一些东西,那我们看一看它这个这个插件是做什么的啊,那你要看这个五米的这个插件去哪看呢?找到它这个文档。
09:05
啊,看他这个文档。找到它这个插件啊,这个是它所有可用的一些插件。啊,我们看到这里给我们安装的,就是默认给我们安装的是一个,呃。Process react这样一个插件,而且在这里它是排在第一个,对吧,然后它告诉我们这个process,这个react插件呢,它是针对react应用的一个插件集啊,包含了这么多东西,对吧?大家可以看到啊,它已经把这个nt Du UI组件也给我们整合进来了,对吧?包括我们的这个d va,这个权限管理,包括我们这个国际化能力都给我们整合进来了,对吧?那我们怎么做验证呢?我们来看一看这个。NTD,哎,我们来使用一下NTD,它里面的一些来组件看一看啊,来打开这个NTD的一个文档。我们随便去找一个组件去用一下。
10:00
比如说。找一个这个日期啊,选择框。那我们就用第一个吧。好用第一个。看一下他这个源码。第一个。找到它的这个src配啊index.ts然后我们在这里呢,把我们刚才用的这个给引入进来。Input。From。And。好,看一下它能不能正常使用啊,那这个on呢,我们暂时不需要它的,呃,改变的一个回调就给它注释掉保存保存之后。回浏览器这边。可以看一下啊,已经有时间这个框了,对吧,来刷新一下。如果你的样式不正确的话呢,你要去刷新一下浏览器清楚了吧?啊有时候你比如说你新使用了一个组件,然后它自动帮你刷新的话,有时候它这个样式它不帮你刷新就可以,刚才大家也看到了样式比较乱,但是刷新下浏览器就好了,那这个时间选择框可以用说明,诶确实是把这个NTD给我们集成进来了,那是怎么集成的呢?
11:20
刚才给大家看过了,他在这个package的杰森里面啊,是集成了这样的一个插件啊,优米G。这样的一个插件啊。那这个插件呢,我们通过它的这个文档又看到了,这是react的这个插件集,它包含了这么多东西,对不对?哎,所以我们就可以直接去使用这个ND。哎,这是我们初始化的,初始化的一个项目,就是说新创建的一个五米的一个项目给我们,呃,所包含的就是说开箱即用的一些功能。接下来我们再来看一下,就说假如我们的项目开发完成之后,我们要把它给,哎,就是说打包成静态的一个文件,就是说构建成静态的文件,然后去打包发布,对吧,那它构建的命令是什么呢?啊。
12:05
我们还会在他的文档快速上手这里啊,在最后啊。这里给我们说了,我们可以使用这个build命令去构建,哎,当然我们这个笔记里面给大家整理的也有啊。那我们把这个项目先停一下。把这个先给他。停掉啊,不是在这儿启动的,是在这个终端里面启动的啊,在这启动的,我先给它停掉。CTRLC,嗯,在我们的编辑器的这个终端里面啊,也是可以直接去启动这个项目的,都一样啊,就是编辑器自带的一个终端,那我使用的是直接是就是说电脑自带的移动的停掉之后啊。使用这个build进行一个打包。好,等他这个构建完毕啊。我们来看一看这个啊,现在呢。可以看到是没有那个目录的啊,大死的目录,等这个它构建完成之后。
13:05
它会多出来一个目录,就是我们构建后的一个静态文件啊,可以看到啊,这里构建完了,然后他给我们放到了这个啊大使的这个目录里面,那我们去项目中去看一看啊,这边就会多一个这个目录,对不对,这个就是给我们构建好的一些静态文件,当然编以后的啊,就说。构建好这些文件呢,你不要直接在浏览器中打开啊,也不要什么右键在浏览器中运行,因为我们的项目都是基于服务端的一些项目啊,就是要在要部署到服务器上的一些项目,所以说我们要想测试看看我们构建的这个结果怎么样的话呢,你必须得去模拟一个服务器的一个环境,对吧,但怎么模拟呢?比较简单啊。呃,文档也有说明,我们可以使用。嗯,这个工具啊,Serve这个工具,如果你没有的话呢,去使用这个命令去安全局安装一下这个serve啊,它可以帮我们去开启一个服务器来,就是说让我们去做一些本地的一个验证啊,当然我应该是已经。
14:01
装过了我来看看啊啊,我应该是已经安装过的啊,有好,那我就可以直接去使用这个命令去来进行本地验证啊。So。后面是跟上你要启动的这个目录,就是说你要把哪个目录作为你服务器的一个根目录。哎,刚才我们说了,我们构建后的静态文件在这个目录里面对吧,所以我们把这个啊目录作为我们服务器的一个根目录,哎,在这个命令后面跟上我们当前目录下的,哎大接着回车。这时候他给我们开启了一个5000端口。然后服务器的这个根目录呢,就是我们指定的这个大字的目录,那我们现在访问这个目录,哎,访问这个服务器,它给我们开启了这个服务器了,它走的就是哪呢?走的就是这里面构建后的这个文件啊,如果没有什么意外的话,应该是和我们刚才在那个DV开发环境下页面是一样的啊,我们来去留言中看一下。
15:00
新开一个标签访问。可以看到是。给我们刚才在这里演示的是一样,对吧?啊,因为我们已经把那个本地的那个,呃,开发就是说那个。DV给关掉了是吧,所以它这里失去连接了啊,这个我们先不用管。可以看到是一样的,对不对,那这样我们就完成了本地的一个验证,本地验证没问题之后,我们就可以把这个,诶打包好的这个文件去部署到真正的服务器上,生产环境上,那这是简单的一个。啊,五米GS的一个安装和使用,以及这个构件。和验证的一个过程啊。那这小节先到这里。
我来说两句