新建 home 分支
通过 Git 管理项目，养成良好的开发习惯，可以创建分支。最后开发完可以合并分支。
1.创建新分支并且跳转到改分支上
git checkout -b home02
2.查看分支
git branch
搜索按钮
1. 搜索按钮及样式
2. 点击搜索按钮跳转到搜索页面
效果
展示分类
1. 发送请求
2. 分类数据存入 Store 中
3. 展示数据渲染数据
这里封装一个单独的组件 home-categories
下面是组件完整代码：
<template> <div class="categories"> <template v-for="(item,index) in categories" :key="index" > <div class="item"> <img :src="item.pictureUrl" /> <div class="text">{{item.title}}</div> </div> </template> </div> </template> <script setup> import { useHomeStore } from '@/stores/modules/home'; import { storeToRefs } from 'pinia'; const homeStore = useHomeStore() const { categories } = storeToRefs(homeStore) </script> <style lang="less" scoped> .categories { display: flex; overflow-x: auto; height: 88px; padding: 0 10px; margin-top: 8px; &::-webkit-scrollbar { display: none; } .item { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 70px; text-align: center; img { width: 44px; height: 44px; } .text { font-size: 12px; margin-top: 8px; } } } </style>
效果
