Skip to content

开始使用

¥Get Started

通过视频学习 Vue 使用

VueUse 是基于 组合式 API 的实用函数集合。在继续之前,我们假设你已经熟悉 组合式 API 的基本思想。

¥VueUse is a collection of utility functions based on Composition API. We assume you are already familiar with the basic ideas of Composition API before you continue.

安装

¥Installation

🎩 从 v4.0 开始,它通过 vue-demi 的驱动在单个包中适用于 Vue 2 和 3!

¥🎩 From v4.0, it works for Vue 2 & 3 within a single package by the power of vue-demi!

bash
npm i @vueuse/core

插件 | Nuxt 模块

¥Add ons | Nuxt Module

从 v6.0 开始,VueUse 需要 vue >= v3.2 或 @vue/composition-api >= v1.1

¥From v6.0, VueUse requires vue >= v3.2 or @vue/composition-api >= v1.1

演示

¥Demos

CDN

vue
<script src="https://unpkg.com/@vueuse/shared"></script>

<script src="https://unpkg.com/@vueuse/core"></script>

它将作为 window.VueUse 暴露于全局

¥It will be exposed to global as window.VueUse

Nuxt

从 v7.2.0 开始,我们提供了 Nuxt 模块来启用 Nuxt 3 和 Nuxt Bridge 的自动导入。

¥From v7.2.0, we shipped a Nuxt module to enable auto importing for Nuxt 3 and Nuxt Bridge.

bash
npm i -D @vueuse/nuxt @vueuse/core

Nuxt 3

ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@vueuse/nuxt',
  ],
})

Nuxt 2

ts
// nuxt.config.js
export default {
  buildModules: [
    '@vueuse/nuxt',
  ],
}

然后在 Nuxt 应用中的任何位置使用 VueUse 函数。例如:

¥And then use VueUse function anywhere in your Nuxt app. For example:

vue
<script setup lang="ts">
const { 
x
,
y
} =
useMouse
()
</script> <template> <
div
>pos: {{
x
}}, {{
y
}}</
div
>
</template>

使用示例

¥Usage Example

只需从 @vueuse/core 导入你需要的函数

¥Simply importing the functions you need from @vueuse/core

vue
<script setup>
import { 
useLocalStorage
,
useMouse
,
usePreferredDark
} from '@vueuse/core'
// tracks mouse position const {
x
,
y
} =
useMouse
()
// is user prefers dark theme const
isDark
=
usePreferredDark
()
// persist state in localStorage const
store
=
useLocalStorage
(
'my-storage', {
name
: 'Apple',
color
: 'red',
}, ) </script>

详细信息请参阅 函数列表

¥Refer to functions list for more details.

VueUse 中文网 - 粤ICP备13048890号