学子商城项目Vue3
FTP提供的包, 是安装过 swiper 和 axios 的, 不需要重新按
axios:npm i axios
swiper:vue3支持最新的swiper, 命令:npm i swiper vue-awesome-swiper
页面内容同vue2部分,只有设置路由时,不能再使用 * 通配符,通过查阅路由官方网站带参数的动态路由匹配 | Vue Router,网站上有
把原来的/路由替换成我们制作的首页
请求数据与vue2已经完全不同了,每一个都需要引入的
新版本的swiper和低版本的区别也非常大,(去官网查看文档)查找到引入swiper的代码
Banner部分的html删掉原来的重新写,每张图循环到轮播图上
给swiper一个样式定宽并居中
去官网找相关的方法,手动引入
把配置项导出,才能在页面上使用
在标签上modules是注入配置项模块
要知道vue3的特点:不会把所有模块携带在自身,减轻负重,所以每次使用都需要临时、手动选择 加载的模块,然后再使用。
但是前面的操作还不能循环滚动,这个模块中自带loop,直接添加就可以了
小圆点和左右按钮、方块特效的配置项也一起引入
导出配置项
标签中加入小圆点的属性
如果需要调整小圆点的样式,还是要到后台去找小圆点的class名,去style里添加样式,但是一定要把scope去掉,因为是组件里的带的小圆点,而加了scope只在当前文件有效。
标签中加入方块的特效和左右的箭头
要实现鼠标的移除移入效果没有vue2中这么复杂,只需要在autoplay属性中加入这样一行就可以了
3个楼层,结构相同,数据不同,用组件制作
复制粘贴html,局部引入css代码
到indexfloor.vue配置编程式路由,把方法绑定到对应的“查看详情”,注意要修改参数,即“查看详情“的编号
逻辑和vue2相同,只是写法是vue3的写法,这里的报错是静态报错,它无法识别变化的this关键词,所以经常误报。
这里有两个解决方法,第一个就是写一条注释,这一条注释是给vscode看的,意思是忽略ts报错,就可以正常运行了
第二个是全局屏蔽,去配置文件中关闭严格模式
回到详情页,读取路由传参的lid,然后发送请求获取详情页的数据,最终在页面上进行展示
做一个判断是展示loading还是详情
使用计算属性简化代码
把剩下的所有的参数都在后台找到并填上去