广州个性化网站开发,优惠券网站建设,做360网站中保存的图片存在哪里的,什么软件能自己做网站你的 工具箱 开箱即可用的 directive\utils#xff0c; 说明#xff1a;vue3-directive-tools 是一个方便在 Vue 3 Ts 项目中快速使用的 directive、tool 的 npm 插件。它允许您轻松地在项目中添加多种功能#xff0c;它采用 Ts 方式开发#xff0c;与 Vue3 更加搭配 npm 说明vue3-directive-tools 是一个方便在 Vue 3 Ts 项目中快速使用的 directive、tool 的 npm 插件。它允许您轻松地在项目中添加多种功能它采用 Ts 方式开发与 Vue3 更加搭配 npmNPM地址 githubGitHub源码 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” templatediv classcard content-boxspan classtext复制指令 /spandiv classbox-contentel-input placeholder请输入内容 v-modeldata stylewidth: 500pxtemplate #appendel-button v-copydata复制/el-button/template/el-input/div/div
/templatescript setup langts namecopyDirect
import { ref } from vue;
const data refstring(我是被复制的内容 );
/scriptdebounce v-debounce“debounceInput” el-inputv-debouncedebounceInputv-model.trimiptValplaceholder防抖输入框 (0.5秒后执行)stylewidth: 100%/draggable v-draggable templatediv classcontent-boxspan classtext拖拽指令 /spandiv v-draggable classdrag-box cursor-move我可以拖拽哦~/div/div
/templatestyle langscss scoped
.content-box {position: relative; //requiredwidth: 500px;height: 500px;border: 1px solid #ccc;.drag-box {position: absolute; //requiredwidth: 100px;height: 100px;background-color: #ccc;}
}
/stylelongpress v-longpress“longpress” templatediv classcard content-boxspan classtext长按指令 /spanel-button typeprimary v-longpresslongpress长按2秒触发事件/el-button/div
/templatescript setup langts namelongpressDirect
import { ElMessage } from element-plus;
const longpress () {ElMessage.success(长按事件触发成功 );
};
/scriptthrottle v-throttle“throttleClick” templatediv classcard content-boxspan classtext节流指令 /spanel-button typeprimary v-throttlethrottleClick节流按钮 (每隔1S秒后执行)/el-button/div
/templatescript setup langts namethrottleDirect
import { ElMessage } from element-plus;
const throttleClick () {ElMessage.success(我是节流按钮触发的事件 );
};
/scriptwaterMarker
divv-waterMarker{text:版权所有,textColor:rgba(180, 180, 180, 0.4)}
/div2、utils\工具的使用方法
debounceRest
el-button clickhandClick(我是参数)首页/el-buttonimport { debounceRest } from vue3-directive-tools;const handClick debounceRest((varStr: string) {console.log(这里输出防抖 , varStr);
}, 250);isEvenOrOdd
el-button clickhandClick判断奇数偶数/el-button
import { isEvenOrOdd } from vue3-directive-tools;function handClick() {const isEvenOrOdd isEvenOrOdd(123);console.log(这里输出奇偶判断 , isEvenOrOdd);
}1、npm 命令大全 以下是一些常见的 npm 命令 初始化一个新的 npm 项目npm init安装依赖库npm install package-name全局安装依赖库npm install -g package-name更新依赖库npm update package-name删除依赖库npm uninstall package-name运行脚本npm run script-name显示当前项目的依赖列表npm ls查看特定依赖库的信息npm view package-name搜索依赖库npm search keyword发布包到 npm 仓库npm publish 当使用 npm install 命令时可以添加一些标志来指定依赖包的安装方式 -S或者 --save将依赖项添加到 dependencies生产环境依赖中。 示例npm install package-name -S npm install package-name --save -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 registry3、发布为公共包
使用以下命令发布为公共包
npm publish --accesspublic4、修改 npm 包
修改完包代码后可以执行以下命令将版本号自动加 1
npm version patch或者您也可以手动修改package.json文件中的版本号然后执行npm publish来发布修改后的包。
修改并发布完成。
5、删除 npm 包
要删除特定版本的包可以使用以下命令
npm unpublish 包名版本号要强制删除所有版本的包可以使用以下命令
npm unpublish 包名 --force
