00:00
在脚手架安装完成之后,这节课我们来看一看它的这个各个目录都有什么作用啊,哎,这个上节课我是删了,然后我又安装上了啊,因为没有它的话,我项目运行不了对吧?好,那我先把这个项目给运行起来。在这个项目目录下啊执行。Start或者是n PM start诶之后。它会帮我们自动打开浏览器啊。稍等一下啊,项目已经运行完毕,那接下来就可以把它最小化了啊。最小化的话,它没有结束啊,除非我们CTRL加C哎,强制把它给结束掉才行啊,那最小化让它在后台运行嘛,啊,我们从上面哎往这里去看啊。哎,首先啊,整个来看一下的话,这里多了一个这这样一个文件,对不对,这是它,呃,检查完语法之后,它多出来的一个文件,注意它的颜色是红色,清楚了吧,你看它是它是这个,诶浅黄色啊,浅绿色,它是红色对不对啊,如果比如说这里我随便去改一个文件啊,我在这随便写点东西,你看它会变成这个蓝色,那这个颜色呢,是因为。
01:08
啊,就是说get的原因。清楚了吧,就是说我们在使用脚手架创建react项目的时候,它自动去帮我们啊,把它给初始化成了一个get仓库啊,所以就有了这样的一些颜色,哎,红色是新增的一个文件,蓝色是我们做了一个修改,那这种浅绿色呢,是不被get给管理的文件,那不被getate给管理的文件在哪配置呢?是在这配置。看到了吗?他把这个给忽略了,哎,所以这些文件是不被啊get给管理的,好,那其实呃这里呢,我们就先把这个getate相关的就都删掉吧,我们暂时用不着,但如果我们真正在商业项目中,我们去开发的话,我们是要使用get这种版本控制的,对吧,我们要把我们的代码,因为我们团队可能有很多人在开发,要有一个版本控制能去呃整合哎,各个人的一个代码啊。这里先给大家说一下啊,Getate呢,如果它是一个gate的一个仓库的话,对吧,它会有一个点get隐藏文件,因为是隐藏文件,所以这里我们看不到,诶那怎么看呢?还是在终端里面是可以看到的啊,如果你是Windows电脑,你在Windows资源管理器里面也可以看到。
02:12
清楚吧,啊,这里我就在这里新开一个终端,然后给大家看一下就可以了啊呃,如果你是Windows电脑,你直接在你的Windows的资源管理器,你去进到这个目录,你也会看到一个点get的一个隐藏文件,哎,前提是你已经设置了查看里面显示所有隐藏文件啊好,这里我新开了一个终端对吧?注意那我新开了个终端,它还是会在我的项目目录下。啊,然后呃,我为什么直接拿这个web STEM这么给大家说呢?因为你在Windows下,你去如果安装了web STEM的话,呃,这些用法都是一样的,包括这个路径什么的,清楚了吧,你如果用的是Vs code的呀,还有呃,其他的一些编辑器,呃,比如像这个啊,这个HB的等等,你它都会提供这种内置的终端,用法都差不多啊。啊,我们也不去用太复杂的命令,能会用这个CD能会去,哎,进入目录就可以对吧。
03:01
哎,能知道现在在什么录目录,哎,能去使用CD去进入目录就行了,那现在是当然是在这个react,是不是我们的项目录,那我们要进到这个零一里面,诶来CD08TAB,然后在01TAB好回车,哎,这时候就在这个目录下了,那我们刚才说了,如果是get的话,它有一个点get隐藏文件,这里是看不到的,哎如果想看隐藏文件的话呢,呃,你Windows直接在资源管理资源管理器里面去看,那像这种unnux啊,或者Linux,你要使用这种LS-A。哎,然后杠A的话呢,就是显示所有嘛,哦啊好。回撤是不是可以看到这个点,这个对不对。清楚了吧啊。那其实这个G的文件呢,我们就,嗯,你想删就删掉,不想删就扔这吧啊。哎,就放这吧,我们也也不删他了啊。因为删掉的话又会给大家去设计引入一些其他的命令,大家就更记不住了,你先扔这吧,啊,只是给大家说一下这些颜色啊。
04:04
这个就先关了啊,不管它了。来,接着往上,从上往下看。那第一个目录啊,这个是存放了,哎,我们这个呃,RA他项目所有用到的一些依赖对不对,所有用到的一些库啊,是在这个里面。你去往下去翻啊,你会可以看看他都用了什么,哎,是不是用了这个背包,然后再往下找还用了什么。接着往下找,往下找来,我们找到W这里啊。往下找啊,他这用了比较多啊。看这里,哎,W这里是不是使用了webpack,哎,如果没有web pack,它这个项目它就构建不起来。好了,这个就不做过多的一个说明啊,那把这个也关了啊。
05:00
这个我刚才更改的,还撤回来。好。Get,说完了是吧,这个目录也说完了啊。那接着就看这节课,我们主要看这个public目录啊,它里面大概有这么几个文件,哎,首先第一个是这个icon icon呢这个大家知道,它是网站的这个图标是不是啊,它就是一个图片,这个我们就先不看啊。那也可以给大家看一下,就是这里显示这个小图标,看到了没有,哎,就这个鼠标鼠标显示的这里这个小图标,哎,啊控制图标好。接着看这个index的HL那。这个就是。我们的index文件。对吧,那我们之前学的,我们是不是要把这个react去呃。组件给挂载到一个容器上,对不对,可以看到,哎,这里就是给我们准备的这个容器,那我们之前用的是test,它这里用的root是吧,我们来看看这个index文件都有哪些东西啊,我先把这些注释都删掉啊。这些猪是没用的,先都删掉啊。
06:02
这个文件我们等一下来看,我来先说一说这个index啊,它是我们的这个整个项目的一个。主页面,哎,我们想一想,之前我们写react,是不是我们得创建完主件得往一个这个容器上去挂载,对吧?啊,是不是得放到一个页面上面,对不对,那放到哪个页面,哎,就是这个页面主页面啊,那那如果诶我现在还有一个用户中心的一个页面,我是不是在这里再建一个,呃优色展示太B呢,我就告诉大家不是的啊,我们react项目呢,它有且只有一个这么一个主页面,那其他的页面怎么办?比如说哎这个注册登录等等等等等一系列其他页面怎么办?其他的页面哎,我们都会写成组件的形式,注意啊,React我们的主页面只有这么一个清楚吧,所以也被称为什么我们写react或者view的项目也会被称为这种SPA啊,这个SPA大家不要啊,理解错了啊,它是三个三个单词的一个缩写啊,Single page景啊,Application,那single就是单个的嘛,是吧,单个,然后配置页面嘛,好,就是我们常说的APP应用啊,就是说单页应用啊。
07:06
这给大家写上啊,单页应用。清楚了吧,啊SSPG,所以说我们这个index a它这个页面是主页面,而且react它这个主页面有只有这么一个,哎,我们如果有其他的页面,我们会通过组件的形式去组织这些页面,而不是说你再去建,嗯,其他的这个H面,这个大家一定要注意啊。好,这个就不说了啊,那接着再往下看,也是一个图片,对不对,这也是一个图片,这是一个,呃,节省一个配置文件,这是一个text文本,哎,通过这些文件我们会发现一个规律啊,那public它里面放的都是什么,你看要么是。Al,要么是图片对不对?哎,所以说public它主要去放一些静态资源,那静态资源主要都有哪些,比如说我们的呃CS,一些公共的图片,比如说我们的呃HL对不对等等,这些静态资源我们是放到这个public目录下。
08:05
清楚了吧,好,那接下来呢,就看一看这个文件吧,因为这些都是图片,没什么要看的呀,对不对,他肯定是某个地方用到的这些图片,对吧?那。那我们接着往下看的话,这个已经说完了,是不是是我们的,呃,这里用了是不是icon。来接下来就该看这个index.al一行一行看啊前面这些啊,H5的这些东西我就不说了,哎,这个是字符集是不是。给大家写上吧,把注释啊。嗯,字符集啊。咱来补一下啊。字符机。接着。看一下啊,看一下第二个,哎,这个这个是什么,你看它的这个link link引入了什么,注意这个I对吧,它引的不是样式,我们样式是那个style那个什么,是不是这个I要是icon,所以它引的是一个这个图标。就是我们的这个icon图标。
09:01
啊。注意啊,那。所以说我们图标的地址是什么。这里把注释前给写上啊I图标,它这里用了什么?PUBLIC100分号public。看到了吧,啊,那这个它就是,呃,我们的软焊的脚趾架,它提供的一个关键字,它就指向谁,指向这个public,这个目录是什么,哎,在我们用了学了这个路由之后,去使用它会非常的方便,哎,当然你如果你不这么去用,你用我们传统的形式啊,你看我们这个文件是不是在这,图片是不是在这,那是不是用当前目录也可以来我们来看一下。你当前目录点。来回到浏览器,你去刷新是不是也是一样的。看到了吧,啊好,那我们这里还是用这个关键字啊,来复制给大家写一下啊指向。嗯,表示吧,表示这个public目录清楚了吧,哎,这个关键字啊,哎,接着往下看,哎这个。
10:02
这个啊。注意看这些它是怎么做的,这个移动端适配的清楚了吧,因为我们在我们移动端你看比如说我们手机屏幕一般比较小,那你电脑你的PC你的屏幕比较大,那你一个网站你如何?呃能更好的去在这个移动端去显示,而不出现那种,比如说呃,这个我们写的诶200PX的宽度,然后你在PC上还是这样的,在一个该是这样的,就会出现呃不好的一些效果,对吧,那我们就可以去设置,诶比如说这个宽度等于这个设备的宽度等等,禁止缩放等等。是吧,嗯,啊,比如说这个缩放的比例是一什么样的等等啊,这个就是。给大家写上做这个移动端的适配啊。移动端适配。接着看这个啊。这个我们通过这个你去翻译的话,你看到是主题颜色对不对,它是什么的主题颜色。啊,这个其实很少见啊,这个东西。
11:00
他改的是什么颜色呢?他改的是浏览器中啊。给大家看一下浏览器中啊,是浏览器中这个标签页,还有这个地址栏的一个颜色。清楚了吧,但是你这么去改,你它不会生效的。为什么说它比较少见的,因为它只有在安卓手机上比较适用,而且是比较早版本的安卓,现在新版本的好像好像也不行了。是改变。嗯,设置吧,设置标签页。和地址栏的颜色。啊,一般在什么呢,安卓手机。安卓手机,而且还得用原生浏览器,你用了其他的一些第三方浏览器还不一定支持,比如你下个UC对吧,下个这个其他浏览器还不一定支持原生浏览器啊。而且还跟这个安卓系统的版本有关系,所以这个标签基本不用啊,比较少见,来接着看这个,这个大家就比较常见是吧,网站的一个描述,就在搜索引擎去搜索输入我们的网站的时候,他会去看我们这个描述,哎,我们这个网站是做什么的,然后从中去给我们,呃。
12:08
分析出啊一些关键字啊,一般是在这这个SEO的时候会。会设置好这个你的网站这些像关键字啊,还有这个描述啊,一定要给写好啊。网站描述啊。就是说搜索引擎输入的时候会用。嗯。收录的时候会用啊,好接着往下看啊。那这个我们先来看单词的意思啊,Apple啊touch icon Apple首先是苹果对不对,苹果,然后哎,点击的一个图标对吧,触摸的一个图标是不是,所以说这里我们就可以去开始写注释了。那干什么呢?首先苹果它肯定是苹果苹果手机的苹果系统,哎,点击的一个图标对不对啊,这个呢,我就不给大家演示了,我说一下它干什么的,那你如果用苹果呃手机对吧,用他的S浏览器。
13:06
去访问一个网址,哎,比如说你访问淘宝,那你在这个浏览器啊,你去点开这个分享的时候,就分享这个页面的时候,它在这个分享的时候,它会弹出来很多选项,对吧?它其中有个选项就是说你添加到桌面啊,或者发送到桌面,这个大家应该都见过,对吧?因为安卓上面也有,就是你浏览的一个网站,你可以把这个网页去发送到一个桌面,做一个快捷方式,然后你点的话就可以直接访问网页,诶这个就是我们发送到桌面之后。哎,它你这个网页哎,用什么图标去放到你的这个桌面上,你看我们桌面上每个应用是不是都有图标,因为我们这个是,呃,把这个网页去保存到了这个桌面上,所以说啊,这里我们可以去设定它一个图标。清楚了吧,啊,这个也不是特别常用,因为有这个限制啊,只有苹果手机啊,在苹果手机上。嗯。苹果这个。
14:00
手机哎,浏览器上自带的啊,自带的这个浏览器上。市场访问。网站啊,发送到。哎,桌面的时候应用的一个图标。使用的图标啊,哎,就做这么一个用啊。好,它使用的是A。他这个下面的这个192的这个图片是不是啊,其实就是react的它的这个图片啊。哎,就是如果我们访问这个软的项目,我们把它给,呃。保存到了这个手机的这个桌面上,哎,他就会用这个图标做应用的一个图标,好接着再来看这个啊。这个啊,他是做什么的,他是做这个。嗯,壳应用的一些相关的一些配置啊,那这里给大家说一下,那什么是壳应用。壳应用啊,把注释写到这里,那可用呢,也就是说给应用加壳啊给。
15:00
也就是说应用加壳,那应用为什么要加壳?来,我来举个例子,假如我们现在写的是一个,呃,这个移动端的一个项目,对吧,那在这个浏览器市场访问,诶挺好的,但是现在我们又决定要去做这个APP,做这个iOS,还做这个安卓怎么办?你再去招兵买马,招两个团队,还招个iOS团队,招个安卓团队,哎,等我们把人凑齐了,然后把应用开发的差不多了。那整个的这个周期是不是时间特别特别长啊,那我们移动端的应用已经做完了,为什么我不能给我的这个移动端的这个应用,我去加一个子,哎,我去加一个这个iOS的壳子,对吧?让你能在这个iOS上去安装,我再给你加一个安卓的壳子,哎,让你在这个啊这个安卓上能安装这个应用,这样是不是比较快,我只要去写个移动端的就可以了,我不用再去啊找这个。IOS的团队专专门去做iOS是吧,再找这个安卓团队专门做安卓,不用这么麻烦吧,啊这个就是应用夹壳啊,也就是在我们的这个移动端应用外面套一层壳子,那套什么子呢?你就可以在什么系统上去用,诶比如我们套iOS的壳子就可以在这个iOS上去用,诶套这个安卓的壳子就可以在安卓上去用啊大家也可以来看一下,比如我们来看一下这个啊淘宝。
16:19
来打开它的移动端。点这啊,弹开移动端,点完之后呢,你再再刷新一下,你会发现啊,它的这个页面跟我们手机上。就是说用的淘宝的那个APP是不是很像。对不对,那他是不是也可能用的夹壳,你看他移动端做的是这样的,对不对,那我们手机上安装的淘宝的这个APP,我们访问的好像也是这个界面差不多对不对?哎,说明什么?它可能也是对这个应用做了一个加壳。清楚了吧,嗯,加壳的好处也跟大家说了,只要我们写完移动端,只要加完壳,诶就可以直接iOS安卓都可以去用了。好,那大家知道什么是加快应用以后啊,那接下来就是说的这个文件啊,那你一个应用你装到手机上。
17:02
你你是不是得有应用的图片是吧,得有应用的这个名字对不对,而且你在这这个使用这个应用的时候,有的应用是不是还要获取你的这个,比如说啊录音权限啊,获取你这个访问你这个相册的权限等等等等,对不对,那既然我们一个移动端的一个页面,我们怎么来控制这些东西呢?那就要需要用到这个配置文件啊,就是它啊来点开看一下你会发现,诶,他设置了这个图片对不对,你看,但是他用了好几个图片,用的尺寸都不一样,对吧?那说明是说根据你的屏幕,它会去这个进行一个适配。知道吧,如果你的屏幕比较大,它会用比较大点的图片,图片比较小,就会用的小小点的图片是不是,而且你看一些简单的信息,比如说你的应用的名字,你看短名字是吧,还有应用的一个长的一个名字,长的名字相当于一个呃,稍微长点点的一个描述,对不对,还有其他的一些配置啊。包括你这个背景的颜色啊等等一些设置,哎,这就是哎应用加壳时所用的一些配置,当然你如果真正的是给应用做加壳的时候,你这些配置完全不够啊,差得远了。
18:01
清楚了吧,哎,这个是应用夹壳。呃,用到的一些配置啊,啊这个文件啊,哎,也没有什么用啊,暂时没有什么用,就是我们不做,如果不做这种应用加和的话,暂时没有什么用啊。啊,这个就不说了,网站的这个标题是吧,Title好。接着来看这个包里面,哎,包里面呢,就两行代码一个呃,No script,哎,这个其实看翻指得就没有脚本啊,就是说你浏览器你不能运行脚本的时候,就会显示这个是吧,那这个呢。哎,看它ID root它是什么,它是我们这个react它的一个,哎,挂载的一个容器啊,那我们之前写这个react的例子,我们写完这个组件,是不是要把这个组件去挂载到,哎,我们。页面中的一个容器中,对不对,只不过我们那里ID用的是test是吧,那里ID用的test,这里它是用的root而已嘛。清楚了吧,只不过我们是把GS都写到了最下面,它是把GS都拆分出去了啊,拆分到了src里面。
19:00
index.gs来看一下这里它是不是在使用。使用这个组件,你看使用这个APP这个组件,然后是不是把它给挂载到了这个root。这个容器上对吧,那就是这个root。清楚了吗?好,那这个我们先关了啊,呃,这个呃是当你浏览器不能运行GS的时候,它会显示啊。这个就不给大家演示了啊,现在哪有浏览器不支持这个GS的啊。好,那这个文件就给大家说完了,好吧,来接着看其他的这个文件,好,这个文件呢。呃,刚才在说这个的时候,是不是也给大家说了,这里面是放了我们应用加和时候要用到的一些配置啊。那接着最后一个啊,这个。Robots text啊,它是做什么的,它是在这个,哎,爬虫去爬取我们的这个网站的时候,我们可以对爬虫做一些限制啊,就是说哪些东西能爬,哪些东西不能爬。清楚了吧?是这个文件啊好。这个public就给大家介绍完了,其实嗯,主要来看的话,就这个index.tl比较重要,对吧?那其他的就是无非是放了一些啊图片啊什么等等等我们用到的一些静态资源啊,那这也是public主要的一个作用啊,就是存放一些静态资源,也可以看到它给我们提供了这么一个关键字,可以让我们直接去使用public下面,哎这个目录对吧?那如果我们比如说我们往里面放了一个图片,就可以使用哎这个关键字,加上我们图片的一个诶路径,就可以去使用这个图片了。
20:29
清楚吧,啊,这是public主要的一个作用啊,存放一些静态资源。
我来说两句