分类实现
示意图：
主要分为以下几个步骤：
1. 通过store提取分类数据
2. 通过第一个v-for循环拿到左侧菜单栏的数据
3. 通过第二个v-for循环拿到右侧的详细数据
轮播图
示意图：
主要分为以下几个步骤：
1. 用轮播图组件
2. 写Banner数据接口
3. 利用数据
面板组件封装
为什么要面板组件封装？
复用面板里通用的代码，降低重复率。
如何进行面板组件封装？
步骤：
1、写好静态的组件内容
2、将需要改动的地方经过pros化和插槽化。
3、对简单变量用pros暴露出去，使父组件用的时候能够传参。
4、对复杂区域用插槽暴露出去，使父组件能diy设定。
父组件使用封装模块
图片懒加载
为什么要图片懒加载？
如果网页过长，部分内容如果直接加载会严重拖缓加载速度，所以按需加载是最好的。
懒加载的思路：
1、自定义一个懒加载的插件。
2、在插件里自定义一个指令，该指令的作用就是当组件进入可视范围内时候，才将src赋值。
3、组件进入可视范围再加载的功能，用VueUse实现。
怎样获取route路由中参数
应用场景：有些请求接口，会根据不同的参数拿到不同的数据。前端也需要根据不同的参数渲染不同的数据。
贴一下请求函数
路由缓存问题
产生问题的原因：vue里只有路由参数变化的时候，会复用组件实现。
解决方案：
1、破坏组件复用机制，给 router-view 加入id
2、使用 onBeforeRouteUpdate钩子函数，做精确更新
推荐2，1浪费性能。
使用逻辑函数拆分业务
基于逻辑函数拆分业务是指把同一个组件中独立的业务代码通过函数做封装处理，提升代码的可维护性。
实现步骤：
1、按照业务声明以 `use` 打头的逻辑函数
2、把独立的业务逻辑封装到各个函数内部
3、函数内部把组件中需要用到的数据或者方法return出去
4、在组件中调用函数把数据或者方法组合回来使用
