你的 工具箱
開箱即可用的 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 命令：
- 初始化一個新的 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 registry
3、發布為公共包
使用以下命令發布為公共包：
npm publish --access=public
4、修改 npm 包
修改完包代碼后，可以執行以下命令將版本號自動加 1：
npm version patch
或者您也可以手動修改package.json文件中的版本號，然后執行npm publish來發布修改后的包。
修改并發布完成。
5、刪除 npm 包
要刪除特定版本的包，可以使用以下命令：
npm unpublish 包名@版本號
要強制刪除所有版本的包，可以使用以下命令：
npm unpublish 包名 --force
)
