feat:增加VueUse文档
This commit is contained in:
@@ -11,6 +11,7 @@ export const routers = [
|
|||||||
{ text: 'JavaScript知识点整理', link: '/Web/Vue/JavaScript-Guide' },
|
{ text: 'JavaScript知识点整理', link: '/Web/Vue/JavaScript-Guide' },
|
||||||
{ text: '前端包管理器', link: '/Web/Vue/Package' },
|
{ text: '前端包管理器', link: '/Web/Vue/Package' },
|
||||||
{ text: 'Vite核心原理', link: '/Web/Vue/Vite-Principle' },
|
{ text: 'Vite核心原理', link: '/Web/Vue/Vite-Principle' },
|
||||||
|
{ text: 'VueUse简介和使用', link: '/Web/Vue/VueUse' },
|
||||||
{ text: '浏览器渲染全流程解析', link: '/Web/Vue/Browser-Process' },
|
{ text: '浏览器渲染全流程解析', link: '/Web/Vue/Browser-Process' },
|
||||||
{ text: 'Element Plus 上传器', link: '/Web/Vue/ElUpload' },
|
{ text: 'Element Plus 上传器', link: '/Web/Vue/ElUpload' },
|
||||||
{ text: 'Element Plus 表格组件', link: '/Web/Vue/ElTable' },
|
{ text: 'Element Plus 表格组件', link: '/Web/Vue/ElTable' },
|
||||||
|
|||||||
38
docs/Web/Vue/VueUse.md
Normal file
38
docs/Web/Vue/VueUse.md
Normal 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>
|
||||||
|
```
|
||||||
Reference in New Issue
Block a user