feat:增加VueUse文档
This commit is contained in:
@@ -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
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