00:00
大家好,我是学习园地的特约讲师高若峰,上节课呢,我们基本上把首页的工作做完了,但是首页里边像这个班的图对吧,我能片我们还没有去处理,咱们说了用第三方的组件,还有呢,首页里边你看我们一次刷新的时候,他都需要从服务器新拉数据,对吧?然后呢,在页面没有显示数据之前,它有可能是什么?是一片空白对吧?如果网速慢的话,那我们看上去非常的不友好,所以呢,我们把图片给用上了加载,那这两个功能做完,咱们首页的功能就差不多了,那我们想做活动片,咱们说用开始学第三方的,什么第三方的组件库,那组件库呢,其实有很多,也就是常见的功能,像这些啊,导航啊对吧,标题栏啊,所有的组件库里都有小的按钮对吧?提示框等等都有,咱们如果会使用第三方组件库,能大大加快你的开发速度,不仅能加快你的开发速度,那你做的程序的效果还感觉非常的专业,都是别人给你写好的,拿过来直接用就可以了,你需要的就是像大积木一样,把精力放在业务流程上即可,外观样式拿组件去拼装就OK了,那现在呃,Vuee3.0支持的,呃,3.0之后支持的组件库,像有赞的VNT那个就是比较好的,那呃给大家推荐使用。
01:15
我比较使喜欢使用这种VNT能搜索一下,你看有赞有赞的VT,它有这么几个版本,这个是演示的对吧,有APP的轻量级的可以做小程序,小程序我们会选择这个组件库去使用。但是我们现在这个做的不是小程序,那我们得选择什么PC端的这个去应用的,那就是这个通用的,而且这个刚才看看到标签了,支持VUEE3,看到了吗?支持VE3这个组件库,那下载安装的时候呢,那我们直接就是用NPM包安装方式就行了,啊我们看一下这是它的手册。嗯,有赞的轻面积可靠的移动端的vuee的组件库,那这里边都有什么呢?你看这里边儿有很多个组件,小到一个什么一个按钮,那就可以有各种按钮,你想用的话直接引入,然后呢,我们直接使用这些按钮就行了。
02:09
这些按钮非常漂亮,还有什么加载状态的按钮,支持按钮,还有单元格啊,然后呢,图标各种图标啊,比如说这种我们购物车的一个图标,我们就可以用这种对吧,然后嗯。图片,图片呢还支持懒加载,懒加载呢,就是先显示一张默认的图片,然后把这个位置占着,然后呢加载过来再替换上去,其实就是懒加载嘛,还有布局,我们可以设置布局,还有这个弹出层,我们一点击你看左弹出右弹出,可以从底部弹出,从底部弹出对吧?我们做支付什么的,经常会选择这个组件。还有样式啊。这个。左弹出一个弹出框对吧,还有轻提示,这个呢,咱们经常使用的成功的提示对吧?文字的提示加载提示正在加载中对吧,然后呢,可以自定义图标的自定义提醒对吧。
03:02
然后除了这个提示,咱们后边还有其他提示,然后假如说你这里边想用上日些日历,那这里边可以一些日历的组件都不用自己去写了。日历的,还有地区选择的这样,这样选择的几点都有,时间选择的这样还有输入框,咱们做登录注册的时候,对吧,就用这种输入框就可以了,还有表单。啊,然后数字键盘。没有。然后搜评分搜索模块。这里边你可以在你的标头那块,假如说需要搜索,这搜索是咱们作业,我就不影响啊,因为功能你可以加那组件,咱们接口里边都提供搜索,然后滑块。这样滑动对吧。嗯,步行器,比如说咱们做购物车的时候会用到这种。然后Switch开关这样的话,咱们比如说缺省的地址,咱们会使用到这个开关上传更改头像的时候,咱们会用到这个上传,你点击这样的一个组件基本用法,你点击这个你的一个上传的一个图片就可以了。
04:05
还有反馈组件,比如说一些呃,动作面板啊,选型一选项二啊这样的,还有弹出框对话框。那这样确定。块异步的对吧,取消附件。都有,然后。还有很多这里边啊,这个消息通知这点也是定用的,在上面通知的主要通知,成功通知,危险通知对吧,警告通知,这里边还可以自定义颜色的。这通知的这样的一个方式,然后还有这样的一个环形进度条。分割线都有,那比如说咱们这里边用的轮播wap对吧,轮播图你看鼠标到一半的时候,他没到一半的,他回去到过一半的时候你看就展示。对吧,这轮播图,那咱们就可以换成这个轮播图。其他的还有很多,特别是像我们选择做的这个商城,跟商城相关的组件业务组织很多,比如商城的一个卡片,你看商品名称,带标签的名称描述价格,原价这个价,然后库存量,对吧,还可以自定义按钮都是可以的。
05:10
还有几个比较废弃的,还有区域城市选择呢,对吧,这样呢,咱们做地址的时候,咱们也会用到这样的一个模式,那咱们看一下它怎么安装,怎么使用第三方组件,并不是说直接一个一个去下载,它可以一起去下载,也可以一次都导入去使用。这是介绍看V12V13。好。嗯。这块我们看一下,找一下它的安装快速上手。你看我们安装的时候可以,如果是VUE3安装的时候,你可以是这么去安装,对吧,在VE3项目中。可以通过NPM,也可以通过亚M去安装,那也可以通过CDN引入,那咱们肯定是通过什么,通过NPM这种方式去安装这个组件库。那我们在这里边退出。
06:02
先退出来,然后我们呃,粘贴一下拿过来。让在运行时依赖,因为这些组件肯定都是在运行的时候去依赖的。然后在脚本里边,这是我们在CDN上怎么使用,那通过脚手架安装,当然这块是先安装的脚手架创建项目,对不对,然后可以通过VUEUI,就是给我们一个图形界面,通过这个去安装的。然后引入怎么组件怎么引入,那我们还需要装什么?需要装一个八包的一个插件,是一款巴布插件,它会在编译过程中将这些的写法自动转换为引入的方式,也就是我们如果装这个插件了,我们就不用在每个组页面里边一个一个导入了。就不用一个一个导入了,就可以一次性全导入,然后我们在页面里边就不用说先包含哪个组件库,然后呢,在呃注册组件,然后再使用组件,直接使用就可以了,所以呢,这个也是我们需要安装的一个形式。这里边嗯,八点配置文件在这里边,需要把这个插件写上,然后在使用的时候,我们就导入一个一个导入就行了。
07:06
那手动安装的时候呢,就是比如说我们用个按钮,你就得需要导入这个库,对吧,再导入样式等等,然后导入全部样式,咱们可以直接在安装VB的时候,一次性全导入所有的导入所有,因为那组件都肯定都带有样式,对不对,你可以把样式一次性全导入,然后呢,导入所有的组件加给。就可以了。那我们看一下装不装,如果装完这个库装完了,那我们还需要装一个这个插件。嗯,装上这个插件。这个。这个呢,当然就是在呃,开发时候依赖的。右键粘贴又加过来了。CTRLC粘贴一下。这块六件粘贴过来,再把这装上,装上之后我们需要在这个插件里边,也就是八包的插件里边,那在这里边我们需要把我们的需要的这个功能给装上。
08:04
那我们就复制他一个代码。这块你看在插件这块导入,然后呢库名是VT,然后呢库的目录是这个ES,然后样式是真VT这个组件,通过这个插件我们把这块CRC复制一下,粘到我们的这个下边加个逗号,然后把这个完整的插件都粘过来,那都粘过来之后。我们在这里边用了,那我们需要在所有的地方都引入,按照他这种方式,你看。我们得导入这里边所有的样式,对吧,咱们可以一个一个导入,也可以全部导入,那全部导入以前用一直不好使,但是我也习惯用一个一个的去导入,用哪个组件导入哪个组件,那我们在嗯这个主程序里边,在这块我们就需要多导入。一些在这里边需要导入一下,比如说我们先需要安把所有的样式都导入进来,这样的话我们就不用一个一个的去导入样式了。
09:04
把所有的样式一次性都导入进来,这样的话,我们就从这个库里边把他的CSS一次性都拿过来了,就是拿过来他的呃,CSS。然后我们用什么组件,这里边用什么组件,他说一次性可以按port导入,比如说VTVT这样的话,就所有的组件都导入过来,但是我经常用它,这个是不太好用的,应该是咱们新版本里的一个bug,所以呢,咱们还是一个一个导入,比如说我现在想用到这里边的。啊。咱们现在首页里边想用到这里边的轮播图你看。轮廓图,那我们就需要在这里边导入,从这里边导入这两个。导入这两个,当然我是在这个页面写,这个页面里边已经包含了什么VE对吧,所以在这里边导入。这两个。轮播图和轮播图每一个选项导入进来,导入进来之后,那我们想在页面里边去使用的话,你看这个从这里边去导入的啊,因为咱们已经加那装那个八布那插件了,所以呢,他能找这个,通过那插件他就找到这个对吧,然后想在每一个组件里边单独使用,通过八部转换,那我们在这里边用use使用,你可以在前面在后边都行,把这个敲开啊。
10:17
这是敲开,然后在这块用一个组件,我们在这块加一个加上。呃,这个组件。一个组件一个组件加,再加上use,加上这个,这样的话,在所有的模板里边,我们都可以直接使用这两个组件,就不用去引入就可以直接使用了。这就是我们,嗯,使用的一个方式,使用的一个方式。那现在我们已经引入了,那我现在再启动一下服务器。集中下服务器。然后我们看一下它这个幻灯片这块,你看外层加这个对吧,内层加这个里边的数据,每个选项1234对不对就可以了,然后指定时间指定一个类名,当然这个类你可以去自己去设置对吧,背景颜色呀,宽度高度啊都是可以的,这是基本的一些用法。
11:05
对吧。这样你可以点击每一个人的跳转,到哪里都可以,对不对,每一个加索引都是可以的。可以指定高度都是可以的。然后自定义滑块大小也都行。咱们就用这个基本的用法,咱们就过了。好,咱们看一下起伏器启没启动起来,启动起来了,启动起来了之后,我们先呃,它属于假如说就首页用的话,那属于首页下边的一个子组件,那我们在首页这里边我们先做一个。呃,这样的一个组件,在这个模板里边,我们去引用。所以如果在首页这个里边用的话,我们建一个组件叫做呃,Home homeme home sweater SW。加这个组件。然后这个组件我们需要在首页里面去使用。那这是我们现在自己做的组件,我想在自己做的组件里层在使用这个组件,所以呢,那我们在这块就得import导入。
12:06
啊,Home这个当前目录下子幕下这没关系,然后我们还得注册这个组件在首页里边,因为它是最上面用的,那我就加在最上边。又卡机了,等待一下,嗯,好了。然后在首页的最上面,也就是我们原来用一个图片占位符的地方,用图片占位符的地方,就可以怎么样换成我们自己的什么自己的组件了。就在我们这个位置,图片占位符的地方。嗯,把这个,呃。整体都去掉吧。这个现在是不需要的啊,然后咱们加上嗯,加上一个home sweep swp加上这个。嗯,加这个我们得把幻灯片的所有的数据扔过去,所以这里边我们做一个属性,做一个属性,比如说BNS等于我们存一个数据,BNS也把这数据从数据库获取到,首页获取到,然后扔过去就可以了,其他的呢,我们就嗯不需要了。
13:08
其他就不需要了,把这个拿过去,然后如果上边有些遮盖的话。那我们再加一个样式,你比如说。J marin top原来那属性是有一个上面有一个45像素,这样的话,我们离上顶层这块有一个45像素,它现在已经下来一点,对不对就可以了。这个组件加过来了,那我们需要获取的一个数据,然后再我们自定义组件里去用获取数据获取首页里边的所有数据,对吧,这是给我们推荐的数据,那这里边儿呢,我们获取首页里边推荐的数据里边。就是在一次性获取首页所有数据的时候,那我们就能够获取到banner这个数据。BA,当然了,我们获取班的话,我们得先怎么着,先声明这个,呃,班点。在外层这块声明一下,Let声明BA,那NS等于ref声明一个空数字。
14:05
里边数据咱们把它做成一空数据,然后呢,我们得返回这个,然后返回BAS,然后我们在这里边从接口里边获取数据。获取所有数据,这个呢,我们是获取推荐的数据,从good data这里边对不对,获取的是。呃,所有的商品的good的一个推荐的数据,那我们现在想获取这里边班的数据,你可以看一下那个,呃接口对吧。接口里边有一个是DS里边V流值。有一个I点是s Li,嗯,S版看一下啊,有点忘记接口里边首页的数据。你看首页数据。这个slides轮播图的数据对吧,然后我们这个。是推荐商品的这样的一个数据。这个数据我们先打一下。点SLIS.rod。
15:00
看它后边有没有被,如果有被子的话,我们可以把这个被的加上。嗯,抓紧一下。诶没有这直接这个里边,你看这么多半截图里边有标题,有URL有图片对吧,直接有这么多,那我们就直接到这个位置。这就不用了,直接搬到有了,然后我们把数据已经扔给谁了,扔给我们这个组件了。扔给我们这个组件了,那我们这个组件就是这块这块呢,在这个组件里边,我们是不是就得接收对吧,接收我们的数据,所以呢,需要在这里边加上属性啊。接收这样的数据,当然我们这块是对象结构,然后呢bs banner,然后是数组类型的接收过来。固定格式缺省值,我们返回一个空数组,这样的话我们就可以用这个呃数组了,就会用这个,那我们用外其他的组件,这里边也不用去加其他的组件,不用注册,直接就可以使用,那比如说我们这里边使用这个组件,我们直接从组件库里边就可以粘过来,这样的一个用法。
16:08
拿过来到我们的。嗯。这个里面你看直接加这个就行,然后自动是3000毫秒对吧,然这个类用用上都无所谓的,嗯,然后这里边我们可以加一个判断的一个条件,什么条件呢?V杠,If,如果我们传过来的BBNS,它的长度。对吧。也就是他有这个长度不是零,我们才显示,我们可以加一个这个啊。因为我们传过来的就空数度,长度就是零嘛,零不就是甲嘛,甲在这里边我们就不显示了,然后这里边每一项拿过来,我们只用一项就可以。用它的固定组件,这里边我们用V杠负便利我们的什么BS,然后it。啊,所以我们也要把it t emm,然后ex拿过来in,我们把这个既然循环了,我们就得需要加一个什么,加一个KK呢,我们就bed放在这块就行了,然后里边你可以加A链接,或者是加其他事件什么的都可以。
17:15
在这里边,那在这里边我们主要是加一个图片,因为半的图嘛,对不对,加一个图片,那图片我们是ITM点。呃,看一下这里边儿的图片,接口图片。这是商品里边的,把你的图里边的这个image URL叫这个名啊,Img加构线ul,这样的话我们就把数据库取出来,并便辑出来这样的一个组件。你看其他的方式我们基本上都不用写了,就写这些就够了,如果样式不行的话,我们再调这样式。嗯。来到我们的这个里边刷新一下。诶,好像。没有这个,没有这个数据呢。
18:00
但是广州片循环次数已经有了,还是图片图片哦,变量我们没加S是加这个对吧,现在就可以了。对吧。啊。刷新一下。但是这个关高度高了,对不对,高度太高了,那我们可以自己去定一下这样的一个一个样式,比如说里边的所有的mg img,这里边我们用的是宽度是一百百分之,嗯,高度标的是AU tu自动。自动。你看真的就这样,那咱们看一下这个缓冲片好不好用。这个上边。好像有个小bug,现在回去没问题。你看当我们滚动到一点的时候,一撒手他就回去了,对不对,滚动超过一半的时候,他就过来了。所以比我们自己写要容易的多,另外我们不用注册就可以使用这个组件,那就得前边先安装,安装的过程这些都都做好对吧,安装手册里边去配置就行了,那现在呢,他这个。
19:05
所有的组件股咱们都可以用了,咱们只是暂时先用了一个,这一点好,谢谢大家都有空,我们就先这。
我来说两句