lmarena -- @tanstack/vue-query GitHub 仓库推荐指南

📚 本文档整理了使用 @tanstack/vue-query 的优质 GitHub 仓库，适用于 Vite、Nuxt、Vite+Nitro 和 UniApp 等多种项目类型的学习与实践。

官方核心仓库

1. TanStack/query

GitHub: https://github.com/TanStack/query
Stars: 47,500+ ⭐
描述: TanStack Query 官方仓库，强大的异步状态管理、服务端状态工具和数据获取库
技术栈: TypeScript, Vue 3, React, Solid, Svelte
更新频率: 高频更新
推荐理由:
- 官方文档最全面
- 示例代码丰富
- 社区活跃度高
- 最佳实践参考

Nuxt 相关项目

2. Hebilicious/vue-query-nuxt

GitHub: https://github.com/Hebilicious/vue-query-nuxt
描述: 为 Nuxt 应用自动安装和配置 Vue Query 的轻量级零配置模块
特点:
- ✅ 零配置即可使用
- ✅ 自动注册 Vue Query 插件
- ✅ SSR 支持
- ✅ TypeScript 支持
适用场景: Nuxt 3 全栈项目快速集成

3. ozum/nuxt-vue-query

GitHub: https://github.com/ozum/nuxt-vue-query
描述: 添加所有 Tanstack Vue Query composables，提供 useApiGet, useApiPost 等便捷方法
特点:
- ✅ 类型安全
- ✅ Zod 验证支持
- ✅ 自动生成 Query Keys
- ✅ API 路由集成
适用场景: 需要类型安全的 Nuxt 项目

Admin 管理后台模板

4. who-jonson/sakai-nuxt

GitHub: https://github.com/who-jonson/sakai-nuxt
描述: 基于 Nuxt 3 和 PrimeVue 3 的管理后台模板
UI 框架: PrimeVue 3
特点:
- ✅ 响应式设计
- ✅ 深色模式支持
- ✅ 丰富的组件库
- ✅ 企业级 UI 设计

5. adminmart/Modernize-nuxtjs-free

GitHub: https://github.com/adminmart/Modernize-nuxtjs-free
描述: 开发者友好的响应式管理仪表板模板
技术栈: NuxtJS + VueJS + TypeScript + Vuetify
特点:
- ✅ Material Design 风格
- ✅ SEO 优化
- ✅ 可重用组件
- ✅ 清洁代码架构

6. WailanTirajoh/nuxt3-admin-template

GitHub: https://github.com/WailanTirajoh/nuxt3-admin-template
描述: Nuxt 3 管理模板，使用 Tailwind CSS
UI 框架: Tailwind CSS
特点:
- ✅ 现代化设计
- ✅ Tailwind CSS 集成
- ✅ 响应式布局
- ✅ 快速开发

7. epicmaxco/vuestic-admin

GitHub: https://github.com/epicmaxco/vuestic-admin
Stars: 10,000+ ⭐
描述: 开源、即用的管理模板套件
技术栈: Vuestic UI + Vue 3 + Vite + Pinia + Tailwind CSS
特点:
- ✅ 6 年+持续维护
- ✅ 商业级品质
- ✅ 高可访问性
- ✅ 完整的组件库

Vite 相关项目

8. randymxd07/TanStack_Vue_Query

GitHub: https://github.com/randymxd07/TanStack_Vue_Query
描述: 用于测试和学习 Tanstack Vue Query 的示例仓库
特点:
- ✅ 完整的示例代码
- ✅ 详细的配置说明
- ✅ 基础 CRUD 操作
- ✅ 错误处理示例
适用场景: Vue Query 基础学习

9. brandonroberts/vite-nitro-vue

GitHub: https://github.com/brandonroberts/vite-nitro-vue
描述: 使用 AnalogJS 的 Vite/Nitro 插件的 Vue 应用示例
技术栈: Vite + Nitro + Vue 3
特点:
- ✅ 混合架构示例
- ✅ API 路由支持
- ✅ 服务端渲染
- ✅ 文件路由
适用场景: Vite + Nitro 混合全栈项目

其他推荐项目

10. DamianOsipiuk/vue-query

GitHub: https://github.com/DamianOsipiuk/vue-query
描述: 用于在 Vue 中获取、缓存和更新异步数据的 Hooks
特点:
- ✅ Vue 2.x 支持（通过 vue-demi）
- ✅ API 与 react-query 相同
- ✅ 向后兼容
适用场景: 需要 Vue 2 兼容性的项目

11. Spring Boot + Vue 全栈项目

技术栈: Spring Boot + JPA + H2 + Vue.js + TanStack Vue Query
描述: 前后端分离的 Todo 应用示例
特点:
- ✅ RESTful API
- ✅ JWT 认证
- ✅ 数据持久化
适用场景: Java 后端的全栈项目

12. Django + Vue 博客系统

技术栈: Django + Django REST Framework + Vue 3 + Quasar + TanStack Vue Query
描述: 功能完整的博客系统
特点:
- ✅ 内容管理
- ✅ 用户认证
- ✅ 评论系统
- ✅ SEO 优化
适用场景: 内容管理系统

快速开始指南

基础安装

bash

# 使用 npm
npm install @tanstack/vue-query

# 使用 yarn
yarn add @tanstack/vue-query

# 使用 pnpm
pnpm add @tanstack/vue-query

Vue 3 项目配置

typescript

// main.ts
import { createApp } from "vue";
import { VueQueryPlugin } from "@tanstack/vue-query";
import App from "./App.vue";

const app = createApp(App);

app.use(VueQueryPlugin, {
	queryClientConfig: {
		defaultOptions: {
			queries: {
				staleTime: 1000 * 60 * 5, // 5 minutes
				cacheTime: 1000 * 60 * 10, // 10 minutes
			},
		},
	},
});

app.mount("#app");

Nuxt 3 项目配置

typescript

// nuxt.config.ts
export default defineNuxtConfig({
	modules: ["@hebilicious/vue-query-nuxt"],
	vueQuery: {
		stateKey: "vue-query-nuxt",
		autoImports: ["useQuery", "useMutation", "useQueryClient"],
		queryClientOptions: {
			defaultOptions: {
				queries: {
					staleTime: 5 * 60 * 1000,
				},
			},
		},
	},
});

基础使用示例

vue

<template>
	<div>
		<div v-if="isLoading">Loading...</div>
		<div v-else-if="error">Error: {{ error.message }}</div>
		<ul v-else>
			<li v-for="todo in data" :key="todo.id">
				{{ todo.title }}
			</li>
		</ul>
	</div>
</template>

<script setup lang="ts">
import { useQuery } from "@tanstack/vue-query";

interface Todo {
	id: number;
	title: string;
	completed: boolean;
}

const fetchTodos = async (): Promise<Todo[]> => {
	const response = await fetch("/api/todos");
	if (!response.ok) {
		throw new Error("Network response was not ok");
	}
	return response.json();
};

const { data, isLoading, error } = useQuery({
	queryKey: ["todos"],
	queryFn: fetchTodos,
	staleTime: 1000 * 60 * 5, // 5 minutes
});
</script>

Mutation 示例

typescript

import { useMutation, useQueryClient } from "@tanstack/vue-query";

const queryClient = useQueryClient();

const createTodoMutation = useMutation({
	mutationFn: async (newTodo: { title: string }) => {
		const response = await fetch("/api/todos", {
			method: "POST",
			headers: { "Content-Type": "application/json" },
			body: JSON.stringify(newTodo),
		});
		return response.json();
	},
	onSuccess: () => {
		queryClient.invalidateQueries({ queryKey: ["todos"] });
	},
});

// 使用
const handleCreateTodo = () => {
	createTodoMutation.mutate({ title: "New Todo" });
};

学习路径建议

📚 入门阶段（1-2 周）

阅读官方文档
- 访问 TanStack/query 官方仓库
- 理解核心概念：Query、Mutation、Query Client
- 学习缓存策略和失效机制
运行基础示例
- Clone randymxd07/TanStack_Vue_Query
- 理解基础配置和使用方法
- 练习简单的数据获取和更新

🚀 进阶阶段（2-3 周）

集成到实际项目
- Vite 项目: 参考仓库 8 的配置
- Nuxt 项目: 使用 vue-query-nuxt 模块
- 管理后台: 基于 vuestic-admin 构建
学习高级特性
- 乐观更新（Optimistic Updates）
- 无限查询（Infinite Queries）
- 并行查询和依赖查询
- 离线支持和同步

🎯 实战阶段（3-4 周）

构建完整应用
- 选择一个管理后台模板（仓库 4-7）
- 集成 Vue Query 进行状态管理
- 实现完整的 CRUD 功能
- 添加错误处理和加载状态
性能优化
- 配置合理的缓存策略
- 实现预获取（Prefetching）
- 优化查询键（Query Keys）设计
- 减少不必要的重新获取

项目类型匹配表

项目类型	推荐仓库	优先级
Vite 前端项目	1, 8	⭐⭐⭐⭐⭐
Nuxt 全栈项目	2, 3, 4, 5, 6	⭐⭐⭐⭐⭐
Vite + Nitro 混合项目	9	⭐⭐⭐⭐
Admin 管理后台	4, 5, 6, 7	⭐⭐⭐⭐⭐
UniApp 移动端	10 (Vue 2 兼容)	⭐⭐⭐

技术栈组合推荐

🎨 UI 框架选择

UI 框架	推荐仓库	特点
Tailwind CSS	6, 7	原子化 CSS，高度自定义
PrimeVue	4	企业级组件库，功能丰富
Vuetify	5	Material Design，生态完善
Vuestic UI	7	现代化设计，轻量级
Quasar	12	跨平台支持，组件丰富

🛠️ 状态管理方案

方案	适用场景	配合使用
Vue Query + Pinia	大型应用	服务端状态 + 客户端状态分离
Vue Query 独立	中小型应用	主要处理服务端状态
Vue Query + Vuex	传统项目	渐进式迁移

常见问题解答

Q1: Vue Query vs Pinia？

A: Vue Query 专注于服务端状态管理（异步数据），Pinia 专注于客户端状态管理。两者可以配合使用。

Q2: 是否支持 SSR？

A: 是的，Vue Query 完全支持 SSR，特别是在 Nuxt 3 中配合 vue-query-nuxt 使用。

Q3: 如何处理认证？

A: 可以在 queryClient 的默认配置中设置全局的请求拦截器，或在每个查询中单独处理。

Q4: 缓存策略如何配置？

A: 通过 staleTime、cacheTime、refetchInterval 等参数控制缓存行为。

资源链接

📖 官方资源

🎥 视频教程

💬 社区支持

更新日志

2024-12-11: 初始版本，整理 12 个优质仓库
最后更新: 2024-12-11

贡献指南

如果你发现了其他优质的使用 @tanstack/vue-query 的项目，欢迎提交 PR 或 Issue。

许可证

本文档采用 MIT 许可证。仓库推荐仅供学习参考，具体使用请遵循各项目的许可证要求。

📝 文档生成时间: 2024-12-11

💡 提示: 建议收藏本文档，定期查看更新

贡献者

ruan-cat

页面历史

最后编辑于 2 天前

查看完整历史

编写提示词来调研 antfu 仓库的发包发版方案

PyTorch

SlowFast

yolov5

drill 钻头

lmarena -- @tanstack/vue-query GitHub 仓库推荐指南 ​

目录 ​

官方核心仓库 ​

1. TanStack/query ​

Nuxt 相关项目 ​

2. Hebilicious/vue-query-nuxt ​

3. ozum/nuxt-vue-query ​

Admin 管理后台模板 ​

4. who-jonson/sakai-nuxt ​

5. adminmart/Modernize-nuxtjs-free ​

6. WailanTirajoh/nuxt3-admin-template ​

7. epicmaxco/vuestic-admin ​

Vite 相关项目 ​

8. randymxd07/TanStack_Vue_Query ​

9. brandonroberts/vite-nitro-vue ​

其他推荐项目 ​

10. DamianOsipiuk/vue-query ​

11. Spring Boot + Vue 全栈项目 ​

12. Django + Vue 博客系统 ​

快速开始指南 ​

基础安装 ​

Vue 3 项目配置 ​

Nuxt 3 项目配置 ​

基础使用示例 ​

Mutation 示例 ​

学习路径建议 ​

📚 入门阶段（1-2 周） ​

🚀 进阶阶段（2-3 周） ​

🎯 实战阶段（3-4 周） ​

项目类型匹配表 ​

技术栈组合推荐 ​

🎨 UI 框架选择 ​

🛠️ 状态管理方案 ​

常见问题解答 ​

Q1: Vue Query vs Pinia？ ​

Q2: 是否支持 SSR？ ​

lmarena -- @tanstack/vue-query GitHub 仓库推荐指南

目录

官方核心仓库

1. TanStack/query

Nuxt 相关项目

2. Hebilicious/vue-query-nuxt

3. ozum/nuxt-vue-query

Admin 管理后台模板

4. who-jonson/sakai-nuxt

5. adminmart/Modernize-nuxtjs-free

6. WailanTirajoh/nuxt3-admin-template

7. epicmaxco/vuestic-admin

Vite 相关项目

8. randymxd07/TanStack_Vue_Query

9. brandonroberts/vite-nitro-vue

其他推荐项目

10. DamianOsipiuk/vue-query

11. Spring Boot + Vue 全栈项目

12. Django + Vue 博客系统

快速开始指南

基础安装

Vue 3 项目配置

Nuxt 3 项目配置

基础使用示例

Mutation 示例

学习路径建议

📚 入门阶段（1-2 周）

🚀 进阶阶段（2-3 周）

🎯 实战阶段（3-4 周）

项目类型匹配表

技术栈组合推荐

🎨 UI 框架选择

🛠️ 状态管理方案

常见问题解答

Q1: Vue Query vs Pinia？

Q2: 是否支持 SSR？