前端手册
约 2550 字大约 9 分钟
2025-09-14
工具
提示
在《论语》中所说: “工欲善其事，必先利其器 。”
Node.js
Node.js® 是一个免费、开源、跨平台的 JavaScript 运行时环境，它让开发人员能够创建服务器、 Web 应用、命令行工具和脚本。
Node.js - 官网
Nodejs.cn 旗下中文网
Node.js - 教程
git
git是目前世界上最先进的分布式版本控制系统。
git - 官网
git - 教程 ==> git - 教程 - 简明指南
NPM
软件包管理工具
代码编辑器
VS Code
HBuilder X
微信开发工具
支付宝开发工具
代码托管Git
Github - 官网
Gitee - 官网
GitCode - 官网
Coding - 官网
GitLab- 官网
浏览器
Chrome - 官网
Firefox - 官网
Edge - 官网
Markdown Xmind
Markdown 是一种轻量级标记语言，便于人们使用易读易写的纯文本格式编写文档并添加格式元素。
从灵感乍现到复杂项目，Xmind 都能理解并适配你独特的思维风格。头脑风暴、学习备考、攻略计划、创意策划、整理思路
BootCDN
BootCDN - 稳定、快速、免费的前端开源项目 CDN 加速服务
PixPin 截图
截图/贴图/长截图/文字识别/标注 功能强大使用简单的截图/贴图工具，帮助你提高效率
Ctrl + 1 截图
Ctrl + 2 贴图（剪贴板内的图片或文字） 即先截图在贴图
右击托盘PixPin图标 点击配置
Vite
下一代前端开发与构建工具
Vite -官网
Vite -官网
Vite -官网
Vite -官网 新
Axios
Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js
Apache ECharts
Apache ECharts 一个基于 JavaScript 的开源可视化图表库
Easy Mock
Easy Mock 伪造数据，我们更高效
TDesign
TDesign 是腾讯开源的企业级设计体系, 提供了统一价值观, 一致的设计语言和视觉风格, 和开箱即用的 UI 组件库。
地图
高德地图
百度地图
百度智能云
数据加密
js-sha256
js-sha256 对数据传输进行加密
国密算法SM2、SM3、SM4
渐变色
一个集合180种免费的线性渐变网站，可在任何网站使用。您不仅可以复制渐变的原生CSS颜色代码，还可以查看下载每个优质的渐变图片。
Lodash
Lodash - 是一个一致性、模块化、高性能的 JavaScript 实用工具库。
Lodash - 官网
Lodash - JavaScript 工具库
wangEditor 5
开源 Web 富文本编辑器，开箱即用，配置简单
vue-office
更易用的文件预览; 支持docx、xlsx、pdf文件预览
Animate.css
animate.css 包含了一组炫酷、有趣、跨浏览器的动画，可以在你的项目中直接使用。
AnimXYZ
AnimXYZ The first composable CSS animation toolkit
qrcode 二维码
qrcode 二维码 / 2d 条形码生成器。
qrcode.vue 一款 Vue.js 二维码组件
qrcode.vue github
qrcode.vue gitee
qs 处理 url 地址
是 npm 包中管理的一个模块，是一个增加了安全性解析和序列化字符串的库，主要用来处理 url 地址的
SortableJS 拖拽库
功能强大的 JavaScript 拖拽库
SortableJS - 拖拽库
SortableJS 中文文档 - 拖拽库
vuedraggable 拖拽组件
Vue.Draggable 是一款基于 Sortable.js 实现的 Vue2 拖拽插件
vue.draggable.next 是一款 Vue3 的拖拽插件,是 vue.draggable 升级版本，同样是基于 Sortable.js 实现的
vuedraggable - Vue2
vue.draggable.next - Vue3
VueDraggablePlus - 官网
clipboard.js 粘贴复制
Vclipboard.js 是一款使用简单的粘贴复制插件,它不依赖于 Flash 或其他框架
clipboard.js - 官网
clipboard.js - 中文文档
在 Vue2 中使用 clipboard.js 复制功能
Vue3 可以通过 useClipboard 简单的实现复制粘贴功能。
VueUse 基于 Vue 组合式 API 的实用工具集
PrintJS Web 打印
一个微小的 JavaScript 库，用于帮助从 Web 打印。
Moment.js
Moment.js 解析、校验、操作、显示日期和时间的 JavaScript 工具库。
nprogress 进度条
路由跳转时 展示的进度条
nprogress - 进度条
nprogress - 进度条 - 教程
全屏 useFullscreen
使用 VueUse 基于Vue组合式API的实用工具集
WebSocket
支持及时、双向与基于事件的交流。它可以在每个平台、每个浏览器和每个设备上工作，可靠性和速度同样稳定。
WebSocket - 官网
WebSocket - 教程
Socket.IO - 通信
WebSocket.js
图标
iconfont 阿里矢量图标库
iconfont-阿里巴巴矢量图标库
iconpark 飞书矢量图标库
iconpark -飞书矢量图标库
yesicon 图标库
二维码生成器
emoji 符号大全
常用 Emoji 表情符号,可直接复制使用
emoji - 直接复制
emoji - 直接复制
emoji - 直接复制
emoji - 直接复制
经常使用
⭐️ ✅ ❗ ❌ 💬 📚 🎯 🔥 ✨ 📖 👀 👨👨👦👦 🤪
优波设计
优波设计 -设计师必备网址 主要功能有: 屏幕尺寸、IOS 规范、Android 规范、Web 标准、切图命名 ...
封面制作
使用Canva可画，轻松创建并分享专业设计。
Pixabay 图片素材库
免费正版高清图片素材库 超过4.1百万张优质图片和视频素材可供免费使用和下载 - Pixabay - Pixabay
JSON
里面有丰富的工具类(网络工具、图片工具、文本工具、常用工具、JSON工具、编码加密)
压缩工具
图片压缩
docsmall - 免费在线图片压缩、GIF 压缩工具、PDF 压缩工具、PDF 合并工具、PDF 分割工具
docsmall - 免费在线压缩工具
tingpng - 免费在线压缩工具
squoosh - 免费在线压缩工具
代码压缩工具
在线压缩 HTML、CSS、JavaScript
CSS颜色转换
281个在线工具软件
图片转Base64 在线Base64转图片 字符串转Base64 文件转Base64 人民币数字转大写 CSS颜色转换 在线手写签名 手机号码归属地查询
桌面端软件
Electron
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。
Electron-Egg
Electron-Egg 一个入门简单、跨平台、企业级桌面软件开发框架 支持Windows、MacOS、Linux操作系统；并提供demo，方便开发者快速入门。
Wails v3
使用 Go 构建桌面应用, 使用 Go 和现代 Web 技术构建美观、高性能的桌面应用。一套代码。三个平台。无需浏览器。
阿里云盘
支持 客户端(Android、IOS、IPad)、微信小程序、网页版、桌面端 (PC/Mac)
Vue Flow 流程图
可定制的 Vue3 组件为流程图和图表带来交互性
印记中文
主要记录前端的工具汇总, eg: 编译构建, 前端框架, 代码检查, React, React组件库, 可视化工具, Vue...
DataV 大屏
大屏数据展示组件库(Vue2 Vue3 React)
DataV - Vue2
DataV - Vue3
DataV - React
由于上面的 Vue3 版本, 只有边框和装饰 两个功能, 下面的地址完美解决
边框 装饰 其他(轮播图、胶囊图...)
动态数字
CountUp.js - 官网
react-countup
vue-countup-v3
Capacitor
Capacitor 是由 Ionic 团队开发维护的开源跨平台应用容器，允许开发者使用 Web 技术（HTML、CSS、JavaScript）构建运行在 iOS、Android 和 Web 平台的原生应用。
ionic
Ionic 是一个开源 UI 工具包，用于使用 Web 技术（HTML、CSS 和 JavaScript）构建性能卓越、高质量的移动应用程序，并集成了 Angular、React 和 Vue 等热门框架。
VuePress
Vue 驱动的静态网站生成器