当前位置: 首页 > news >正文

Vue电商项目--VUE插件的使用及原理

图片懒加载

图片懒加载,就是图片延迟加载。只加载页面可视区域上的图片,等滚动到页面下面时,再加载对应视口上的图片
而在vue中有一个插件

vue-lazyload - npm (npmjs.com)

npm i vue-lazyload

 

 

去使用他,这里我们引入了一张图片,然后在插件的配置中,配置了懒加载默认的图片为这张

 然后就是这样去设置他

 然后我们就发现了图片并没有加载出来,我查询了文档。好像要下这个版本

npm i vue-lazyload@1.3.3

然后成功了

 图片没有加载的时候,就默认显示这样

 然后说一下图片懒加载的原理

自定义插件

书写插件,并去使用它

然后传入的俩个参数,第一个是vue,第二个是传入的值

这个element就是网页标签的结构 params就是传入的参数

然后我们就实现了一个将小写字符修改成大写字符的功能

vee-validate表单验证使用

vee-validate 基本使用

vee-validate - npm (npmjs.com)

第一步:插件安装与引入

npm i vee-validate@2 --save  安装的插件安装2版本的
import VeeValidate from 'vee-validate'import zh_CN from 'vee-validate/dist/locale/zh_CN'   // 引入中文 messageVue.use(VeeValidate)

第二步:提示信息

VeeValidate.Validator.localize('zh_CN', {messages: {...zh_CN.messages,is: (field) => `${field}必须与密码相同` // 修改内置规则的 message,让确认密码和密码相同},attributes: { // 给校验的 field 属性名映射中文名称phone: '手机号',code: '验证码',password:'密码',password1:'确认密码',isCheck:'协议'}})

第三步:基本使用

<inputplaceholder="请输入你的手机号"v-model="phone"name="phone"v-validate="{ required: true, regex: /^1\d{10}$/ }":class="{ invalid: errors.has('phone') }"/><span class="error-msg">`{{ errors.first("phone") }}</span>

const success = await this.$validator.validateAll(); //全部表单验证

//自定义校验规则

//定义协议必须打勾同意

VeeValidate.Validator.extend('agree', {validate: value => {return value},getMessage: field => field + '必须同意'})

引用注册

完成提示信息

将组件内的结构进行替换

效果是这样的,然后根据这个替换其他的表单信息,修改其数据

完成了其他表单的验证。而下面的勾选需要自定义

判断验证所有表单都成功了

然后表单验证判断完成

路由懒加载

路由懒加载 | Vue Router (vuejs.org)

就是按需导入的意思

当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

可以简化

再简化

简化的原理就是箭头函数

处理map文件

打包 npm run build

搞定

项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。

有了map就可以像未加密的代码一样,准确的输出是哪一行那一列有错。

所以该文件如果项目不需要是可以除掉的

vue.config.js >配置

productionSourceMap:false

去配置文件去配置,然后下次打包map文件就没了

相关文章:

Vue电商项目--VUE插件的使用及原理

图片懒加载 图片懒加载&#xff0c;就是图片延迟加载。只加载页面可视区域上的图片&#xff0c;等滚动到页面下面时&#xff0c;再加载对应视口上的图片 而在vue中有一个插件 vue-lazyload - npm (npmjs.com) npm i vue-lazyload 去使用他&#xff0c;这里我们引入了一张图片…...

2.部署kubernetes的组件

文章目录 部署kubernetes单master的K8S集群Linux初始化部署etcd证书环境etcd软件备份还原etcd 部署master组件部署apiserver部署controller-manager部署scheduler部署kubectl 部署node组件部署dockernode01节点node02节点部署kube-proxy K8S 二进制搭建总结 部署kubernetes 常见…...

后端开发4.Elasticsearch的搭建

使用docker安装 安装elasticsearch 拉取镜像 docker pull elasticsearch:7.17.0容器间建立通信,创建 elastic的网关 docker network create elastic 创建es容器【自启动】【虚拟机处理器数量至少两个】 docker run --restart=always -p 9200:9200 -p 9300:9300 -e "…...

嵌入式该往哪个方向发展?

1. 你所在的城市嵌入式Linux岗位多吗&#xff1f;我觉得这是影响你做决定的另一个大问题。我们学嵌入式Linux这门技术&#xff0c;绝大部分人是为了从事相关的工作&#xff0c;而不是陶冶情操。但是根据火哥统计来看&#xff0c;嵌入式Linux的普遍薪资虽然高于单片机&#xff0…...

非凸科技受邀参加中科大线上量化分享

7月30日&#xff0c;非凸科技受邀参加由中国科学技术大学管理学院学生会、超级量化共同组织的“打开量化私募的黑箱”线上活动&#xff0c;分享量化前沿以及求职经验&#xff0c;助力同学们拿到心仪的offer。 活动上&#xff0c;非凸科技量化策略负责人陆一洲从多个角度分享了如…...

Linux 命令之 - chown(改变文件拥有者及所属组)

基本语法&#xff1a; chown [-R] 账号名称 文件或目录 chown [-R] 账号名称:用户组名称 文件或目录 参数&#xff1a; -R : 进行递归( recursive )的持续更改&#xff0c;即连同子目录下的所有文件、目录 都更新成为这个用户组。常常用在更改某一目录的情况。 参考&…...

【基于openharmony的多路摄像头功能:USB设备插拔检测】

前言 最近项目接触的模块比较繁多而杂&#xff0c;因此开始写文章记录下用以总结。 目前在做的是基于openharmony3.2的多camera功能主要涉及HDF(HAL)层与framework层。 本文章涉及多路摄像头功能的第一步&#xff1a;支持USB摄像头插拔检测。 内容 目前openharmony在HDF层…...

uni-app:实现数字文本框,以及左右加减按钮

效果 代码 <template><view><view classline3><view classline3_position><view classleft>数量<text>*</text></view> <view class"right"><view class"quantity_btn"><view class"…...

跨平台开发框架Qt:面向对象、丰富API

Qt是一个跨平台C图形用户界面应用程序开发框架&#xff0c;它具有以下三大优势&#xff1a; 优良的跨平台特性&#xff1a;Qt支持多种操作系统&#xff0c;包括Windows、Linux、Solaris、HP-UX、Irix、FreeBSD等&#xff0c;使开发人员能够在不同平台上开发和部署应用程序&…...

An unexpected error has occurred. Conda has prepared the above report

今日在服务器上创建anaconda虚拟环境的时候&#xff0c;出现了如下报错 An unexpected error has occurred. Conda has prepared the above report 直接上解决方案 在终端中输入如下指令 conda config --show-sources 如果出现以下提示&#xff0c;说明多了一个文件 输入以下…...

考研C语言进阶题库——更新6-10题

目录 6输入一个字符串&#xff0c;输出其中字母的个数 7用递归求函数值x1,f(x)10,x>1.f(x)f(x-1)2 8所给字符串正序反序连接&#xff0c;形成新串并输出 9输入若干个整数以-1标记为结束输出其中的最大值 10求矩阵的两条对角线之和 6输入一个字符串&#xff0c;输出其中…...

汽车BOOTLOADER开发经历

鄙人参与电动汽车BOOTLOADER开发近三年&#xff0c;从完全没有这方面的基础到参与国内外大小知名或不知名车企的电动车三大件的BOOTLOADER开发&#xff0c;总结了以下一点学习心得。 1.熟悉基本术语含义 诊断、寻址方式、FBL、擦除、驱动 2.熟悉国际标准、UDS服务格式 汽车的…...

适配器模式(C++)

定义 将一个类的接口转换成客户希望的另一个接口。Adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。 应用场景 在软件系统中&#xff0c;由于应用环境的变化&#xff0c;常常需要将“一些现存的对象 ”放在新的环境中应用&#xff0c;但是新环境要求…...

HTTP连接之出现400 Bad Request分析

1、400简介 400是一种HTTP状态码&#xff0c;告诉客户端它发送了一条异常请求。400页面是当用户在打开网页时&#xff0c;返回给用户界面带有400提示符的页面。其含义是你访问的页面域名不存在或者请求错误。主要分为两种。 1、语义有误&#xff0c;当前请求无法被服务器理解…...

后端开发, 接口幂等性是什么意思

在后端开发中,接口的幂等性是指同一个请求的多次执行所产生的效果与执行一次的效果相同。简而言之,对于同一个接口请求,无论发送多少次,其对资源的状态修改结果都是一致的。 幂等性在接口设计和实现中非常重要,特别是在涉及数据修改或资源状态变更的情况下。如果一个接口…...

k8s手动发布镜像的方法

kubectl edit deploy编辑对应的文件&#xff0c;并:wq!保存即可...

十二、ESP32控制步进电机

1. 运行效果 2. 步进电机 最大特点:能够控制旋转一定的角度 3. 步进电机原理...

利用openTCS实现车辆调度系统(六)openTCS订单的使用

运输订单 由类的实例表示&#xff0c;描述了由车辆执行的进程。 通常&#xff0c;此过程是货物从一个地点到另一个地点的实际运输。 然而&#xff0c;A也可以只描述车辆到目的地位置的运动以及要执行的可选车辆操作。TransportOrderTransportOrder 以下所有内容都是 openTCS …...

第一天 什么是CSRF ?

✅作者简介&#xff1a;大家好&#xff0c;我是Cisyam&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Cisyam-Shark的博客 &#x1f49e;当前专栏&#xff1a; 每天一个知识点 ✨特色专…...

知识图谱推荐系统研究综述

基于协同过滤的推荐是当前应用最为广泛的推荐方法,但也存在着新用户或新项目的冷启动以及数据稀疏等问题。针对上述两种方法出现的问题,研究者进一步提出了混合推荐系统。混合推荐系统结合上述两种方法的优点,可以有效缓解其中的不足,增加推荐的准确性。但是,混合推荐系统…...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

CRMEB 中 PHP 短信扩展开发:涵盖一号通、阿里云、腾讯云、创蓝

目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为&#xff1a;一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...

提升移动端网页调试效率:WebDebugX 与常见工具组合实践

在日常移动端开发中&#xff0c;网页调试始终是一个高频但又极具挑战的环节。尤其在面对 iOS 与 Android 的混合技术栈、各种设备差异化行为时&#xff0c;开发者迫切需要一套高效、可靠且跨平台的调试方案。过去&#xff0c;我们或多或少使用过 Chrome DevTools、Remote Debug…...