feat:增加VueUse文档

This commit is contained in:
2026-06-05 17:36:30 +08:00
parent a64f20e84f
commit b3c0452621
2 changed files with 39 additions and 0 deletions

View File

@@ -11,6 +11,7 @@ export const routers = [
{ text: 'JavaScript知识点整理', link: '/Web/Vue/JavaScript-Guide' },
{ text: '前端包管理器', link: '/Web/Vue/Package' },
{ text: 'Vite核心原理', link: '/Web/Vue/Vite-Principle' },
{ text: 'VueUse简介和使用', link: '/Web/Vue/VueUse' },
{ text: '浏览器渲染全流程解析', link: '/Web/Vue/Browser-Process' },
{ text: 'Element Plus 上传器', link: '/Web/Vue/ElUpload' },
{ text: 'Element Plus 表格组件', link: '/Web/Vue/ElTable' },

38
docs/Web/Vue/VueUse.md Normal file
View File

@@ -0,0 +1,38 @@
---
title: VueUse简介和使用
date: 2026-06-05
---
# 一、安装
```bash
npm install @vueuse/core
```
# 二、使用
## 2.1 useWebSocket
```ts
<script setup lang="ts">
iconst { status, send } = useWebSocket('wss://example.com/ws', {
// 连接成功
onConnected(ws) {
console.log('WS connected')
},
// 收到消息
onMessage(ws, event) {
const msg = JSON.parse(event.data)
console.log('receive:', msg)
},
// 断开
onDisconnected(ws, event) {
console.log('WS disconnected, code:', event.code)
},
onError(ws, event) {
console.error('WS error', event)
},
autoReconnect: {
retries: 3,
delay: 1000
}
})
</script>
```