![](https://img-blog.csdnimg.cn/20190918140053667.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue3项目
文章平均质量分 77
vue3
牛奶皮子
这个作者很懒,什么都没留下…
展开
-
vue3项目总结
ElementPlus表单组件内置了初始的校验配置,应付简单的校验只需要通过配置即可,如果想要定制一些特殊的校验需求,可以使用自定义校验规则。在本项目中,给是否同意协议绑定自定义校验。如果勾选了协议框,通过校验,如果没有勾选,不通过校验。15. 整个表单的内容验证在点击登录时,需要对所有需要校验的表单进行统一校验,防止用户还没有输入账号和密码,就直接点击登录。步骤:1. 获取form组件实例(通过ref获取)2. 调用实例方法// 3. 获取form实例做统一校验。原创 2023-05-17 18:21:25 · 611 阅读 · 0 评论 -
vue3项目(十一)---会员中心
会员中心-整体功能梳理和路由配置。原创 2023-05-15 17:25:30 · 375 阅读 · 0 评论 -
vue3项目(十)---支付
支付模块-渲染基础数据。原创 2023-05-15 15:14:49 · 1718 阅读 · 0 评论 -
vue3项目(九)---结算
结算模块-路由配置和基础数据渲染。原创 2023-05-15 13:59:51 · 218 阅读 · 0 评论 -
vue3项目(八)---购物车
1.购物车业务逻辑梳理拆解1.购物车业务逻辑梳理拆解1. 整个购物车的实现分为俩个大分支,本地购物车操作和接口购物车操作2. 由于购物车数据的特殊性,采取Pinia管理购物车列表数据并添加持久化缓存2.本地购物车 - 加入购物车实现1)封装cartStore在stroes里新建cartStore.js,用于封装购物车模块2)组件点击添加按钮给购物车绑定添加事件定义添加购物车事件3)调用action添加(传递参数)准备参数3.本地购物车 - 头部购物车列表渲染。原创 2023-05-14 19:30:30 · 5784 阅读 · 0 评论 -
vue3项目(七)----Login
1.表单校验主要是使用ElementPlus组件来完成。其中:1)用户名和密码:只需要通过简单的配置(看文档的方式,复杂的功能通过多个不同的组件来拆解)2)同意协议:自定义规则,validator:(rule,value,callback)=>{}3)统一校验:通过调用form实例的方法 validate->true2.登录的业务流程。使用Elmessage来提示用户是否跳转成功。使用useRouter进行路由跳转。3.统一错误提示。使用响应式拦截器。原创 2023-05-13 22:04:03 · 7618 阅读 · 1 评论 -
vue3项目(六)---detail
1.可选链(?.):用于无法判断是否存在改参数时使用,如果没有会立即返回undefined,就不会当读取为空时报错。2.热榜区域实现中,使用了props传参。通过共用一个组件,传递不同的参数实现。3.放大镜效果:使用useMouseInelement来获取鼠标的位置。原创 2023-05-13 16:27:38 · 1236 阅读 · 0 评论 -
vue3项目(五)---二级分类
1.商品的无限加载:使用使用elementPlus提供的 v-infinite-scroll 指令。2.在不同的路由切换时,让滚动条一直在顶部,使用scrollBehaior。原创 2023-05-12 20:19:10 · 679 阅读 · 0 评论 -
vue3项目(三)---Home
1.纯展示类组件通用封装思路总结:home页中的HomePanel和GoodsItem这两个组件就是纯展示类的组件。1)搭建纯静态的部分,不管可变的部分2)抽象可变的部分为组件参数非复杂的模版抽象成props,复杂的结构模版抽象为插槽2.home页面使用了图片懒加载。把懒加载封装为了一个插件,可以全局使用。3.使用elementPlus制作轮播图。原创 2023-05-12 11:09:41 · 311 阅读 · 0 评论 -
vue3项目(四)---一级分类页
1. 一级分类-整体认识和路由配置1. 一级分类-整体认识和路由配置1)当点击一级分类的时候,会路由跳转到Category组件,并传递参数过去。所以需要在Category组件进行路由配置,进行参数的占位。2)配置导航区域链接因为点击LayoutHeader,LayoutFixed组件都会进行路由跳转。所以都需要配置链接,传递参数。2. 一级分类-面包屑导航渲染。原创 2023-05-12 16:49:33 · 488 阅读 · 0 评论 -
vue3项目(一)项目前的准备
路由设计原则:找页面的切换方式,如果是整体切换,则为一级路由,如果是在一级路由的内部进行的内容切换,则为二级路由。在styles文件夹里创建element文件,里面创建index.scss文件,里面引入如下的样式。在项目里一些组件共享的色值会以scss变量的方式统一放到一个名为 var.scss 的文件中。3)通知Element采用scss语言,然后导入定制的scss文件覆盖。分类页和Home都是首页中进行切换,所以是首页的子路由。2)在vite.config.js中配置自动导入。原创 2023-05-10 20:14:53 · 400 阅读 · 0 评论 -
vue3项目(二)---Layout
的列表是完全一致的,但是要发送俩次网络请求,存在浪费。需求:浏览器在上下滚动的过程中,如果距离顶部的滚动距离大于78px,吸顶导航显示,小于78px隐藏。字体图标采用的是阿里的字体图标库,样式文件已经准备好,在 `index.html`文件中引入即可。核心逻辑:根据滚动距离判断当前show类名是否显示,大于78显示,小于78,不显示。和前面一样,先引入静态页面,再在Layout组件中引入。1)准备吸顶导航组件(LayoutFixed)2)获取滚动的距离(使用VueUse插件)2)在Layout组件中引入。原创 2023-05-10 20:46:06 · 2671 阅读 · 0 评论