阮喵喵笔记

Appearance

2025-12-13
2238
9m

github-copilot -- @tanstack/vue-query — 推荐仓库清单与学习指南 ​

生成者: GitHub Copilot (为 ruan-cat 搜集)
生成日期: 2025-12-11

说明（重要）

  • 我已在 GitHub 代码中检索并汇总了使用或与 @tanstack/vue-query 强相关的开源仓库，优先关注 Vite、Nuxt、Vite+Nitro、以及管理后台 / 模板类项目，目标数量控制在 9–15 个之间。
  • 搜索结果可能不完整（GitHub 代码搜索有返回限制）。如需更完整的结果或按星数/更新排序的精确元数据（stars、last commit 时间等），我可以继续为你补抓这些信息。
  • 你可以在 GitHub 上查看更多搜索结果（代码搜索）：https://github.com/search?q=%40tanstack%2Fvue-query&type=code

目录

  • 概览与学习建议
  • 仓库清单（共 10 个，按可读性与相关性整理）
  • 快速上手练习（实操路线）
  • 后续可选操作

概览与学习建议（短） ​

  • 学习顺序建议：
    1. 先在最小 Vite 项目中安装并初始化 VueQueryPlugin（学习 plugin 注入、QueryClient、默认配置）。
    2. 在一个简单管理后台页面上实现一个列表（useQuery）和创建/编辑（useMutation + invalidateQueries），模拟实际 CRUD 场景。
    3. 若使用 Nuxt/SSR，学习如何在服务端预取数据（serverPrefetch/nuxt plugin）并复用 QueryClient（参考 Nuxt 专用示例）。
    4. 对接 OpenAPI 或 tRPC 时，可优先看生成器示例，学习自动生成的 query/mutation 使用模板。

推荐仓库清单（9–15 个范围内，本次收集到 10 个） ​

下面每个条目包含：仓库链接、简短说明、为何值得看、适合项目类型、实用查阅路径（如果有源码文件定位则给出直接文件链接）。

  1. DamianOsipiuk/vue-query (历史/迁移说明)
  1. sunhaoxiang/pure-admin-vue（管理后台模板）
  1. fungiblesxyz/generator-app（示例：Vite + VueQuery 简单初始化）
  1. godgodwinter/psikotest-fe-admin（轻量管理后台示例）
  1. Holi0317/trpc-vue-query（tRPC + Vue Query 集成示例）
  1. hirotaka/openapi-typescript-vue（OpenAPI -> Vue 客户端生成 + vue-query 集成）
  1. Shaddix/react-query-swagger（Swagger/OpenAPI 客户端生成器，包含 Vue 转换片段）
  1. xcpcio/xcpcio（大型 monorepo，前端使用了 @tanstack/vue-query）
  1. vueuse/vue-demi（兼容层，README 引用 @tanstack/vue-query）
  1. frasza/docker-ci-failing（Nuxt / 全局类型注入示例）

每个仓库的快速查阅建议（如何快速获取重点代码） ​

  • 查看项目根 README.md、docs 和 examples 目录，快速了解作者如何建议安装与配置。
  • 查找 main.ts / main.js / plugin / nuxt.plugin.js 等文件，查看 QueryClient 或 VueQueryPlugin 的注入位置（上述仓库中给出了一些直接文件链接）。
  • 在组件中搜索 useQuery / useMutation / useInfiniteQuery / QueryClient（或查询 key 的命名规则），观察 query keys 的定义与 cache invalidation 的策略。
  • 对于 SSR（Nuxt）场景，重点查找 server prefetch 或 nuxt plugin 的实现，学习如何在服务端 prefetch 并在客户端 hydrate。

快速上手练习（推荐 4 步实操） ​

  1. 新建一个最小 Vite + Vue 3 项目（npm init vite@latest 或 pnpm create vite）
  2. 安装并在 main.ts 中引入 VueQueryPlugin：
    • npm install @tanstack/vue-query
    • 在 main.ts 中：
      ts
      import { VueQueryPlugin } from "@tanstack/vue-query";
app.use(VueQueryPlugin);
  3. 实现一个数据列表页面（useQuery）和创建/编辑表单（useMutation）：
    • 列表：展示 loading / error / data，支持分页（或 infinite）
    • 表单：在 mutation 成功后调用 queryClient.invalidateQueries('your-list-key')
  4. 如果使用 Nuxt，请参照 trpc-vue-query 或 shims.d.ts 示例，创建 Nuxt plugin 注入 QueryClient，并确保 SSR 预取（server side prefetch）与客户端 hydration 正常工作。

后续可选动作（我可以为你执行） ​

  • 为上面每个仓库抓取并附上最新的星数 (stars) 与最近一次 commit 时间，并按“stars + 最近更新”排序返回清单。
  • 扩充清单：特别检索 UniApp 中是否有项目采用 @tanstack/vue-query（注意：UniApp 社区通常较少直接用该包，可能需要适配层）。
  • 针对某个仓库制作一份 “如何在 1 小时内上手” 的步骤，包含最小复现代码片段与关键文件定位。

再次提醒：当前代码搜索可能未覆盖 GitHub 上全部相关仓库；你可以让我要“按星数与更新时间排序并补充元数据”，我会继续抓取并返回一个可排序、带星数和最近提交时间的细化清单。

下载说明：上面的内容即为完整的 Markdown 文档内容。你可以直接保存本文件为 tanstack-vue-query-repos.md 以便离线查看或下载使用。

贡献者

The avatar of contributor named as ruan-cat ruan-cat

页面历史

最近更新