# 黑马vue3小兔鲜儿项目 day2

最新推荐文章于 2024-07-20 16:46:53 发布
最新推荐文章于 2024-07-20 16:46:53 发布
阅读量337 收藏 1
点赞数 1
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_60161705/article/details/130751032
版权

1.前言

这是续着上一篇文章的，可以点开我的主页查看。

2. Layout-静态模板结构搭建

把App.vue下的样式和上一节的测试模板全删掉，如下图所示
在这里插入图片描述
删除后的结构
在这里插入图片描述
再把main.js脚手架导入的样式和脚手架原有的样式文件base.css和main.css删掉,如下图所示
在这里插入图片描述
components目录下脚手架自带的组件删掉，如下图所示。
在这里插入图片描述
在views/Layout目录下新建目录components并在此目录下新建几个组件，如下图所示。
在这里插入图片描述
然后在相应的组件下添加下面的代码

LayoutNav.vue

<script setup>

</script>

<template>
  <header class='app-header'>
    <div class="container">
      <h1 class="logo">
        <RouterLink to="/">小兔鲜</RouterLink>
      </h1>
      <ul class="app-header-nav">
        <li class="home">
          <RouterLink to="/">首页</RouterLink>
        </li>
        <li> <RouterLink to="/">居家</RouterLink> </li>
        <li> <RouterLink to="/">美食</RouterLink> </li>
        <li> <RouterLink to="/">服饰</RouterLink> </li>
      </ul>
      <div class="search">
        <i class="iconfont icon-search"></i>
        <input type="text" placeholder="搜一搜">
      </div>
      <!-- 头部购物车 -->
      
    </div>
  </header>
</template>


<style scoped lang='scss'>
.app-header {
  background: #fff;

  .container {
    display: flex;
    align-items: center;
  }

  .logo {
    width: 200px;

    a {
      display: block;
      height: 132px;
      width: 100%;
      text-indent: -9999px;
      background: url('@/assets/images/logo.png') no-repeat center 18px / contain;
    }
  }

  .app-header-nav {
    width: 820px;
    display: flex;
    padding-left: 40px;
    position: relative;
    z-index: 998;
  
    li {
      margin-right: 40px;
      width: 38px;
      text-align: center;
  
      a {
        font-size: 16px;
        line-height: 32px;
        height: 32px;
        display: inline-block;
  
        &:hover {
          color: $xtxColor;
          border-bottom: 1px solid $xtxColor;
        }
      }
  
      .active {
        color: $xtxColor;
        border-bottom: 1px solid $xtxColor;
      }
    }
  }

  .search {
    width: 170px;
    height: 32px;
    position: relative;
    border-bottom: 1px solid #e7e7e7;
    line-height: 32px;

    .icon-search {
      font-size: 18px;
      margin-left: 5px;
    }

    input {
      width: 140px;
      padding-left: 5px;
      color: #666;
    }
  }

  .cart {
    width: 50px;

    .curr {
      height: 32px;
      line-height: 32px;
      text-align: center;
      position: relative;
      display: block;

      .icon-cart {
        font-size: 22px;
      }

      em {
        font-style: normal;
        position: absolute;
        right: 0;
        top: 0;
        padding: 1px 6px;
        line-height: 1;
        background: $helpColor;
        color: #fff;
        font-size: 12px;
        border-radius: 10px;
        font-family: Arial;
      }
    }
  }
}
</style>

LayoutHeader.vue

<script setup>

</script>

<template>
  <nav class="app-topnav">
    <div class="container">
      <ul>
        <template v-if="true">
          <li><a href="javascript:;"><i class="iconfont icon-user"></i>周杰伦</a></li>
          <li>
            <el-popconfirm title="确认退出吗?" confirm-button-text="确认" cancel-button-text="取消">
              <template #reference>
                <a href="javascript:;">退出登录</a>
              </template>
            </el-popconfirm>
          </li>
          <li><a href="javascript:;">我的订单</a></li>
          <li><a href="javascript:;">会员中心</a></li>
        </template>
        <template v-else>
          <li><a href="javascript:;">请先登录</a></li>
          <li><a href="javascript:;">帮助中心</a></li>
          <li><a href="javascript:;">关于我们</a></li>
        </template>
      </ul>
    </div>
  </nav>
</template>


<style scoped lang="scss">
.app-topnav {
  background: #333;
  ul {
    display: flex;
    height: 53px;
    justify-content: flex-end;
    align-items: center;
    li {
      a {
        padding: 0 15px;
        color: #cdcdcd;
        line-height: 1;
        display: inline-block;

        i {
          font-size: 14px;
          margin-right: 2px;
        }

        &:hover {
          color: $xtxColor;
        }
      }

      ~li {
        a {
          border-left: 2px solid #666;
        }
      }
    }
  }
}
</style>

LayoutFooter.vue

<template>
  <footer class="app_footer">
    <!-- 联系我们 -->
    <div class="contact">
      <div class="container">
        <dl>
          <dt>客户服务</dt>
          <dd><i class="iconfont icon-kefu"></i> 在线客服</dd>
          <dd><i class="iconfont icon-question"></i> 问题反馈</dd>
        </dl>
        <dl>
          <dt>关注我们</dt>
          <dd><i class="iconfont icon-weixin"></i> 公众号</dd>
          <dd><i class="iconfont icon-weibo"></i> 微博</dd>
        </dl>
        <dl>
          <dt>下载APP</dt>
          <dd class="qrcode"><img src="@/assets/images/qrcode.jpg" /></dd>
          <dd class="download">
            <span>扫描二维码</span>
            <span>立马下载APP</span>
            <a href="javascript:;">下载页面</a>
          </dd>
        </dl>
        <dl>
          <dt>服务热线</dt>
          <dd class="hotline">400-0000-000 <small>周一至周日 8:00-18:00</small></dd>
        </dl>
      </div>
    </div>
    <!-- 其它 -->
    <div class="extra">
      <div class="container">
        <div class="slogan">
          <a href="javascript:;">
            <i class="iconfont icon-footer01"></i>
            <span>价格亲民</span>
          </a>
          <a href="javascript:;">
            <i class="iconfont icon-footer02"></i>
            <span>物流快捷</span>
          </a>
          <a href="javascript:;">
            <i class="iconfont icon-footer03"></i>
            <span>品质新鲜</span>
          </a>
        </div>
        <!-- 版权信息 -->
        <div class="copyright">
          <p>
            <a href="javascript:;">关于我们</a>
            <a href="javascript:;">帮助中心</a>
            <a href="javascript:;">售后服务</a>
            <a href="javascript:;">配送与验收</a>
            <a href="javascript:;">商务合作</a>
            <a href="javascript:;">搜索推荐</a>
            <a href="javascript:;">友情链接</a>
          </p>
          <p>CopyRight © 小兔鲜儿</p>
        </div>
      </div>
    </div>
  </footer>
</template>

<style scoped lang='scss'>
.app_footer {
  overflow: hidden;
  background-color: #f5f5f5;
  padding-top: 20px;

  .contact {
    background: #fff;

    .container {
      padding: 60px 0 40px 25px;
      display: flex;
    }

    dl {
      height: 190px;
      text-align: center;
      padding: 0 72px;
      border-right: 1px solid #f2f2f2;
      color: #999;

      &:first-child {
        padding-left: 0;
      }

      &:last-child {
        border-right: none;
        padding-right: 0;
      }
    }

    dt {
      line-height: 1;
      font-size: 18px;
    }

    dd {
      margin: 36px 12px 0 0;
      float: left;
      width: 92px;
      height: 92px;
      padding-top: 10px;
      border: 1px solid #ededed;

      .iconfont {
        font-size: 36px;
        display: block;
        color: #666;
      }

      &:hover {
        .iconfont {
          color: $xtxColor;
        }
      }

      &:last-child {
        margin-right: 0;
      }
    }

    .qrcode {
      width: 92px;
      height: 92px;
      padding: 7px;
      border: 1px solid #ededed;
    }

    .download {
      padding-top: 5px;
      font-size: 14px;
      width: auto;
      height: auto;
      border: none;

      span {
        display: block;
      }

      a {
        display: block;
        line-height: 1;
        padding: 10px 25px;
        margin-top: 5px;
        color: #fff;
        border-radius: 2px;
        background-color: $xtxColor;
      }
    }

    .hotline {
      padding-top: 20px;
      font-size: 22px;
      color: #666;
      width: auto;
      height: auto;
      border: none;

      small {
        display: block;
        font-size: 15px;
        color: #999;
      }
    }
  }

  .extra {
    background-color: #333;
  }

  .slogan {
    height: 178px;
    line-height: 58px;
    padding: 60px 100px;
    border-bottom: 1px solid #434343;
    display: flex;
    justify-content: space-between;

    a {
      height: 58px;
      line-height: 58px;
      color: #fff;
      font-size: 28px;

      i {
        font-size: 50px;
        vertical-align: middle;
        margin-right: 10px;
        font-weight: 100;
      }

      span {
        vertical-align: middle;
        text-shadow: 0 0 1px #333;
      }
    }
  }

  .copyright {
    height: 170px;
    padding-top: 40px;
    text-align: center;
    color: #999;
    font-size: 15px;

    p {
      line-height: 1;
      margin-bottom: 20px;
    }

    a {
      color: #999;
      line-height: 1;
      padding: 0 10px;
      border-right: 1px solid #999;

      &:last-child {
        border-right: none;
      }
    }
  }
}
</style>

在views/layout/index.vue中引入这三个组件并引用，如下图所示
在这里插入图片描述

打开项目查看
在这里插入图片描述

3. 引入字体图标库

在这里插入图片描述
这里是没有图标的我们要引入
在index.html中引入，如下图所示
在这里插入图片描述

 <link rel="stylesheet" href="//at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">

4.一级导航渲染

在这里插入图片描述
在apis目录下新建layout.js并写入以下代码

import http from '@/utils/http.js'
export function getCategoryAPI () {
  return http({
    url: '/home/category/head'
  })
}

在这里插入图片描述
在LayoutNav.vue中导入这段代码

import { getCategoryAPI } from '@/apis/layout'
import { onMounted, ref } from 'vue'
const categoryList = ref([])
const getCategory = async () => {
  const res = await getCategoryAPI()
  categoryList.value = res.result
}
onMounted(() => {
  getCategory()
})

如图所示

在这里插入图片描述

渲染模板
在这里插入图片描述

<template>
  <header class='app-header'>
    <div class="container">
      <h1 class="logo">
        <RouterLink to="/">小兔鲜</RouterLink>
      </h1>
      <ul class="app-header-nav">
        <li class="home" v-for="item in categoryList" :key="item.id">
          <RouterLink to="/">{{ item.name }}</RouterLink>
        </li>
      </ul>
      <div class="search">
        <i class="iconfont icon-search"></i>
        <input type="text" placeholder="搜一搜">
      </div>
      <!-- 头部购物车 -->
      
    </div>
  </header>
</template>

5.吸顶交互

在这里插入图片描述

创建吸顶组件LayoutFix.vue,并写入下面的代码，如图所示
在这里插入图片描述

<script setup>

</script>

<template>
  <div class="app-header-sticky">
    <div class="container">
      <RouterLink class="logo" to="/" />
      <!-- 导航区域 -->
      <ul class="app-header-nav ">
        <li class="home">
          <RouterLink to="/">首页</RouterLink>
        </li>
        <li>
          <RouterLink to="/">居家</RouterLink>
        </li>
        <li>
          <RouterLink to="/">美食</RouterLink>
        </li>
        <li>
          <RouterLink to="/">服饰</RouterLink>
        </li>
        <li>
          <RouterLink to="/">母婴</RouterLink>
        </li>
        <li>
          <RouterLink to="/">个护</RouterLink>
        </li>
        <li>
          <RouterLink to="/">严选</RouterLink>
        </li>
        <li>
          <RouterLink to="/">数码</RouterLink>
        </li>
        <li>
          <RouterLink to="/">运动</RouterLink>
        </li>
        <li>
          <RouterLink to="/">杂项</RouterLink>
        </li>
      </ul>

      <div class="right">
        <RouterLink to="/">品牌</RouterLink>
        <RouterLink to="/">专题</RouterLink>
      </div>
    </div>
  </div>
</template>


<style scoped lang='scss'>
.app-header-sticky {
  width: 100%;
  height: 80px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  background-color: #fff;
  border-bottom: 1px solid #e4e4e4;
  // 此处为关键样式!!!
  // 状态一：往上平移自身高度 + 完全透明
  transform: translateY(-100%);
  opacity: 0;

  // 状态二：移除平移 + 完全不透明
  &.show {
    transition: all 0.3s linear;
    transform: none;
    opacity: 1;
  }

  .container {
    display: flex;
    align-items: center;
  }

  .logo {
    width: 200px;
    height: 80px;
    background: url("@/assets/images/logo.png") no-repeat right 2px;
    background-size: 160px auto;
  }

  .right {
    width: 220px;
    display: flex;
    text-align: center;
    padding-left: 40px;
    border-left: 2px solid $xtxColor;

    a {
      width: 38px;
      margin-right: 40px;
      font-size: 16px;
      line-height: 1;

      &:hover {
        color: $xtxColor;
      }
    }
  }
}

.app-header-nav {
  width: 820px;
  display: flex;
  padding-left: 40px;
  position: relative;
  z-index: 998;

  li {
    margin-right: 40px;
    width: 38px;
    text-align: center;

    a {
      font-size: 16px;
      line-height: 32px;
      height: 32px;
      display: inline-block;

      &:hover {
        color: $xtxColor;
        border-bottom: 1px solid $xtxColor;
      }
    }

    .active {
      color: $xtxColor;
      border-bottom: 1px solid $xtxColor;
    }
  }
}
</style>

在Layout/index.vue导入使用，并把路由出口高度写到足够高以至于能够滑动，如下图所示!
在这里插入图片描述
打开终端安装这个包

npm i @vueuse/core

在Layout.vue写入以下代码
在这里插入图片描述
测试一下能不能行

6. Layout-Pinia优化重复请求

在这里插入图片描述

在stores下新建category.js,并写入以下代码，如图所示
在这里插入图片描述

import { ref } from 'vue'
import { defineStore } from 'pinia'
import { getCategoryAPI } from '@/apis/layout'
export const useCategoryStore = defineStore('category', () => {
  const categoryList = ref([])
  const getCategory = async () => {
    const res = await getCategoryAPI()
    categoryList.value = res.result
  }
 

  return {categoryList, getCategory  }
})

在layout/index.vue导入使用,如图所示
在这里插入图片描述

import {useCategoryStore} from '@/stores/category.js'
import {onMounted} from 'vue'
const CategoryStore = useCategoryStore()
onMounted(() => {
  CategoryStore.getCategory()
})

把LayoutNav.vue的这些代码删掉
在这里插入图片描述
修改这样，如图所示
在这里插入图片描述
同样LayoutFix.vue也修改成这样
在这里插入图片描述

zZr879
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
小兔鲜儿网站-网页源代码.zip
11-17
这段源代码是一款非常实用的网页制作工具，它以小兔鲜儿的形象为设计灵感，界面清新可爱，操作简单易懂。无论你是专业的网页设计师，还是初学者，都能在这个平台上轻松制作出属于自己的个性化网页。小兔鲜儿网页源代码提供了丰富的模板和元素，你可以根据自己的需求进行选择和搭配，创造出独一无二的网页效果。同时，它还支持多种编程语言，可以满足不同用户的需求。总的来说，大家可以根据这段源代码进行学习与模仿，或者与我的配套博客一起学习。https://blog.csdn.net/weixin_65106708/article/details/134300925?spm=1001.2014.3001.5501
【计算机毕业设计】Vue3.0小兔鲜儿电商项目+项目学习笔记
JAVA编码选手的博客
06-12 1063
Vue3.0小兔鲜儿电商项目 基于 vue3.0 的组合 AP I方式与选项 API 的方式开发的一个综合品类的电商前台系统。 实现了一套完整的电商业务流程，从首页，类目，搜索，品牌，商品详情，购物车，结算，支付，个人中心，订单管理，收货地址管理，评价中心，和其他个人信息管理业务。
电商项目接口测试实践-postman
weixin_45433224的博客
08-20 3894
postman电商项目实践
Vue3.0小兔鲜儿
m0_60673782的博客
07-20 745
小兔鲜儿踩坑实录...更新中
apis-day7综合案例
m0_52766105的博客
12-11 414
综合案例，使用了正则表达式进行表单验证、以及本地存储等
小兔鲜儿 - 微信登录
每天都要努力学习哦~~
08-31 404
涉及知识点：微信授权登录，文件上传，Store 状态管理等。
基于Vue和node.js开发的水果外卖平台系统前端+后端完整源码.zip
09-01
【资源说明】 基于Vue和node.js开发的水果外卖平台系统前端+后端完整源码.zip 水果配送平台后端node.js # node app.js运行3000端口 ### 默认打开3000端口 node app.js 若控制台呈现则成功 3000成功 mongodb://127.0.0.1:27017/fruitshop连接成功 ### ---------------------------------------------------------------------- 否则目录dao下database.js文件 const dbURI = 'mongodb://localhost:27017/fruitshop'; //连接项目mongodb的数据库的地址 # 改为const dbURI = 'mongodb://127.0.0.1:27017/fruitshop'; //连接项目mongodb的数据库的地址 # 其中需要自行安装并打开mongodb数据库（建议可下载Navicat Premium 12连接mongodb数据库，且编辑数据） node app.js运行后端,默认打开3000端口，前端请求的也是3000端口 测试账号：1 密码：1 测试账号：105948087 密码：123456 【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。 欢迎下载，沟通交流，互相学习，共同进步！
小兔鲜--项目总结3
每天都要努力学习哦~~
05-27 2135
SKU组件的作用是为了让用户能够选择商品的规格，从而提交购物车，在选择的过程中，组件的选中状态要进行更新， 组件还要提示用户当前规格是否禁用，每次选择都要产出对应的Sku数据\。核心原理:当前的规格Sku，或者组合起来的规格Sku，在skus数组中对应项的库存为零时，当前规格会被禁用，生成 路径字典是为了协助和简化这个匹配过程。思路:遍历每一个规格对象，使用name字段作为key去路径字典pathMap中做匹配，匹配不上则禁用。2. 切换地址交互:点击切换地址，点击确定按钮，激活地址替换默认收货地址。
小兔鲜儿vue3开发资料文档
09-18
在这个名为“小兔鲜儿vue3开发资料文档”的压缩包中，我们可以期待找到与Vue3相关的开发教程、最佳实践、范例代码以及可能的模板和素材。 首先，Vue3 引入了Composition API，这是对Options API的重大改进。...
小兔鲜儿商城web端vue3+js项目
05-17
小兔鲜儿商城web端vue3+js项目，适用于学完vue3的伙伴们！通过完成这个项目，一定可以对vue3有更深入的理解，也可以巩固对vue3的语法掌握。通过做一个商城项目可以对实际项目开发有初步了解，对未来项目开发有所助益...
小兔鲜电商项目（Vite + Vue3）-vue3-rabbit.zip
11-04
【小兔鲜电商项目——基于Vite与Vue3的实现详解】 在当今互联网时代，电商平台已经成为日常生活不可或缺的一部分。"小兔鲜电商项目"是利用现代前端技术栈Vite和Vue3构建的一个示例项目，旨在展示如何高效地开发一个...
uni-app 开发的微信小程序-小兔鲜儿电商项目-uniapp-shop-vue3-ts.zip
11-04
【标题】"uni-app开发的微信小程序-小兔鲜儿电商项目-uniapp-shop-vue3-ts" 是一个基于uni-app框架构建的电商应用实例，主要用于展示如何利用uni-app技术栈来开发微信小程序。uni-app是一个多端开发框架，允许开发者...
Vue Day3小兔鲜组件
08-05
在“Vue Day3小兔鲜组件”学习中，我们将深入探讨Vue组件的核心概念、创建方法以及如何在实际项目中有效地利用它们。 首先，让我们了解什么是Vue组件。Vue组件是一个可重用的Vue实例，它有自己的模板、数据、方法和...
html(10-小鲜兔儿项目)
热门推荐
缘友一世的博客
03-12 1万+
文章目录综合项目小兔鲜项目一 分析1 Header 部分开发2Footer 部分开发3 网站入口 xtx-entry 部分开发4 新鲜好物面板 xtx-new-goods 部分开发5 生鲜商品面板 xtx-fresh-goods 部分开发二 项目结构三 代码实现3.1 index.html 代码3.2 base.css 代码3.3 common.css 代码3.4 index.css 代码四 效果 综合项目小兔鲜项目 一 分析 1 Header 部分开发 2Footer 部分开发
小兔鲜-黑马程序员
m0_73605639的博客
01-07 998
小兔鲜-黑马程序员
html小兔鲜案例--部分代码
weixin_51237312的博客
03-27 2307
html案例部分代码
黑马超级项目来咯！它是……
传智播客的专栏
05-09 321
大家好，我是播妞。许多同学都知道，项目经验对程序员来说至关重要，求职简历上一定要展示「项目经验」，但你可能不知道，有些“项目”写了还不如不写！行业竞争也愈演愈烈，许多含金量比较低的项目，面试官可能已经看过很多次了，不仅无法让他眼前一亮，加深对你的好感度，甚至还有可能起到副作用，提升他“刷掉”你的速度......我们常说“键盘敲烂，月薪过万”，多做多练是没错的，但是项目的“质量”尤为关键，有些练手小...
vue3小兔鲜商城项目学习笔记+资料分享01
weixin_44125573的博客
11-10 3153
vue3小兔鲜商城项目学习笔记+资料分享01
谷粒商城实战笔记-38-前端基础-Vue-指令-单向绑定&双向绑定
最新发布
epitomizelu的专栏
07-20 500
安全性v-text更安全，因为它总是将数据作为纯文本插入，不解析 HTML。v-html则可能引发安全问题，因为它会解析并渲染 HTML 标签。用途v-text适用于插入文本数据，而v-html适用于插入需要被解析为实际 HTML 的数据。处理 HTML 标签v-text忽略 HTML 标签，将其视为普通文本；v-html则会解析并显示 HTML 标签。二者都是单向绑定，元素绑定model，model不绑定元素，元素值改变时model值不会更新。
vue3 ts 小兔鲜儿项目描述
03-30
小兔鲜儿是一款基于Vue3和TypeScript开发的在线购物平台，主要面向有婴幼儿的家庭提供高品质的母婴用品和服务。该项目采用前后端分离的架构，前端使用Vue3框架和Element Plus UI库进行开发，后端采用Node.js和MongoDB数据库。 在小兔鲜儿的首页中，用户可以浏览商品展示区、商品分类、热门推荐、限时抢购等模块，并可以进行商品搜索和筛选。用户可以在平台上进行注册、登录、加入购物车、结算、下单等操作，同时也可以查看订单记录、收货地址、个人信息等。平台还提供了用户评价、客服咨询等功能，让用户的购物体验更加便捷和愉悦。 小兔鲜儿项目采用了TypeScript语言，增强了代码的可读性和可维护性，同时也提高了代码的健壮性和稳定性。Vue3框架的优势在于其性能更优、渲染更快、支持Composition API等新特性，使得项目的开发效率和用户体验都得到了很好的提升。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值