编写一套工具库并上传NPM

你的 工具箱

开箱即可用的 directive\utils,
说明:vue3-directive-tools 是一个方便在 Vue 3 + Ts 项目中快速使用的 directive、tool 的 npm 插件。它允许您轻松地在项目中添加多种功能,它采用 Ts 方式开发,与 Vue3 更加搭配

npm:NPM地址
github:GitHub源码

🌍 1、安装

npm install vue3-directive-tools

说明:

此工具库是基于 Element-plus、Sass、Node、Ts,请您在安装以上依赖后使用此辅助库,它可帮您快速开发功能、您只需使用 v-xx=“” ;

🛹 2、指令的使用方法

在你的主应用程序入口文件(例如 main.js)中,导入并使用 directive :

import { directive } from "vue3-directive-tools";
app.use(directive).mount("#app");

copy

v-copy=“data”

<template><div class="card content-box"><span class="text">复制指令 🍇🍇🍇🍓🍓🍓</span><div class="box-content"><el-input placeholder="请输入内容" v-model="data" style="width: 500px"><template #append><el-button v-copy="data">复制</el-button></template></el-input></div></div>
</template><script setup lang="ts" name="copyDirect">
import { ref } from 'vue';
const data = ref<string>('我是被复制的内容 🍒 🍉 🍊');
</script>

debounce

v-debounce=“debounceInput”

  <el-inputv-debounce="debounceInput"v-model.trim="iptVal"placeholder="防抖输入框 (0.5秒后执行)"style="width: 100%"/>

draggable

v-draggable

<template><div class="content-box"><span class="text">拖拽指令 🍇🍇🍇🍓🍓🍓</span><div v-draggable class="drag-box cursor-move">我可以拖拽哦~</div></div>
</template><style lang="scss" scoped>
.content-box {position: relative; //requiredwidth: 500px;height: 500px;border: 1px solid #ccc;.drag-box {position: absolute; //requiredwidth: 100px;height: 100px;background-color: #ccc;}
}
</style>

longpress

v-longpress=“longpress”

<template><div class="card content-box"><span class="text">长按指令 🍇🍇🍇🍓🍓🍓</span><el-button type="primary" v-longpress="longpress">长按2秒触发事件</el-button></div>
</template><script setup lang="ts" name="longpressDirect">
import { ElMessage } from 'element-plus';
const longpress = () => {ElMessage.success('长按事件触发成功 🎉🎉🎉');
};
</script>

throttle

v-throttle=“throttleClick”

<template><div class="card content-box"><span class="text">节流指令 🍇🍇🍇🍓🍓🍓</span><el-button type="primary" v-throttle="throttleClick">节流按钮 (每隔1S秒后执行)</el-button></div>
</template><script setup lang="ts" name="throttleDirect">
import { ElMessage } from 'element-plus';
const throttleClick = () => {ElMessage.success('我是节流按钮触发的事件 🍍🍓🍌');
};
</script>

waterMarker

<divv-waterMarker="{text:'版权所有',textColor:'rgba(180, 180, 180, 0.4)'}"
></div>

🛹 2、utils\工具的使用方法

debounceRest

<el-button @click="handClick('我是参数')">首页</el-button>import { debounceRest } from "vue3-directive-tools";const handClick = debounceRest((varStr: string) => {console.log("!这里输出防抖 🚀 ==>:", varStr);
}, 250);

isEvenOrOdd

<el-button @click="handClick">判断奇数偶数</el-button>
import { isEvenOrOdd } from "vue3-directive-tools";function handClick() {const isEvenOrOdd = isEvenOrOdd(123);console.log("!这里输出奇偶判断 🚀 ==>:", isEvenOrOdd);
}

1、npm 命令大全

以下是一些常见的 npm 命令:

  1. 初始化一个新的 npm 项目:npm init
  2. 安装依赖库:npm install <package-name>
  3. 全局安装依赖库:npm install -g <package-name>
  4. 更新依赖库:npm update <package-name>
  5. 删除依赖库:npm uninstall <package-name>
  6. 运行脚本:npm run <script-name>
  7. 显示当前项目的依赖列表:npm ls
  8. 查看特定依赖库的信息:npm view <package-name>
  9. 搜索依赖库:npm search <keyword>
  10. 发布包到 npm 仓库:npm publish

当使用 npm install 命令时,可以添加一些标志来指定依赖包的安装方式:

  1. -S,或者 --save:将依赖项添加到 dependencies(生产环境依赖)中。
    示例:npm install <package-name> -S

    npm install <package-name> --save

  2. -D,或者 --save-dev:将依赖项添加到 devDependencies(开发环境依赖)中。
    示例:npm install <package-name> -D

    npm install <package-name> --save-dev

2、切换 npm 源:

要切换到官方源,可以执行以下命令:

npm config set registry https://registry.npmjs.org/

要切换到淘宝源,可以执行以下命令:

npm config set registry https://registry.npm.taobao.org/

要切换到 cnpm 源,可以执行以下命令:

npm config set registry http://r.cnpmjs.org/

验证切换结果:执行以下命令可以验证切换的结果

npm config get registry

3、发布为公共包

使用以下命令发布为公共包:

npm publish --access=public

4、修改 npm 包

修改完包代码后,可以执行以下命令将版本号自动加 1:

npm version patch

或者您也可以手动修改package.json文件中的版本号,然后执行npm publish来发布修改后的包。

修改并发布完成。

5、删除 npm 包

要删除特定版本的包,可以使用以下命令:

npm unpublish 包名@版本号

要强制删除所有版本的包,可以使用以下命令:

npm unpublish 包名 --force

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/42328.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

系统架构设计师---2017年上午试题1答案详解

2017年上午试题1答案详解 某计算机系统采用5级流水线结构执行指令,设每条指令的执行由取指令(2∆t)、分析指令(1∆t)、取操作数(3∆t)、运算(1∆t)和写回结果(2∆t)组成,并分别用5个子部完成,该流水线的最大吞吐率为(1);若连续向流水线输入10条指令,则该流水线的加速比为(…

问道管理:放量打拐什么意思?常见的放量打拐三种形态?

成交量一直是股票交易中比较重要的目标&#xff0c;那么&#xff0c;放量打拐是什么意思&#xff1f;常见的放量打拐三种形状是什么&#xff1f;下面问道管理为我们预备了相关内容&#xff0c;以供参阅。 放量打拐什么意思&#xff1f; 放量是指股票成交量与前几个交易日比较显…

安装和配置 Ansible

安装和配置 Ansible 按照下方所述&#xff0c;在控制节点 control.area12.example.com 上安装和配置 Ansible&#xff1a; 安装所需的软件包 创建名为 /home/curtis/ansible/inventory 的静态清单文件&#xff0c;以满足以下要求&#xff1a; node1 是 dev 主机组的成员 node2 …

openGauss学习笔记-43 openGauss 高级数据管理-事件触发器

文章目录 openGauss学习笔记-43 openGauss 高级数据管理-事件触发器43.1 语法格式43.2 参数说明43.3 示例 openGauss学习笔记-43 openGauss 高级数据管理-事件触发器 触发器会在指定的ddl事件发生时自动执行函数。目前事件触发器仅在PG兼容模式下可用。 43.1 语法格式 创建事…

独家!网络机顶盒哪个好?测评员深度对比盘点网络机顶盒排名

网络机顶盒称得上是家家户户必备&#xff0c;每年我都会进行网络机顶盒的测评&#xff0c;今年已经测评过十几款了&#xff0c;后台收到很多私信不知道网络机顶盒哪个好&#xff0c;我本期整理了网络机顶盒排名&#xff0c;大家在选购时可以参考&#xff1a; ◆泰捷WEBOX 60Pro…

测试开发面试心得

百度测试开发实习生面试心得&#xff1a; 电话面试&#xff1a; 面试官&#xff1a;首先做一下自我介绍吧 我&#xff1a;我是***&#xff0c;来自什么大学&#xff0c;现在大三&#xff0c;在学校期间担任过部长&#xff0c;副主席等职务&#xff0c; 组织举办了很多比赛&…

Keepalived + Nginx 实现高可用

一、简介 浮动IP、漂移IP地址又叫做VIP&#xff0c;也就是虚拟IP。 Keepalived 是一种高性能的服务器高可用或热备解决方案。 Keepalived 可以用来防止服务器单点故障的发生&#xff0c;通过配合 Nginx 可以实现 web 前端服务的高可用。 Keepalived 以 VRRP 协议为实现基础&a…

使用 spaCy 增强 NLP 管道

介绍 spaCy 是一个用于自然语言处理 (NLP) 的 Python 库。SpaCy 的 NLP 管道是免费且开源的。开发人员使用它来创建信息提取和自然语言理解系统,例如 Cython。使用该工具进行生产,拥有简洁且用户友好的 API。 如果您处理大量文本,您会想了解更多相关信息。例如,它是关于什…

HOT99-下一个排列

leetcode原题链接&#xff1a;下一个排列 题目描述 整数数组的一个 排列 就是将其所有成员以序列或线性顺序排列。 例如&#xff0c;arr [1,2,3] &#xff0c;以下这些都可以视作 arr 的排列&#xff1a;[1,2,3]、[1,3,2]、[3,1,2]、[2,3,1] 。整数数组的 下一个排列 是指其…

【C++】模板template

&#x1f525;&#x1f525; 欢迎来到小林的博客&#xff01;&#xff01;       &#x1f6f0;️博客主页&#xff1a;✈️林 子       &#x1f6f0;️博客专栏&#xff1a;✈️ C       &#x1f6f0;️社区 :✈️ 进步学堂       &#x1f6f0;️欢…

Django之定时任务--apscheduler

Django--定时任务apscheduler的使用 apscheduler定时任务的使用1、安装包2、配置settings.py3、在manage.py的文件同级目录下创建文件scheduler.py4、在项目的urls.py中调用这个定时计划5、然后启动项目 python manage.py runserver,在admin中查看就能看到你的定时任务及执行的…

机器学习算法之-逻辑回归(1)

什么是回归 回归树&#xff0c;随机森林的回归&#xff0c;无一例外他们都是区别于分类算法们&#xff0c;用来处理和预测连续型标签的算法。然而逻辑回归&#xff0c;是一种名为“回归”的线性分类器&#xff0c;其本质是由线性回归变化而来的&#xff0c;一种广泛使用于分类问…

Vue 引入 Element-UI 组件库

Element-UI 官网地址&#xff1a;https://element.eleme.cn/#/zh-CN 完整引入&#xff1a;会将全部组件打包到项目中&#xff0c;导致项目过大&#xff0c;首次加载时间过长。 下载 Element-UI 一、打开项目&#xff0c;安装 Element-UI 组件库。 使用命令&#xff1a; npm …

ArcGIS Maps SDK for JavaScript系列之二:认识Map和MapView

目录 Map创建一个 Map 对象的示例代码&#xff1a;Map的常用属性Map的常用方法 MapViewMapView的常用属性MapView的常用方法 在 ArcGIS Maps SDK for JavaScript 中&#xff0c;Map 和 MapView 是两个重要的概念&#xff0c;用于创建和展示地图应用程序。 Map Map 表示一个地图…

【Rust】Rust学习 第十三章Rust 中的函数式语言功能:迭代器与闭包

Rust 的设计灵感来源于很多现存的语言和技术。其中一个显著的影响就是 函数式编程&#xff08;functional programming&#xff09;。函数式编程风格通常包含将函数作为参数值或其他函数的返回值、将函数赋值给变量以供之后执行等等。 更具体的&#xff0c;我们将要涉及&#…

bert,transformer架构图及面试题

Transformer详解 - mathor atten之后经过一个全连接层残差层归一化 class BertSelfOutput(nn.Module):def __init__(self, config):super().__init__()self.dense nn.Linear(config.hidden_size, config.hidden_size)self.LayerNorm nn.LayerNorm(config.hidden_size, epscon…

redis 发布和订阅

目录 一、简介 二、常用命令 三、示例 一、简介 Redis 发布订阅 (pub/sub) 是一种消息通信模式&#xff1a;发送者 (pub) 发送消息&#xff0c;订阅者 (sub) 接收消息。Redis 客户端可以订阅任意数量的频道。下图展示了频道 channel1 &#xff0c;以及订阅这个频道的三个客户…

前端对文件转换处理的一些常用方法

文章目录 0&#xff0c;前言1&#xff0c;将图片的url网络链接(http://) 转为base64格式2&#xff0c;将base64的图片数据转换为file文件3&#xff0c;将以base64的图片数据转换为Blob4&#xff0c;将file文件转化为base645&#xff0c;将file文件转换为Blob6&#xff0c;获取文…

CentOS系统环境搭建(八)——CentOS7开机自动执行脚本(以MySQL为例)

CentOS7开机自动执行脚本 文章目录 CentOS7开机自动执行脚本第一步&#xff1a;新建一个脚本run.sh第二步&#xff1a;脚本添加可执行权限第三步&#xff1a;执行如下命令将/etc/rc.d/rc.local文标记为可执行文件第四步&#xff1a;打开/etc/rc.d/rc.local文件&#xff0c;在最…

利用Opencv实现人像迁移

前言&#xff1a; Hello大家好&#xff0c;我是Dream。 今天来学习一下如何使用Opencv实现人像迁移&#xff0c;欢迎大家一起参与探讨交流~ 本文目录&#xff1a; 一、实验要求二、实验环境三、实验原理及操作1.照片准备2.图像增强3.实现美颜功能4.背景虚化5.图像二值化处理6.人…