茶叶分类：注意后端数据结构和前端页面结构（因为结构没搭好整了好久）

后端：数据分三级

// 分类数据接口
router.get('/api/goods/list', function (req, res, next) {
  res.send({
    code: 0,
    data: [{
        // 一级
        id: 0,
        title: '推荐11',
        data: [{
          // 二级
          id: 0,
          title: "推荐",
          list: [
             { // 三级
              id: 0,
              title: "铁观音",
              imgUrl: "./images/tj1.jpeg"
            }]
          }]
        }]
     })
    })
    

前端： ul li 里面嵌套 ui li ，不然后端的数据是三层的，只能这样嵌套方便数据循环和渲染

  <template>
  <div class="section">
  // 左边菜单栏 为一个 ul li
    <div class="l-menu">
      <ul>
        <li v-for="(item,index) in menuList" :key="index">{{item.title}}</li>
      </ul>
    </div>
     // 右边边 ul li 里面签到 ui li
    <div class="r-menu">
      <ul class="recommend" v-for="(item,index) in recommendInfo" :key="index">
        <li v-for="(k,i) in item" :key="i">
          <div>{{k.title}}</div>
          <ul class="Tea">
            <li v-for="(s,idxs) in k.list" :key="idxs">
              <img :src="s.imgUrl" alt />
              <div>{{s.title}}</div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>