组件综合运用

Components

实验题目
首页视图
实验目的
熟悉组件的生命周期函数
熟悉组件的组成和作用
掌握组件的局部注册和全局注册
掌握组件之间通信的几种机制
熟悉异步组件、动态组件和缓存组件的作用和使用
实验内容

请使用但不限于以下组件，完成首页视图 HomeView.vue 的设计与开发

轮播组件 Swiper.vue

属性参数：图片

节标题组件 Title.vue

属性参数：标题和事件响应函数

动态组件 Tabcard.vue

属性参数：标题和事件响应函数

使用侦听 watch/watcheffect 触发视图更新

分类导航 MainNav.vue

属性参数：标题、图标和事件响应函数

主导航 AppNav.vue

属性参数：标题、图标和事件响应函数

返回顶部组件* BackToTop.vue
版权组件* Copyright.vue
详情页组件* DetailView.vue 的组件部分设计
参考效果和参考代码
轮播组件 Swiper.vue
节标题组件 Title.vue
动态组件 Tabcard.vue
分类导航 MainNav.vue
主导航 AppNav.vue
详情页组件 DetailView.vue - 权益保护组件 Guarantee.vue
详情页组件 DetailView.vue - 甜点组件 RecoDessert.vue
详情页组件 DetailView.vue -推荐组件 RecoItems.vue
拓展与思考
如何复用结构和样式
使用内联样式和外部样式调整项目
设计并封装模态框组件
设计并封装加载组件
完善详情页组件 DetailView.vue 其它设计
保存/推送项目到自己的代码仓库