Vue 3 项目初始化怎么配置 VueUse 组合式工具库-Vue.js-PHP中文网

vueuse需按需引入核心包@vueuse/core，配合unplugin-auto-import实现自动导入与ts类型支持，禁用全局注册，确保tree-shaking有效且类型完备。

vue 3 项目初始化怎么配置 vueuse 组合式工具库

VueUse 是 Vue 3 生态中不可或缺的组合式工具库，它把大量常见逻辑（如响应式 DOM 操作、异步状态管理、搜索、可见性判断等）封装成开箱即用的 useXxx 函数。初始化项目时集成 VueUse，关键不是“装上就行”，而是要按需引入、避免冗余、适配 TypeScript 和构建工具链。

安装核心包与按需集成

VueUse 分为两个主要包：@vueuse/core（基础工具）和 @vueuse/integrations（第三方库封装，如 axios、fuse.js）。不要一次性全量安装：

先装核心： npm install @vueuse/core
只在需要时再装集成包，例如用模糊搜索才加：npm install @vueuse/integrations fuse.js@^7（注意 fuse.js 是 peer dependency，必须显式安装）
若用 useAxios，还需额外安装：npm install axios@^1

TS 类型支持与自动导入（推荐 Volar + unplugin-auto-import）

VueUse 的类型定义已内建，但为了让 useXxx 函数在 .vue 文件中无需手动 import 就能获得类型提示和自动补全，建议搭配自动化方案：

安装插件：npm install -D unplugin-auto-import
在 vite.config.ts 中配置（Vite 项目）：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue', '@vueuse/core'],
      dts: './src/auto-imports.d.ts', // 生成类型声明文件
    }),
  ],
})

配置后重启 VS Code（确保已启用 Volar），useRef、useAsyncState、useElementVisibility 等函数将自动可用且带完整类型。