Vue项目中使用的首选的依赖库如VueUse等，使用场景和使用示例介绍

在2026年的Vue生态系统中（基于Vue 3 + Vite + TypeScript的主流技术栈），开发效率高度依赖于成熟的组合式函数（Composables）库和工具库。除了你提到的 VueUse，还有几个被广泛认为是"首选"或"必备"的依赖库。

以下是当前最推荐的依赖库清单，包含使用场景和代码示例：

1. @vueuse/core (VueUse)

地位 ：Vue生态的"瑞士军刀"，几乎是每个现代Vue项目的标配。
场景：

• 响应式状态管理（替代部分Pinia场景）。
• 监听浏览器事件（滚动、窗口大小、鼠标位置）。
• 处理异步请求、本地存储、深色模式切换。
• 简化生命周期钩子和组件逻辑复用。

安装：

npm install @vueuse/core

使用示例：

// 场景：监听窗口大小并自动适配布局，同时管理本地存储
import { useWindowSize, useStorage, useDark, useToggle } from '@vueuse/core'

export default {
  setup() {
    // 1. 响应式获取窗口宽高
    const { width, height } = useWindowSize()

    // 2. 持久化存储用户偏好（自动序列化/反序列化）
    const theme = useStorage('app-theme', 'light')
    
    // 3. 深色模式支持
    const isDark = useDark()
    const toggleDark = useToggle(isDark)

    return { width, height, theme, isDark, toggleDark }
  }
}

---

2. Pinia

地位 ：官方推荐的状态管理库，已完全取代Vuex。
场景：

• 全局状态共享（用户信息、购物车、全局配置）。
• 需要跨组件通信且逻辑复杂时。
• 配合DevTools进行时间旅行调试。

安装：

npm install pinia

使用示例：

// stores/user.ts
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useUserStore = defineStore('user', () => {
  const name = ref('Guest')
  const isLoggedIn = ref(false)

  const greeting = computed(() => `Hello, ${name.value}!`)

  function login(userName: string) {
    name.value = userName
    isLoggedIn.value = true
  }

  return { name, isLoggedIn, greeting, login }
})

// 组件中使用
// setup() {
//   const userStore = useUserStore()
//   userStore.login('Alice')
//   console.log(userStore.greeting) // Hello, Alice!
// }

---

3. Vue Router (v4+)

地位 ：官方路由管理器，构建单页应用（SPA）的核心。
场景：

• 页面跳转与导航守卫。
• 动态路由匹配（如 /user/:id）。
• 路由级代码分割（懒加载）。

安装：

npm install vue-router@4

使用示例：

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/dashboard',
    component: () => import('../views/Dashboard.vue'), // 懒加载
    meta: { requiresAuth: true }
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

// 全局前置守卫
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isLoggedIn()) {
    next('/login')
  } else {
    next()
  }
})

---

4. Axios (或 Fetch 封装库如 Ofetch)

地位 ：虽然原生 fetch 可用，但 Axios 依然是拦截器、取消请求和错误处理的首选。而在Nuxt或现代轻量项目中，ofetch (基于fetch的封装) 也越来越流行。
场景：

• 发送HTTP请求（GET, POST等）。
• 统一处理请求头（Token注入）和响应拦截（全局错误提示）。

安装：

npm install axios
# 或者
npm install ofetch

使用示例 (Axios)：

import axios from 'axios'

const api = axios.create({
  baseURL: '/api',
  timeout: 5000
})

// 请求拦截器：自动添加 Token
api.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) config.headers.Authorization = `Bearer ${token}`
  return config
})

// 使用
async function fetchUser(id: number) {
  try {
    const { data } = await api.get(`/users/${id}`)
    return data
  } catch (error) {
    console.error('Request failed', error)
  }
}

---

5. Headless UI 组件库 (如 Element Plus, Ant Design Vue, Naive UI)

地位 ：提供开箱即用的高质量UI组件。
选择建议：

• Element Plus: 企业级后台管理系统首选，生态最丰富。
• Naive UI: 类型支持极好（TypeScript friendly），主题定制灵活。
• Ant Design Vue: 适合大型复杂交互场景。
• Radix Vue / Headless UI: 如果你想要完全自定义样式，只想要无样式的逻辑组件。

安装 (以 Element Plus 为例)：

npm install element-plus

使用示例：

<template>
  <el-button type="primary" @click="handleClick">
    主要按钮
  </el-button>
  
  <el-table :data="tableData">
    <el-table-column prop="date" label="日期" />
    <el-table-column prop="name" label="姓名" />
  </el-table>
</template>

<script setup lang="ts">
import { ElButton, ElTable, ElTableColumn } from 'element-plus'
// ...逻辑代码
</script>

---

6. Zod (配合 VueFormulate 或手写表单验证)

地位 ：随着TypeScript的普及，运行时类型校验和表单验证库变得至关重要。Zod 是目前最流行的 Schema 声明库。
场景：

• 表单数据验证（登录、注册、复杂配置）。
• API 响应数据的安全解析和类型推断。

安装：

npm install zod

使用示例：

import { z } from 'zod'

// 定义 Schema
const UserSchema = z.object({
  username: z.string().min(3, "用户名至少3个字符"),
  email: z.string().email("无效的邮箱格式"),
  age: z.number().min(18).optional()
})

// 在提交表单时验证
function submitForm(rawData: any) {
  const result = UserSchema.safeParse(rawData)
  
  if (!result.success) {
    // 处理验证错误
    console.log(result.error.format())
    return
  }
  
  // result.data 已经是安全的类型了
  console.log('验证通过:', result.data)
}

7. Vitest + Vue Test Utils

地位 ：现代Vue项目的测试标准组合。
场景：

• 单元测试（逻辑函数、Composables）。
• 组件快照测试和交互测试。

安装：

npm install -D vitest @vue/test-utils jsdom

使用示例：

// counter.test.ts
import { describe, it, expect } from 'vitest'
import { useCounter } from './useCounter' // 假设这是一个 VueUse 风格的 composable
import { ref } from 'vue'

describe('useCounter', () => {
  it('should increment count', () => {
    // 注意：测试 Composables 通常需要在一个 setup 上下文中，或者使用简单的模拟
    // 这里简化演示逻辑测试
    let count = ref(0)
    const increment = () => count.value++
    
    increment()
    expect(count.value).toBe(1)
  })
})

总结建议

在2026年构建一个新的Vue项目，典型的 package.json 依赖部分可能长这样：

{
  "dependencies": {
    "vue": "^3.5.0",
    "vue-router": "^4.4.0",
    "pinia": "^3.0.0",
    "@vueuse/core": "^12.0.0",
    "axios": "^1.8.0",
    "element-plus": "^2.9.0", 
    "zod": "^3.24.0"
  },
  "devDependencies": {
    "vite": "^6.0.0",
    "typescript": "^5.7.0",
    "vitest": "^2.1.0",
    "@vitejs/plugin-vue": "^5.2.0"
  }
}

核心组合策略：

1. 逻辑复用 ：首选 VueUse。
2. 状态管理 ：首选 Pinia。
3. UI呈现 ：根据团队审美选 Element Plus 或 Naive UI。
4. 数据校验 ：首选 Zod。
5. 网络请求 ：Axios 或 Ofetch。

这些库共同构成了一个类型安全、高性能且易于维护的现代Vue开发体验。