Vue常用工具库

vueUse

VueUse 是一个基于 Vue 3 Composition API 的高质量 Hooks 库，它提供了许多简单好用的 Hooks，可以帮助开发者快速实现各种功能。VueUse 的 Hooks 覆盖了数据请求、状态管理、视图操作、性能优化等多个方面，使得开发者可以更加专注于业务逻辑的实现。

js 复制代码

// 安装
npm install vueuse# 或yarn add vueuse

// 使用
import { createApp } from 'vue'
import App from './App.vue'
import { createVueUse } from 'vueuse'
const app = createApp(App)
const vueUse = createVueUse(app)
app.use(vueUse)

// 常用 Hooks
// useDebounce 和 useThrottle  防抖和节流
// useRequest  数据请求
// useTitle 浏览器标题设置
// useCounter  简单计数器
// useToggle 布尔值切换
// useFullscreen 全屏
// useInterval 和 useTimeout 定时器和延时器
// useLocalStorage 本地存储
// ...

vuedraggable

vuedraggable是基于Sortable.js的Vue拖拽组件，支持列表排序、跨列表拖曳和双向数据绑定，适用于Vue 2/3

js 复制代码

// vue3 安装4.0以上
// npm install vuedraggable

<!-- 跨列表拖拽示例 -->
<div>表1</div>
<draggable :list="list1" item-key="id" tag="div" group="content">
  <template #item="{ element }">
    <div :id="element.id">{{ element.name }}</div>
  </template>
</draggable>
<div>表2</div>
<draggable :list="list2" item-key="id" tag="div" group="content">
  <template #item="{ element }">
    <div>{{ element.name }}</div>
  </template>
</draggable>

vue-drag-resize

vue-drag-resize 是一个用于 Vue.js 的拖拽和缩放组件，允许元素在页面上实现自由拖拽、缩放操作，并支持触摸设备。它通过封装鼠标和触摸事件，提供声明式 API，简化了复杂交互的开发。‌

js 复制代码

// 安装 
// npm install vue-drag-resize

<template>
  <vue-drag-resize :is-active="true" :w="300" :h="200" @resizing="handleResize">
    <div>当前尺寸: {{ width }}× {{ height }}</div>
  </vue-drag-resize>
</template>

<script>
	const width = ref()
	const height = ref()
	function handleResize(newRect) {
	    width.value = newRect.width;
	    height.value = newRect.height;
	}
</script>

vue-chartjs

Chart.js 是一个轻量级、开源的 JavaScript 图表库，特别适合在网页中快速实现数据可视化。它基于 HTML5 Canvas，支持多种图表类型，并且响应式设计，能自动适应不同屏幕尺寸;

对比echarts：

1、如果项目需求简单，追求轻量、快速上手，且不需要复杂图表类型，Chart.js 是更好的选择

2、如果项目需求复杂，需要处理大量数据，实现地图、热力图等高级图表，且对性能有较高要求，ECharts 是更合适的选择

js 复制代码

// 安装
// npm i vue-chartjs chart.js

// 组件
// Bar
// HorizontalBar
// Doughnut
// Line
// Pie
// PolarArea
// Radar
// Bubble
// Scatter
// mixins
// generateChert

vue3-lazyload

vue3-lazyload 是一个专为 Vue 3 设计的图片懒加载库，优化页面初始加载性能

js 复制代码

// 安装 npm install vue3-lazyload

import { createApp } from 'vue'
import App from './App.vue'
// 1. 引入 vue3-lazyload
import Vue3Lazyload from 'vue3-lazyload'

const app = createApp(App)

// 2. 作为插件使用，进行全局注册
app.use(Vue3Lazyload, {
  // 这里是可选的全局配置项
  loading: '/path/to/loading-spinner.gif', // 图片加载中时显示的占位图
  error: '/path/to/error-image.png',       // 图片加载失败时显示的图片
  // 其他配置...
})

// 3. 组件使用
<template>
  <div>
    <!-- 基本用法：将图片地址绑定给 v-lazy 指令 -->
    <img v-lazy="'https://example.com/my-image.jpg'" alt="描述文字">

    <!-- 更常见的用法：绑定一个响应式变量 -->
    <img v-lazy="imageUrl" alt="描述文字">

    <!-- 在 v-for 循环列表中使用 -->
    <div v-for="item in list" :key="item.id">
      <img v-lazy="item.imgUrl" alt="列表图片">
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const imageUrl = ref('https://example.com/another-image.jpg');
const list = ref([
  { id: 1, imgUrl: 'https://example.com/pic1.jpg' },
  { id: 2, imgUrl: 'https://example.com/pic2.jpg' },
  // ...
]);
</script>

Socket.IO

Socket.IO 是用于在客户端（通常是浏览器）和服务器之间实现低延迟、双向和基于事件的实时通信的库

它的核心是建立在 WebSocket 协议之上，但在连接不可用时能自动降级为其他技术（如长轮询），并提供连接状态管理、自动重连、房间/命名空间等高级功能，常用于聊天应用、实时通知、协同编辑、在线游戏等场景

js 复制代码

// node.js 安装 npm install socket.io
// 浏览器端 安装 npm install socket.io-client

// server.js
const { createServer } = require('http');
const { Server } = require('socket.io'); // 引入 Server 类

// 1. 创建一个基础的 HTTP 服务器（Socket.IO 需要）
const httpServer = createServer();

// 2. 创建 Socket.IO 服务器实例，并附加到 HTTP 服务器上
//    同时配置 CORS，允许来自前端地址的连接（生产环境需严格限制）
const io = new Server(httpServer, {
  cors: {
    origin: "http://localhost:5173", // 你的前端开发服务器地址，例如 Vite
    methods: ["GET", "POST"]
  }
});

// 3. 监听客户端连接事件
io.on('connection', (socket) => {
  console.log(`用户 ${socket.id} 已连接`);

  // 3.1 监听客户端通过 'chat message' 事件发来的消息
  socket.on('chat message', (msg) => {
    console.log(`收到来自 ${socket.id} 的消息: ${msg}`);
    
    // 3.2 将消息广播给所有已连接的客户端（包括发送者自己）
    io.emit('chat message', { id: socket.id, message: msg });
  });

  // 4. 监听客户端断开连接事件
  socket.on('disconnect', () => {
    console.log(`用户 ${socket.id} 已断开连接`);
  });
});

// 5. 启动服务器，监听 3000 端口
httpServer.listen(3000, () => {
  console.log('Socket.IO 服务器运行在 http://localhost:3000');
});

// app.vue 客户端
<template>
  <div>
    <h2>简易聊天室</h2>
    <ul id="messages">
      <li v-for="(msg, index) in messageList" :key="index">
        [用户 {{ msg.id }}]: {{ msg.message }}
      </li>
    </ul>
    <form @submit.prevent="sendMessage">
      <input v-model="inputMessage" autocomplete="off" />
      <button type="submit">发送</button>
    </form>
    <p>连接状态: {{ connected ? '已连接' : '未连接' }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { io } from 'socket.io-client'; // 引入客户端

// 1. 创建并连接到服务器。地址是你的 Socket.IO 服务器地址。
const socket = io('http://localhost:3000');
const inputMessage = ref('');
const messageList = ref([]);
const connected = ref(false);

// 2. 监听连接成功事件
socket.on('connect', () => {
  console.log(`已连接，你的 ID 是：${socket.id}`);
  connected.value = true;
});

// 3. 监听服务器广播的 'chat message' 事件
socket.on('chat message', (data) => {
  messageList.value.push(data); // 将新消息添加到列表中
});

// 4. 发送消息的方法
const sendMessage = () => {
  if (inputMessage.value.trim()) {
    // 向服务器发射 'chat message' 事件
    socket.emit('chat message', inputMessage.value);
    inputMessage.value = ''; // 清空输入框
  }
};

// 5. 监听连接断开事件
socket.on('disconnect', () => {
  console.log('已断开连接');
  connected.value = false;
});

// 6. 组件卸载时，手动断开 Socket 连接
onUnmounted(() => {
  if (socket) {
    socket.disconnect();
  }
});
</script>