00:00
好,这节课开始我们来学习啊,ANT3PRO啊。首先。这个是nt pro的一个文档,那我们的这节课主要讲的内容是这个安装与体验。打开你的这个文档。嗯,在这个文档的这个首页呢,我们可以先去预览它提供的一些,呃,可以用的一个内容,以及开始使用的话,会进入到一个文档的页面,我们先去预览。这个就是nt pro的一个预览啊,他给我们提供了一些我们可以直接去使用的一些页面。啊以及嗯,可以用到一些啊表单项等等。啊,通过这个界面大家也发现了,哎,跟我们在上一节课使用那个呃五米UI,它的这个区块模板,它提供的内容是一样的,对吧?那之前也一直给大家说过nt pro呢,它实际上就是呃五米,然后加上这个NTD来进行组合的,嗯,它也会使用这个区块来进行这个。
01:07
这个布局啊,那这个我们到后面再说,这节课只是来简单的去体验一下啊。那这个是他,呃,所有提供的一些内容,我们可以在这里。呃,进行一个。查看,然后找到啊,适合我们用哪些组件,我们来进行一个引用啊。说完这个预览,我们来看看哎,怎么使用,开始使用。啊,这是他简单的一个介绍啊,是一个啊中后台的前端设计解决方案。然后这个我们就直接跳过他的这个提供的一些,诶可用的一些组件啊,以及页面。呃,而且呃这个他说了,上面他列举的这些呢,都是可以在我们的这个呃区块中找到的,他这里说的这个区块呢,啊,实际上呃也是我们呃之前讲的那个五米的那个那个区块,他们这个概念都是一样的,因为它的底层本来就是使用呃五米GS来写的,所以我们在讲这个之前也是先讲的五米GS,嗯接着这个介绍啊什么的,我们就不看了,直接看安装啊,只有一个命令,然后要新创建一个空的文件夹作为项目。
02:15
目录。来打开我们的终端,我们在这个桌面啊,现在是在我的这个桌面,我们来新建文件夹,那之前。我们讲五米的时候,是也是在桌面去创建了这样一个文件夹,对吧?啊,那创建这个文件夹呢,你也可以使用图形化的,比如右键新建文件夹,但是一定要确保你创建完文件夹之后,你要进入到这个文件夹里面,就是你的控制台啊,或者说终端进入到你的文件夹里面再去操作,那电压我们来创建一个antb。啊,这样一个目录,然后进到这个目录里面an TD。Pro,然后在这个目录里面使用它这个安装命令啊,推荐使用这个样啊,它这个速度还是。会快些。
03:01
呃,在安装的时候呢,它会给我们呃,出现一些安装的一个选项啊,比如说。啊,第一个啊,就是我们要使用的,呃,一个就是说要安装使用的一个类型,那我们。就是安装这个nt pro。好,接着继续往下走。然后版本版本的话呢,呃,这里我们先使用V4吧,因为V5呢,它也刚发布不久,然后很多的一些新的特性和组件,和现有的一些,呃,第三方的一些组件啊,就是说呃,兼容性会有些问题,那我们使用这个V4。然后这个是你要使用哪种语言风格啊,如果对呃typescript比较熟的话,可以使用typescript,如果对这个啊,就说没接触过typescript,我们也可以使用GS去来写,都是一样的啊。那这里我们就呃选GS啊。然后到了这个选项啊,他问问我们是需要这个,呃,所有的这个区块啊,或者说是仅仅是一个简单的脚手架啊,这有什么区别呢?如果我们选择了啊所有的这个区块的话啊,最终我们的项目是和什么一样的,和我们预览的这个是一样的。
04:12
清楚吧,那如果我们选择的就是一个简单的脚手架,它只给我们提供了一些核心的一些内容,那页面啊,还有这些呃路由啊,要我们自己去呃配置,那我们先来安装一个呃完整的,然后让大家在本地来体验一下,那在我们在学习这个0t pro的时候,我们再去中间就是说装这个脚手架去学习啊,来安装这个完整的。啊,这个速度还是比较快的,因为它只是执行一些呃配置和一些呃这个文件的生成过程。嗯,这时候呢,我们还要去安装它相关的一个依赖。嗯,在下面他也有说啊,我们来看看这个文档,在最下面这个母乳结构,这个我们先跳过啊,我们用一节单门单独去说。好,我们要去安装依赖使用这个NPM明道或者这个亚因道啊。
05:04
呃,推荐使用这个这个样啊。找到我们的终端第因道啊,因道也可以省略,直接让也可以。呃,这个安装的时候呢,有时候呃也会失败,多装几次就可以了。他有时候说不定就是说请求哪个包就卡那不动了。啊,文件还是比较多的啊,因为我们选择了这个完整的,所以他要把它用到的所有的这个区块啊,都进行一个安装和下载。哎,如果我们是安装的就是那个simple那个简单的一个脚手架的话,那个速度还是比较快的。呃,现在的装呢,在安装完成之后呢,我们需要一个命令去启动我们的这个项目,启动之后呢,我们就可以通过这个地址去访问。
06:06
来看一下已经安装完成了,我们来使用这个呃样start或者使用n PM start都可以啊。嗯,可以看到它的启动的命令啊,还是使用的这个优米DV对吧。啊,这也印证了他的,呃。确实是用在这个优美的基础上,进行了一些自己的一些配置啊,一些封装来实现的这个nt pro。我们来看一下这个文档,后面还有说什么啊,后面就没有了啊。看一下啊,稍等一下。那我先趁着这个时间把这个后续的步骤说一下吧,就是在我们安装完成之后,它这个事例呢,是。就是装的那个简单的那个啊,所以没有那么多东西。
07:00
我们装的完整的会比较多,呃简单的呢,它只是呃内建的就是模拟数据啊,呃,一些状态管理这个国际化全局路由等等一些比较实用的啊开发啊,当我们做完这个之后呢,他说了这个后续的步骤啊,基于区块开发和传统开发模式。这个基于区块开发,哎,就是我们上节课讲那个五米UI的时候啊,讲那个区块的时候,就那种模式啊,就是当我们选择基于区块开发的时候,我们需要去装一个五米UI,然后它这里就会有个那个小球,然后我们可以去,呃,点击那个小球去选择我们的区块或者模板啊。这是齐好吧,那传统开发呢,就是。呃,简简单单的一个脚手架,那需要页面啊布局什么的都要我们自己去写啊,啊就是稍微介绍一下。接着看一下,应该是。启动完了啊。还在走啊,速度稍微有点慢。
08:05
啊,这时候我们就可以通过这个。8000端口去访问了,来复制。找一个页面,我们来访问一下。好可以看到啊,那这个界面呢,其实跟他提供的线上的这个预览是一模一样的,那这个就是我们选择的这个完整的一个安装。方便大家去呃进行呃代码的一个拷贝对吧,那有时候比如你想要这个的时候,你就可以在你安装好的这个目录里面,哎,找到对应的内容,去复制它对应的这个组件。啊,这是一种方法啊,当然也可以是使用区块直接在呃,那个区块管理里面,我们用这个区块或者模板来进行安装也可以。那安装完这个完整的呢,嗯,大家可以在自己的这个本地就可以啊,随便去体验了。那接下来呢,我们来安装一个。
09:01
基本的啊,就是说基本的脚手架给大家作为对比来看一下啊。那这个我先停掉啊。嗯,CD改点杠,我先回到上一层目录,因为现在我还是在这个项目里面的这个目录,回到上一层目录啊,现在就回到了桌面。回到桌面之后,我再来创建一个目录,Ad-pro-simple。来现在进到这个里面啊,一个简单的脚手架。在这里面呢,我来执行安装啊create。优米啊,可以看到它的这个安装命令就是这个。这个五米啊。来继续,我们进行选择。首先啊,还是选择这个啊,V4回车。之后。嗯。呃,刚才好像是我按的快了,这个直接就选择script啊,没事啊,我们继续。选择这个,呃,简单的。
10:02
然后这个他会问我们是否要,呃,就是选择这个NTD的一个版本,那我们用四版本就可以了。啊,安装完成了,哎,同样的需要去。啊,因套安装它的依赖。这个现在卡这不动,我感觉它已经安装不下去了,我先把它停掉,重新执行一下啊。安装完成了啊,前面经过几次的一个失败啊,后来嗯,可能是这个缓存的影响啊,我就把这个缓存给清理一下,然后再装就成功了啊,如果大家比如说试了两次或者三次还不行的话,那就尝试把缓存清一下再去尝试。安装完成之后。依赖安装完成之后,我们就可以使用它的这个他的命令来启动我们的这个项目。
11:04
启动之后也是会给我们呃开启一个8000端口的一个呃服务器,然后我们就可以去访问我们的项目。这个是,呃,简单的一个脚手架。然后我们来看看他的界面和我们刚才安装的这种完完整版就是做一个对比。好的,已经启动了,我们来复制这个地址。去浏览器中啊,看一下整天。
12:04
这是我们安装的这个,诶脚手架就比较简单,只有一个欢迎页,然后给我们提供了一个简单的一个表格的查询啊。然后。啊,其实呢啊,大家可以看到它是一个登录状态,对吧,那为什么是登录状态呢?这是因为它默认使用的这个Mo的数据,包括这些数据它都是使用的这个呃,Mo去。去获取的,那如果我们想看到登录院怎么办呢?哎,我们就不要使用这个命令去启动了,哎,不要使用这个他的命令去启动,那它具体都有哪些启动命令呢?哎,我们打开这个文件来看一看啊。我们来使用Vs code打开。Open。找到桌面,诶,我们的这个项目打开。这时候哎,可以在这看到我们的这个项目的一个目录。那我们来看一下它的启动的命令啊。
13:00
还有点节省。啊,这是它所有的其中的一个脚本比较多,对吧,那我们刚才使用的是什么呢?是start啊,Start使用的是优米DV,因为它默认会去开启这个,呃慕,那我们要不想使用木呢,往下找可以看到一个no杠。啊,它是通过这个环境变量去控制的啊,就是木口等于那那我们来使用这个命令来启动一下,就是不走木,我们就能看到啊这个。登录页面,呃,因为现在我们的项目呢,你一进来他走了慕,它就自动登录了,对吧?嗯。那。我们来。在这里。停一下啊。啊,使用这个命令来启动。那这时候他就不走,梦在开发阶段也是一样,如果我们想要使用慕数据,就呃亚单了,如果我们有自己现成的API去使用,那就使用这个命令,不去使用这个,哎,梦。
14:02
等他启动完成给大家看一下。好的,已经启动完成,我们去刷新一下页面啊,可以看到它自己刷新了,而且刷新之后,呃,给我们重定向的登录啊,并且告诉我们请求的这个API不存在,因为现在他就没有走幕,他去请求这个API去获取用户数据的话就拿不到。啊,那这是我们的一个登录页面啊。然后提交的话,他会把这个用户信息提交到这个地址嘛,那这个地址呢。嗯,也不存在,因为之前都是走的Mo嘛,所以现在我们关了之后,又没有去修改它的API,所以就看不了了,那当我们尝试去访问这个后台的时候呢,嗯,他都会给我们跳登录,那他是做了一层啊这个拦截啊,我们之前给大家讲这个无密的时候,哎,也知道我们怎么去做这个拦截,对吧?嗯,也是一样的啊。
15:01
那这一节课呢,就是带大家简单的去使用一下和体验一下这个nt pro啊,那在后续的。这个课程中将会对这个nt pro进行。啊,比较。简单的一个讲解吧,因为呃不会讲太详细,因为它整个就是使用的这个五米嘛,那五米我们已经讲的很细了,那只会介绍一下,呃,就是说ntd pro他自己,呃。做了一些自己的一些处理,以及和这个污啊有些不同的一个地方,那这块我们会讲,但是很多相似的地方我们就可能会稍微提一下。好,这小节先到这里。
我来说两句