00:00
大家好,我是学习园地的特约讲师高洛峰,这节课呢,我们继续来学习项目,那前面呢,我们创建了一个项目,那项目的初始化我们需要,嗯,有这么多目录结构和这么多文件,在组件里边是经常需要访问这些文件的,你比如说访问这里边的图片的文件,对吧?那我们看一下在项目里边访问图片的文件,我们先用它这个默认的里边的啊。当然了,这出错是原来的这个啊,我们把这个logo去掉。你看就没有错误了,对吧,这个图片,那如果我们现在在项目里边访问图片也好,你看访问组件也好,使用这种方式去访问这种方艾特服是什么呢?艾特服是外pad里边给我们提供的一个别名,代表什么,代表这个呃,Src的目录,所以是SC目录下边的什么什么的,对吧?当然了,我们把这艾特福去掉,你直接写当前目下,这个它肯定是不行的,因为找的是当前目录的,那那就得看一下是不是在当前目录下对不对,你看是不是在当前目录下找这个,那我们这个是在后组件下对不对,后组件在这,那他是找当前目录下嘛,肯定找不到了,对不对,那我们一边一你看就出错了,那在哪呢?你看上一级目录下,我们就可以找到什么,上一级目录下,用相对目录是不是就能找到上一级目录能找到,这这再往下找就能找到这个保存一下你看就可以找到了,所以呢,你使用别名代表src,使用绝对路径找也是可以的。
01:13
这样都是可以的,对不对?那图片呢,我们访问图片的时候,你看图片找不到,刚才能看到了页面就会出错,对不对?那你看我这里边图片有这么多,我随便找一个图片你看啊,IG如果在模板里边直接找图片的话,那我们只用你看,直接使用按它那个艾特福下边的SR下边的对不对?然后ass ets下边的I as下边的,比如一点九一点偏看到了吧,我们上节课把所有图片都考虑了,你看是可以的,对吧?那正常我们找的话,你看在后面组件里边也找的话,也得是什么上一级目录下这么去找,对吧?那你每次找的话都是src对不对?那我们能不能起个别名对吧?直接找access就找这个呢,不用说前面起SS呢,对吧,这样去找,那如果我们在这里边去找组件里面去找微超。这里边做一个,嗯,先不用那个图片API,我直接用date,你看如果在这里边我们想把那个图片打包,对吧?这样反问图片的时候,那我们怎么办呢?是不是我们需要建一个imgs RC吧,一个图片的位置,一个图片位置,然后我们需要打包的话,就得与Q哇,因为图片也是一个,也是一个模块,对吧?那这里边找图片的时候,它也是一样的导路径,上级目录下的,你看ii呢,是as ets,如果目录结构很深的话,你得上一层,上一层,上一层那么渠道比较麻烦,里边I'm GS里边,比如这里边二点偏近。
02:37
这样的一个图片对吧?当然这里边你看现在说失败区编译,嗯,你那这里你看咱们现在正好啊,这错了有多好,当然这个图片我们没有引用,如果引用的话,这个时候咱们在打包的时候就会把这个图片重新编译,编译成贝塔64的,当然看这个范围啊,这咱前面有讲过,看这图片大小是不是变异的,那我们在这图片下边IGSRC,那我们用IM AG img s RC加这个,如果这么加的是字串,如果想要它变成变量对吧?加这个,那如果这里边我们写的数字取零是字符串,如果加上括号,它就是整数,对不对?所以这是咱前面讲过的。
03:16
当然这个,那你看图片是不是就出来了,所以呢,我们想使用模块打包的时候,把图片打包进去,我们是这么做的一个图片。当然了,如果是在。呃,CSS里边,嗯先先不写这个CSS,等到用的时候,呃再去使用CSS呢,里边其实也是一样的,我们用到哪个哪个文件的时候呢,我们就加上呃加上脚本对吧,在这里边写上呃,CSS就可以了,在这里面用图片和我们在HTM里用图片是一样的。是一样的,那如果在这在这里边,嗯,在样式里边用图片的话,只要在模板里用,跟这种用法都是一样的,跟这种用法都是一样的,在这里边用,在这里边用和在HTM里边用起来也是一样的啊。那也就是目录层次很多的话,这种访问是很差的,所以呢,我们需要起别名。
04:05
怎么起别名呢?我们在这个文件里边,你看这是vuee的配置文件,那别名呢,是webpa的,所以呢,我们起别名的时候得借助于webpa,那vuee的配置文件里边可以引入派对吧VV配件也是model点用com JS,这个怎么去处理,在这里边如果想引入外派配置文件的话,我们需要使用con,呃,Giu。风险。卡住了啊,使用这个我们就可以把外部派D配置文件写在这里边就可以了,写在这里边当然了,我们可以在VE里边,我们要所有的路径,找路径,就是输出的路径哈,Pass,我们可以设置一个,这个都在当前目录下,它就会在当前目录下输出,就打包的时候输出当前目录下。当前我们这个项目目录下不是这个嘛,当前目录下再建一个DST的目录给我们打包,所以呢,啊,默认也是这个,你就写不写都行,对吧,然后呢,我们在外派里边设置别名的时候,是使用resolve re solvev这个插件。
05:04
然后呢,我们这里边指定别名Ali ass,那具体大家想看详细的配置的说明文档,可以到那个vuee的官方文档里边去看一下如何配置,对吧?那这里边我们就可以设置这个别名,你想设置几个设置几个,比如说直接访问ass ets,访问这个的时候,让他直接找哪个别名了,找咱说艾特服饰外派给我们供的也是一个边名,对不对,代表的就是src,那src下边的as ets,所以我们在目录里边如果使用这个边名,那么就会找这个我们保存一下,当然你写完配置文件现在是不生效的,对吧,如果想要生效怎么办呢?我们必须得重启一下。重启一下这个,呃,服务才可以,这样的话我们才能让这个别名生效,你看现在假如说就现在咱们就起这一个别名,代表SS这个,我们使用这个代表这个对不对,那我们在使用的时候,我们这就不用上级目录了,你看我们直接找asss对吧,找他的时候,那就会找哪个,是不是就会找SS下面这个,然后再找下边的image这个图片我们保存一下,你看一下那效果是一样的。
06:09
那在这个里边,你看我们也不用上节目录了,那你看在这个里边和在那个样式里边,APP里边如果支持这么写,你看行不行,刷新一下。我这会得刷新点你啊。那那个图片没有了。因为在这里边我们想启用这个别名的话,它会把这个当成一个字符串,对吧,因为这块不是变量的方式,如果想要在模板里边能访问别名的话,我们前面有一个波浪线,这样的话就启用这个别名了,就别名前面加波浪线,它才认为是别名,不然的会直接找当前摸下access是这个,然后我们再保存一下,你看这就可以了,所以呢,在模板里边直接使用别名的话,前面加一个这个启用别名,那在我们这里边在使用别名的时候也是一样的,比如说。嗯,来个div,嗯,那个井号,嗯,DEMO吧,随便演示一下DEMO,然后B可以加O背景UR对吧,我们加载的一个图片,那在这块我们也得使用这个,你比如说加上ass dt下边的IMAGS,这里边有3.png对吧,然后呢,嗯,不重复。
07:13
这样的话,我们有一个。嗯。S RC VIVO派类型。按哪出错了,好像名称写错了吧。啊as sets这个啊,那现在肯定这个图片现在我们自己用对不对,所以呢,我们在这块在最上面吧,呃,来一个div,来一个div,我们给一个宽度和高度处理,宽度高度这个div我们显示不出来。在这块给个宽度,比如说100像素高度,嗯,100像素加一个这个比个宽度和高度,然后我们加一个div div呢,我们使用我起的是ID还是还是class。啊,起的是ID,所以呢,我们这会ID加一个DEMO保存一下,你看100乘100的图片是不是就有了,所以呢,也是使用这个启用这名在我们的样式里边。
08:07
在样式里边,这里边都是通过这个去使用这名,当然了我们还可以加别名的时候,不光加这一个,还可以加很多对不对。加个逗号。你比如说我们还可以加什么呢?嗯,这个组件的我们也给它加上,你比如说这里边,当然你可以加到子目录下都是可以的,咱没有那必要,因为子目录咱们有可能随时去建,对不对?Comps,比如说所有的组件,那我们放到src下边的找,SR下的pts到这个下面去找,对吧,那再有假如说我们去应用网络,下节课我们会应用网络,那一些我们都建完吧,比如说呃,Network。在的时,我们用的时候会用这个啊,那访问这下边的,那当然在这块我们就得新建一个什么,新建一个在S边。今念一个网络请求的。
09:03
在这里边新建一个这个目录去找,那再有比如说我们再新建一下,假如说第三方的一些应用,我们uts放在这里边,那我们再建一个这个目录,Uts这里边。Uts放到这个下边就行了,还有所有的视图,页面级的视图,那我们就可以是VIEWS对吧,然后我们这块也是加上vis就可以了。这几个,那其他的需不需要呢?如果需要建别名了,你再去建这几个,只是在项目访问的时候,为了我们方便,不用一层层去找,那建完别名的话,那这块我们直接组件就可以找到这个hello word这个组件了,对不对,可以找这个了,但现在出错我们得干嘛重启一下。重启一下。重启下他才能找到这个路径啊,你看重启完了,你看hello word下边的文字就是从hello word里边获取到的,咱们就找到了,对吧,这是我们建项目的这个别名的部分,咱们就创建完了,如果需要其他别名再往里加,好谢谢大家,这先讲到这里。
我来说两句