VueUse 是一个集成了常用的 Vue Composition API 的函数库，它提供了一系列的 hooks 和工具函数，帮助我们更方便地使用 Vue Composition API。在本文中，我将为你介绍如何安装和使用 VueUse。

安装

首先，你需要打开一个终端窗口（比如命令行提示符或者终端程序）。然后，进入到你项目的根目录中。

接下来，通过 npm 或者 yarn 来安装 VueUse。你可以选择一个你习惯的包管理器，下面是使用 npm 的示例：

npm install @vueuse/core

或者使用 yarn 的示例：

yarn add @vueuse/core

安装完成后，你可以在你的项目中引入 VueUse 的函数或者 hooks 来使用它们。

使用

下面是一个使用 VueUse 的简单示例：

• useToggle - 用于切换布尔值状态的组合式函数。

<template><div><button @click="toggle">Toggle</button><p>{{ isToggled }}</p></div>
</template><script>
import { useToggle } from '@vueuse/core';export default {setup() {const { isToggled, toggle } = useToggle(false);return {isToggled,toggle,};},
};
</script>

• useLocalStorage - 用于在本地存储中保存和获取数据的组合式函数。

<template><div><input v-model="name" placeholder="Enter your name" /><button @click="saveName">Save</button><p>Your name: {{ savedName }}</p></div>
</template><script>
import { useLocalStorage } from '@vueuse/core';export default {setup() {const { value: savedName, save } = useLocalStorage('name');let name = '';const saveName = () => {save(name);};return {name,savedName,saveName,};},
};
</script>

• useMouse - 获取鼠标当前位置的组合式函数。

<template><div><p>X: {{ mouse.x }}, Y: {{ mouse.y }}</p></div>
</template><script>
import { useMouse } from '@vueuse/core';export default {setup() {const mouse = useMouse();return {mouse,};},
};
</script>

这些只是VueUse提供的一小部分组合式API的示例。你可以通过查看VueUse文档了解更多可用的组合式函数并在你的项目中使用它们。希望这篇文章能帮助你入门 VueUse，开始使用 Vue Composition API 来构建更强大的 Vue 应用程序！