ZhahaSy/vueuse-CN

vueuse chinese docs by self

基本的 Vue 组合utils 集合

🚀 特点

• 🎪 交互式文档 & demos
• 🕶 无缝切换: Vue 3 和 2 都可以 使用
• ⚡ 支持 tree shaking: 只会打包使用到的Util, utils大小 列表
• 🦾 强类型: 使用 TypeScript 编写, 以及ts注释 TS Docs
• 🔋 友好的 SSR
• 🌎 支持外链: 可通过CDN使用

• 🔩 更灵活: 可配置的事件过滤器和目标
• 🔌 可选 附件: Router, Firebase, RxJS, etc.

🦄 用法

import { useLocalStorage, useMouse, usePreferredDark } from '@vueuse/core'

export default {
  setup() {
    // 记录鼠标位置
    const { x, y } = useMouse()

    // 改变网页主题色为黑暗模式
    const isDark = usePreferredDark()

    // 响应式的 localStorage
    const store = useLocalStorage(
      'my-storage',
      {
        name: 'Apple',
        color: 'red',
      },
    )

    return { x, y, isDark, store }
  },
}

详情参考 函数列表 或 文档.

📦 安装

🎩 从v4.0开始, 使用vue-demi，使其可以同时支持vue2和vue3

npm i @vueuse/core

Add ons | Nuxt Module

从v4.0开始, VueUse 要求 vue >= v3.2 or @vue/composition-api >= v1.1

Demos

• Vite + Vue 3
• Nuxt 3 + Vue 3
• Webpack + Vue 3
• Nuxt 2 + Vue 2
• Vue CLI + Vue 2

CDN

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

会在全局暴露出来，使用 window.VueUse 获取

🪴 项目活跃度

🧱 贡献

请查收 贡献指南

🌸 鸣谢

本项目是受到以下项目的启发和参考

• streamich/react-use
• u3u/vue-hooks
• logaretm/vue-use-web
• kripod/react-hooks

同时感谢 贡献代码的所有的contributor!

👨‍🚀 Contributors

Financial Contributors on Open Collective

📄 License

MIT License © 2019-PRESENT Anthony Fu