前端开发 (共4篇博客)

# npm常用库合集 ## 编译工具 ### webpack 官网\文档：[https://webpack.docschina.org/](https://webpack.docschina.org/) 前端最流行的编译工具之一，本身就有很多配套的工具，又可以兼容使用很多其他工具，功能齐全。 但它升级到成版本5后，默认去除了node的api，用起来有时不太方便。 安装指令： > 生态过于复杂，下面安装的只是基础最核心的。 ```sh npm install -D webpack webpack-cli ``` ### vite 官网\文档：[https://vitejs.c

# 拼音输入中文汉字的事件监听 前端开发时，很多场景需要监听input输入，当值发生变化，需要进行调用接口、对值进行校验、实时过滤内容等操作。 ### 问题 但当我们使用拼音输入法输入汉语时，可能会遇到一些问题，每次输入拼音的一个字母，都会触发input方法，但得到的内容是正在进行组合的拼音，此时得到的是无效的值，比如如下代码： ```html <input id="inputDom" /> <script> const inputDom = document.querySelector('#inputDom') inputDom.addEventListener('inpu

# js 常用功能语句 ### 复制内容到剪贴板 ```js const copyToClipboard = (text) => navigator.clipboard.writeText(text); copyToClipboard("Hello World"); ``` ### 清除所有cookie ```js const clearCookies = document.cookie.split(';').forEach(cookie => { document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expir

# Vue3使用hook 使用hook还是比较简单的，不看不知道，一看就明白。 ```ts // useSomeData.ts import { ref } from 'vue' // hook，入参可选 export const useSomeData = (initNum?: number) => { const data = ref(initNum || 0) // 声明数据 // 自增 setInterval(() => { data.value++ }, 1000); // 可选，暴露一个主动获取当前值的方法 function getDat