项目笔记33（尚品汇）完结

原创 已于 2022-07-16 10:36:42 修改 · 1.7k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #vue.js #vue

于 2022-03-27 21:02:38 首次发布
本文介绍如何在前端项目中实现图片懒加载、表单验证及路由懒加载等优化手段，提升用户体验和应用性能。

文章目录

图片懒加载

安装插件

安装vue-lazyload

npm install vue-lazyload

安装完成后查看package.json文件
在这里插入图片描述
成功安装。

使用方法

引入插件以及注册插件

引入以及注册的方法通过查阅文档可知，首先找到main.js文件，然后利用如下代码引入以及注册
在这里插入图片描述
实际使用如下所示
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

表单验证

安装插件

npm install vee-validate@2

引入插件以及使用插件

在src文件夹下新建一个文件夹，名为plugins，在该文件夹下新建文件validate.js,其中内容如下所示
在这里插入图片描述
接下来回到main.js引入
在这里插入图片描述
接下来书写表单验证的内容
在这里插入图片描述

找到需要进行表单验证的界面（以注册界面为例）
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
此时如果输入无效信息页面效果如下
在这里插入图片描述
验证完成之后修改完成注册的逻辑，当表单内容都正确时，才可以发起请求
在这里插入图片描述

在这里插入图片描述

路由懒加载

类似于按需引入，只有路由被访问的时候，才加载对应组件
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

打包上线

npm run build

在这里插入图片描述
打包完成后会有map文件，如果不想要可以在vue.config.js中配置productionSourceMap:false

vue图片懒加载插件vue-lazyload监听加载失败事件的解决方案
u012443286的博客
05-15 5274
 对于vue项目而言，图片懒加载是一个常见的图片加载方案，可以优化用户体验，而vue-lazyload则是一个广泛使用的插件。  对于某些业务场景，我们需要监听图片加载失败事件，而后进行相应的处理，然而无论是官方文档还是网络上的解决方案都不直观甚至有错误，开发者不经过一番探索，很难知道如何处理，甚至怀疑该插件是否能监听加载失败事件。笔者经过一番探索，所幸的是，发现该问题终究是能够解决的，现将相关解决方案分享如下。 业务场景 试想这样的场景： 在img标签上，使用v-lazy绑定的图片的地址。图片的地址可能
Vue3实现图片懒加载及自定义懒加载指令
热门推荐
~~~
08-12 1万+
图片懒加载是一种常见性能优化的方式，它只去加载可视区域图片，而不是在网页加载完毕后就立即加载所有图片，能减少很多不必要的请求，极大的提升用户体验。图片懒加载的实现原理：在图片没进入可视区域的时候，只需要让 img 标签的 src 属性指向一张默认图片，在它进入可视区后，再替换它的 src 指向真实图片地址即可。本文就分享一下在vue3中实现图片懒加载的几种方式，包括使用插件以及自定义v-lazy指令。
vue中使用vue-lazyload懒加载
huanhuan03的博客
01-06 2953
先放上官网官网入口，其实官网上已经说得很明白了，加深一下记忆： 1，下载npm i vue-lazyload -S 2，在main.js中引入： import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload) // 或者写配置项 Vue.use(VueLazyload, { preLoad: 1.3, ...
基于 Vue.js 实现的 SPA 尚品汇在线电商前后台项目
Spring-_-Bear 的 优快云 博客
12-17 1988
基于 Vue.js 实现的 SPA 尚品汇在线电商项目，包含前台应用系统和后台管理系统两大部分，涵盖首页、购物车、订单支付和数据管理等众多子模块。前台项目基于 Vue 和前端三件套，后台项目基于 vue-admin-template 和 element-ui 组件库。采用模块化、组件化、工程化的模式开发，基于最新最热的前端技术如 Vue 全家桶、ES6、Webpack、Axios 等，包括首页、商品搜索列表、商品详情、购物车、订单、支付、用户登录与注册等多个子模块，功能齐全。
关于插件vue-lazyload懒加载的实战使用
m0_46269977的博客
04-16 508
用户体验优化之vue-lazyload 先安装npm install vue-lazyload -g 打开main.js引入vue-lazyload 回到你需要懒加载的组件的图片中把:src替换成v-lazy重新刷新页面即可 <img class="needsclick" v-lazy="item.imgurl" width="60" height="60" /> ...
Vue笔记【尚品汇项目】
javaScript1997的博客
02-28 5062
1、vue文件目录分析 node_modules: 文件夹:项目依赖文件夹 public文件夹： 一般防置一些静态资源(图片),需要注意的,放在public文件夹中的静态资源,webpack进行打包的时候,会原封不动的打包到dist文件夹中. src文件夹(程序员源代码文件夹): assets文件夹: 一般也是防置静态资源(一般防置多个组件共用的静态资源),需要注意,防置assets文件夹里面静态资源,在webpack打包的时候,webpack会把静态资源当做一个模块,打包JS文件里面。 compo
vue大型电商项目尚品汇（前台篇）day02.doc
07-09
Vue 大型电商项目尚品汇（前台篇）day02 本文是对 Vue 大型电商项目尚品汇（前台篇）day02 的总结，主要涵盖了 Vue 项目中的技术要点。 一、重写 push/replace 方法 在 Vue 项目中，我们需要重写 push/replace ...
尚品汇项目笔记
m0_67393039的博客
03-06 703
尚品汇项目笔记 前端Vue核心 1、vue文件目录分析 2、项目配置 3、组件页面样式 4、清除vue页面默认的样式 5、pages文件夹 6、footer组件显示与隐藏 7、路由传参 8、多次执行相同的push问题 9、定义全局组件 10、代码改变时实现页面自动刷新 11、Home首页其它组件 12、封装axios 13、前端通过代理解决跨域问题 14、请求接口统一封装 15、nprogress进度条插件 16、手动引入vuex 17、async await使用 18、vuex（*****） 19、lo
尚硅谷Vue2项目尚品汇笔记及技巧汇总
With_Sunflower的博客
11-18 843
B站尚硅谷Vue2前台项目尚品汇笔记及技巧汇总，整理自用，部分内容摘自老师上课所记笔记哈~
尚硅谷电商项目尚品汇笔记1.5
03-01
尚硅谷电商项目尚品汇笔记1.5
精选资源
尚硅谷电商项目尚品汇笔记4
03-01
尚硅谷电商项目尚品汇笔记4
vue-lazyload(懒加载)
莫普斯
06-13 508
demo 地址：https://www.cnblogs.com/xyyt/p/7650539.html一. vue lazyload插件：插件地址：https://github.com/hilongjw/vue-lazyloaddemo：http://hilongjw.github.io/vue-lazyload/二. 简单使用实例：这个插件还是蛮好用的，就是感觉这个插件的开发文档有点太啰嗦了，一...
Vue项目--尚品汇（开发流程、组件拆分，路由跳转）
qq_36582776的博客
12-25 847
1.项目开发流程： 1）写静态页面（html+css） 2）拆分组件 3）获取服务器数据动态展示 4）完成相应的动态业务逻辑 2.创建组件的时候，需要 1）找到组件结构 2）找准组件样式（使用less的话需要安装依赖：npm install --save less less-loader@5） 3）获取组件相应的资源（图片等） 3.创建组件后使用组件 （非路由组件） 1）引入 2）注册 3）使用 <template> <div> ...
尚品汇项目听课总结
li520_fei的博客
04-01 1万+
文章目录第一天1)要求2)脚手架使用3)脚手架下载下来的项目稍微配置一下1:浏览器自动打开2关闭eslint校验工具3 src文件夹的别名的设置4）路由的配置1路由的一个分析2安装路由3创建路由组件【一般放在views|pages文件夹】4配置路由，配置完四个路由组件5)创建非路由组件6)路由的跳转7)底部组件的显示和隐藏8）路由传参第二天1)一个导航问题2)将Home组件的静态组件拆分3)测试接口4)axios二次封装5)完成三级联动6)函数防抖与节流面试题7)优化项目。8)路由的跳转与传参第三天1)搜索
vue3中使用element-plus的el-scrollbar实现自动滚动（横向/纵横滚动）
qq_43730272的博客
12-31 276
vue3中使用element-plus的el-scrollbar实现自动滚动（横向/纵横滚动）
JavaScript 静态模块声明（静态分析、动态导入）
Irene1991的博客
12-29 493
JavaScript的静态模块声明（ES6 Modules）要求在代码执行前确定模块依赖关系。核心特点包括：1）导入/导出必须在顶层作用域，不能动态生成；2）支持编译时分析，实现Tree Shaking优化；3）提供循环依赖安全处理。与CommonJS的动态加载不同，ES6模块路径必须静态确定。动态导入（import()）作为补充允许运行时加载。优势包括提前错误检测、更好的代码优化和打包体积缩减。这种设计平衡了灵活性与性能，更适合大型应用开发。
vue2 基于虚拟dom的下拉选择框，保证大数据不卡顿，仿antd功能和样式
licongmingli的博客
12-31 611
本文介绍了一个基于Vue2和Ant Design 1.7.8的虚拟列表下拉选择框组件的封装实现。由于Ant Design原生组件不支持虚拟列表功能，作者结合vue-virtual-scroller和vue-select封装了一个支持多选/单选/清除/搜索功能的选择框组件。文章详细说明了组件实现的技术难点：包括动态挂载DOM的方式解决模板渲染问题、样式适配Ant Design风格的改造过程，以及当前存在的待优化项（下拉列表脱离文档流问题）。组件通过计算属性和监听机制实现了数据同步，并提供了完整的代码示例展示核
A2A协议与LangChain.js实战：构建微型软件工厂
Web分享
01-01 995
随着多智能体（Multi-Agent）系统的兴起，单纯的工具调用（Tool Use）已无法满足复杂协作需求。本文将探讨从 MCP（Model Context Protocol）到 A2A（Agent-to-Agent）协议的演进，解析去中心化智能体通信的设计模式，并利用 LangChain.js、Express 和 JSON-RPC 2.0 构建一个包含 PM、Dev、QA 的分布式“微型软件工厂”。
Flutter Web性能优化标签解析（二）
最新发布
qq_30279137的博客
01-04 714
立即显示：HTML 加载后立即显示加载界面保持简单：使用纯 CSS 动画，减少资源依赖提供反馈：显示进度或状态信息平滑过渡：使用淡出效果，避免突兀消失错误处理：考虑加载失败的情况超时保护：避免永远显示加载界面这个方案能显著提升 Flutter Web 应用的用户体验，让用户感觉应用加载更快、更专业。
电商项目：尚品汇笔记实现数量动态管理
在尚硅谷电商项目的尚品汇笔记3中，主要讨论了如何实现购物车页面中产品数量的动态管理，特别是对于用户通过点击减号按钮（-）、加号按钮（+）以及文本框输入进行数量更改时的处理逻辑。关键知识点如下： 1. **统一...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Revin050

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值