Frontend Tools

Appearance

Vue 工具 ​

Vue 生态中按功能场景分类的实用工具集合。

📋 已完成的工具页面 ​

🗂️ 完整工具分类 ​

📝 表单相关 ​

  • 表单验证: VeeValidate, FormKit
  • 富文本编辑器: ✅ 已完成 - TipTap, WangEditor
  • Markdown 编辑器: v-md-editor, mavon-editor
  • 日期选择器: vue-datepicker, @vuepic/vue-datepicker
  • 颜色选择器: vue-color-kit, @vueform/slider
  • 级联选择器: vue-treeselect

📊 数据展示 ​

  • 表格: vxe-table, vue-good-table
  • 虚拟滚动: ✅ 已完成 - useVirtualList, vue-virtual-scroller
  • 图表: ✅ 已完成 - Vue ECharts
  • 时间轴: vue-timeline
  • 树形控件: vue3-treeview, element-plus tree

🎨 UI 交互 ​

  • 用户引导: ✅ 已完成 - Driver.js, Intro.js
  • 弹窗/对话框: vue-final-modal, @headlessui/vue
  • 通知提示: vue-toastification, vue-notification
  • 加载动画: vue-loading-overlay, vue-spinner
  • 进度条: nprogress, vue-progressbar
  • 骨架屏: vue-content-loader

🖼️ 媒体处理 ​

  • 图片懒加载: vue-lazyload, @vueuse/core (useIntersectionObserver)
  • 轮播图: ✅ 已完成 - Swiper, vue-awesome-swiper
  • 跑马灯: ✅ 已完成 - @selemondev/vue3-marquee
  • 图片画廊: vue-picture-swipe, photoswipe
  • 视频播放器: vue-video-player, video.js
  • 音频播放器: vue-audio-player

🗺️ 地图相关 ​

  • 地图: vue-baidu-map, @vue-leaflet/vue-leaflet
  • 高德地图: @amap/amap-jsapi-loader
  • 百度地图: vue-baidu-map

📱 移动端 ​

  • 手势: @vueuse/gesture, vue-touch
  • 下拉刷新: vue-pull-refresh
  • 无限滚动: vue-infinite-loading, @vueuse/core (useInfiniteScroll)
  • 移动端选择器: vue-picker, @vant/picker

🔐 权限与安全 ​

  • 权限控制: vue-permission, 自定义指令
  • 水印: vue-watermark, watermark-dom
  • 加密: crypto-js

📦 数据管理 ​

  • 状态管理: Pinia, Vuex
  • 数据请求: axios, @tanstack/vue-query, @vueuse/integrations
  • WebSocket: socket.io-client, @vueuse/core (useWebSocket)
  • 本地存储: @vueuse/core (useStorage), localforage

🎭 动画效果 ​

  • 过渡动画: Vue Transition, @vueuse/motion
  • 滚动动画: AOS, vue-scrollactive
  • 数字滚动: vue-count-to, vue-countup-v3
  • 粒子效果: vue-particles, tsparticles

🛠️ 工具函数 ​

  • VueUse: 200+ 组合式函数
  • lodash-es: 工具函数库
  • dayjs: 时间处理
  • nanoid: ID 生成

📄 打印与导出 ​

  • 打印: vue-print-nb, print-js
  • PDF 生成: jsPDF, pdfmake
  • Excel 导出: xlsx, exceljs
  • 截图: html2canvas, dom-to-image

🌐 国际化 ​

  • 多语言: vue-i18n
  • 货币格式化: vue-currency-input

🔍 搜索与筛选 ​

  • 搜索高亮: vue-highlight-words
  • 代码高亮: ✅ 已完成 - Shiki, Highlight.js
  • 模糊搜索: fuse.js
  • 筛选器: vue-multiselect

📐 布局相关 ​

  • 分割面板: splitpanes, vue-split-panel
  • 可调整大小: vue-resizable
  • 瀑布流: ✅ 已完成 - @yeger/vue-masonry-wall, vue-virtual-scroller
  • 拖拽排序: ✅ 已完成 - VueDraggablePlus, vue-grid-layout

🎯 特殊功能 ​

  • 签名: vue-signature-pad
  • 二维码: ✅ 已完成 - useQRCode, qrcode.vue, vue-qrcode-reader
  • 条形码: vue-barcode, jsbarcode
  • Emoji 选择器: vue-emoji-picker
  • 复制到剪贴板: @vueuse/core (useClipboard), vue-clipboard3
  • 全屏: @vueuse/core (useFullscreen)
  • 截屏: vue-screen-capture

🧪 开发调试 ​

  • Mock 数据: mockjs, faker.js
  • 性能监控: vue-devtools
  • 错误追踪: sentry

💡 贡献说明 ​

本工具集持续更新中，如果你有推荐的 Vue 工具，欢迎贡献！

每个工具页面包含：

  • 📦 工具介绍和特点
  • 💻 安装方式
  • 🎯 使用示例（TypeScript）
  • 📊 工具对比
  • ✨ 最佳实践