小兔鲜项目记录

最新推荐文章于 2024-11-01 17:01:39 发布

susanand

最新推荐文章于 2024-11-01 17:01:39 发布

阅读量684

点赞数 16

文章标签：前端

本文链接：https://blog.csdn.net/susanand/article/details/139708319

版权

create-vue
1.create-vue是脚手架工具，用来创建vue项目
2、node -v 检查node版本,是否大于16
3、创建项目：npm init vue@latest
4、打开项目安装依赖，npm install
5、运行项目 npm run dev
熟悉项目目录和关键文件
1、package.json里面有核心依赖
vite.config.js是项目配置文件，添加插件之类的
2、src业务文件夹，
main.js 入口文件，createApp函数创建应用实例
app.vue的setup是一个开关，冗余在scirpt书写组合式API
index.html 单页入口提供id为app的挂载点
组合式API-setup选项
组合式API-reactive和ref函数
computed计算属性函数
组合式API-watch

在这里插入图片描述
- 组合式API的生命周期

在这里插入图片描述

组合式API的父子通信
组合式API下的父子通信-子传父
组合式API的模板引用
组合式API-provide和inject
综合案例
什么是Pinia
pinia-counter基础使用

异步action的实现：
storeToRefs
使用storeToRefs函数可以辅助保持数据（state+getter）的响应式解构。

项目起步

建立项目

在这里插入图片描述

在vscode中终端窗口中执行如下：

配置路径联想提示

在这里插入图片描述

elementPlus引入

在这里插入图片描述

重启一下项目：npm run dev

elementPlus主题定制

在这里插入图片描述

替换Components选项

配置css:

axios基础配置

在这里插入图片描述

把axios装到了本地
做基础的封装
使用实例
测试并运行项目
思考

项目路由设计

设计首页和登录页的路由（一级路由）

在这里插入图片描述

创建登录和退出两个组件
在这里插入图片描述
添加配置项
配置path和组件的对应关系

配置一级路由出口组件
在这里插入图片描述

设计分类页和默认Home页路由（二级路由）

在这里插入图片描述

添加分类页和Home页组件
配置路由
配置二级路由出口

静态资源初始化和Error Lens安装

引入样式使之生效
自动导入配置
如果在每个组件里都手动导入scss比较麻烦。现在配置自动导入

导入色值变量
在这里插入图片描述

npm run dev重新运行

layout-静态模板结构搭建

在这里插入图片描述

layout-字体图标引入

在这里插入图片描述

layout-一级导航渲染

配置接口函数
接口测试
渲染

layout-吸顶导航交互实现

准备吸顶导航组件

进行入口组件index.vue中使用改导航组件
获取滚动距离
安装

使用相关函数
以滚动距离做判断条件控制组件盒子展示隐藏

layout-pinia优化重复请求

Home-整体结构拆分和分类实现

在这里插入图片描述

Home-banner轮播图实现

准备模板
熟悉elementPlus相关组件
获取接口数据
渲染

Home-面板组件封装

不做任何抽象，准备静态模板
抽象可变的部分

主标题和副标题是纯文本，可以抽象成prop传入
主体内容是复杂的模板，抽象成插槽传入
定义prop
- 进行面板测试

总结

Home-新鲜好物和人气推荐实现

准备模板（homepanel组件）
这里相当创建了一个静态的组件
制定props
定制插槽内容（接口＋渲染模板）
接口如下：

插槽进行渲染：

Home-图片懒加载指令的实现

在这里插入图片描述

测试懒加载：

总结：

Home-懒加载指令优化

问题1：逻辑书写位置不合理

修改后的内容为：
入口文件main.js只做一件事情，就是引入注册一下
问题2：重复加载

Home-Product产品列表实现

在这里插入图片描述

熟悉并准备静态模板
封装接口
获取数据渲染模板
图片懒加载

Home-GoodsItem组件封装

如何封装
核心思想：把要显示的数据对象设计为props参数，传入什么数据就显示什么数据。

在这里插入图片描述

一级分类-整体认识和路由配置

在这里插入图片描述
RouterLinkter-link 是一个用于在 Vue 应用中创建导航链接的组件，由 Vue Router 提供，这个组件用于在不刷新页面的情况下导航到不同的 URL，并且支持 HTML History API，使用 router-link 组件能够生成一个< a >标签，其默认行为与普通的链接相同，但它能够更加智能地处理应用内的导航。
to此属性必须设置，它决定了导航的目标路由，其值可以是一个字符串或者一个对象，当使用对象时，可以设置更多选项如path、query和params。

字符串格式： About
对象格式： About
在这里插入图片描述

一级分类-面包屑导航渲染

准备组件模板->封装接口函数->调用接口获取数据（使用路由参数）->渲染模板

准备组件模板

在这里插入图片描述

封装接口函数

@ 通常被配置为指向项目的 src 目录或其他特定的目录。这样可以避免使用相对路径（如 …/…/…/），提高代码的可读性和可维护性。

不加 {} 的导入语法只能用于默认导出（default export）。在 JavaScript 或 TypeScript 中，import { getrequest } from ‘@/utils/request’; 语句中的大括号 {} 是用来进行解构导入的。
在这里插入图片描述

调用接口获取数据

在这里插入图片描述

渲染模板

修改“居家”这个固定值，将其替换成一个动态数据。
在这里插入图片描述

一级分类-banner轮播图实现

改造先前的接口

在这里插入图片描述

迁移首页轮播图逻辑

在这里插入图片描述

一级分类-激活状态显示和分类列表渲染

激活状态显示

在这里插入图片描述

分类列表渲染

分类的数据已经在面包屑导航实现的时候获取到了，只需要通过v-for遍历出来即可。

一级分类-解决路由缓存问题

什么是路由缓存问题

使用带有参数的的路由时需要注意，当用户从users/johnny导航到
/users/jolyne时，相同的组件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用。

问题：一级分类的切换正好满足上面的条件，组件实例复用，导致分类数据无法更新。
解决问题的思路：1，让组件不复用，强制销毁重建 2，监听路由变化，变化之后执行数据更新操作

方案一：给router-view添加key
以当前路由完整路径为key的值，给router-view组件绑定
方案二：使用beforeRouteUpdate导航钩子
beforeRouteUpdate钩子函数可以在每次路由更新之前执行，在回调执行需要数据更新的业务逻辑即可

一级分类-使用逻辑函数拆分业务

概念理解：
基于逻辑函数拆分业务是指把同一个组件中独立的业务代码通过函数做封装处理，提升代码的可维护性。

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/a1ba5b310c7b44229d1ace38627b5b76.png

在逻辑函数中，将route获得的数据以对象的形式return出去。

4.1 二级分类-整体认识和路由配置

创建路由组件

在这里插入图片描述

配置路由关系

在这里插入图片描述

修改模板实现跳转

在这里插入图片描述

4.2 二级分类-面包屑导航实现

封装接口

在这里插入图片描述

调用接口渲染模板

在这里插入图片描述

测试跳转

4.3 二级分类-基础商品列表实现

整体流程：实现基础列表渲染（基础参数），添加额外参数实现筛功能，获取数据渲染列表。

封装接口

在这里插入图片描述

获取基础列表数据渲染

在这里插入图片描述

列表渲染

在这里插入图片描述

4.4二级分类-列表筛选功能实现

核心逻辑：点击tab,切换筛选条件参数sortFiedl，重新发送列表请求

获取激活数据项

在这里插入图片描述

使用新参数发送请求重新渲染列表

el-tab-pane 是 Element UI 库中的一个组件，用于在 el-tabs
标签页组件中定义每个选项卡的内容。具体来说，el-tab-pane 组件表示选项卡页中的一个页面或一个内容区块。@tab-change 是
el-tabs 组件的一个事件回调属性，当选项卡发生变化时会触发。具体来说，当用户点击切换到一个不同的选项卡时，@tab-change
事件就会被触发，并会传递当前激活的选项卡的 name 属性值作为参数。

在这里插入图片描述

4.5 二级列表-列表无限加载实现

核心实现逻辑：使用elementPlus提供的v-infiniite-scroll指令监听是否满足触底条件，满足触底条件时页数参数加一获取下一页数据，做新老数据拼接渲染。

配置v-infinite-scroll

在这里插入图片描述

页数加一获取下一页

新数据和老数据拼接

在这里插入图片描述

加载完毕结束监听

在这里插入图片描述

4.6 二级分类-定制路由scrollBehavior

定制路由行为解决什么问题？在不同路由切换的时候，可以自动滚动到页面的顶部，而不是停留在原先的位置。

如何配置：vue-router支持scrollBehavior配置项，可以指定路由切换时的滚动位置。
在这里插入图片描述

4.7 详情页-整体认识和路由配置

路由配置

创建详情组件

在这里插入图片描述

绑定路由关系（参数）

在这里插入图片描述

绑定模板测试跳转

在这里插入图片描述

4.8详情页-基础数据渲染

在这里插入图片描述

封装接口

在这里插入图片描述

获取数据

在这里插入图片描述

渲染模板

在这里插入图片描述

4.9 详情页-热榜区域实现-基础封装和数据渲染

在这里插入图片描述

封装Hot热榜组件

在这里插入图片描述

获取渲染基础数据（以24小时热榜为准）

在这里插入图片描述

适配不同标题title

在这里插入图片描述

4.10详情页-热榜区-适配不同title和数据列表

适配不同列表内容

在这里插入图片描述

适配不同标题title

在这里插入图片描述

4.11 详细页-图片预览组件

组件功能分析

通过小图切换大图显示
思路：维护一个数组图片列表，鼠标划入小图记录当前小图下标值，通过下标值在数组中取对应图片，显示到大图位置。

准备组件静态模板（包括图片数据列表）

在这里插入图片描述

为小图绑定事件，记录当前激活下标值

在这里插入图片描述

通过下标切换大图显示

在这里插入图片描述

通过下标实现激活状态显示

利用动态类(:class)
在这里插入图片描述
2. 放大镜效果

左侧滑块跟随鼠标移动
思路：获取当前鼠标在盒子内的相对位置，控制滑块跟随鼠标移动
（1）获取鼠标垫的相对位置

（2）控制滑块跟随移动
在这里插入图片描述

右侧大图放大效果实现
效果：为了实现放大效果，大图的宽高是小图的两倍
思路：大图的移动方向和滑块移动方向相反，且数值为2倍
（1）定义大图的两个字段

（2）控制大图的显示

（3）渲染模板
鼠标移入控制滑块和大图显示隐藏
思路：鼠标移入盒子（isOutside）,滑块和大图才显示（v-show）
优化

4.14 详情页-图片预览组件-props适配和整体总结

在这里插入图片描述

4.15 详情页-SKU组件熟悉使用

在这里插入图片描述

4.16 详情页-通用组件统一注册全局

为什么要优化？
背景：componets目录下有可能还会有很多通用组件，有可能在多个业务模块中共享，所以统一进行全局组件注册比较好。
在这里插入图片描述

5.1 登录-整体认识和路由配置

整体认识：登录页面主要功能就是表单校验和登录登出业务
（1）建立登录模板
在这里插入图片描述
（2）给“请先登录”绑定事件

5.2 登录-表单校验功能

为什么要校证？
作用：前端提前校验可以省去一些错误的提交请求，为后端节省接口压力

表单数据

ElementPlus表单组件内置了表单校验功能，只需要按照组件要求配置必要参数即可
在这里插入图片描述
思想：当功能很复杂时，通过多个组件各自负责某个小功能，再组合成一个大功能是组件设计中的常用方法
（1）按照接口字段准备表单对象并绑定
（2）按照产品要求准备规则对象并绑定

（3）指定表单域的校验段名
（4）把表单对象进行双向绑定
在这里插入图片描述