vuejs/awesome-vue · 上手攻略
- 仓库：vuejs/awesome-vue
- 链接：https://github.com/vuejs/awesome-vue
- 分类：frontend-framework
- 作者：Jay
- 更新：2026-07-15
这是什么
vuejs/awesome-vue 是 Vue.js 生态最知名的 Awesome 精选列表，由 Vue.js 官方团队（vuejs/ 组织）维护。它收录了与 Vue.js 相关的优质开源项目、学习资源、社区生态工具，按类别精心组织，目前 GitHub Stars 数超过 73,000（数据来源：2026-07-15 工作队列）。
这是一个纯 curated list 类型的仓库——没有代码，只有一个巨大的 README.md，持续由社区贡献、官方维护，是 Vue 开发者找轮子、找教程、找灵感的第一站。
解决什么问题
Vue.js 生态极其庞大（npm 周下载量数千万级别），新入门或迁移到 Vue 3 的开发者面临两个核心问题：
- 找不到合适的轮子：需要图表库、状态管理方案、UI 组件库时，搜索结果鱼龙混杂，不知道哪个活跃、哪个质量高。
- 不知道生态全貌：Vue Router、Pinia、Vite、Vue Test Utils、DevTools……这些是什么关系？该从哪里开始？
awesome-vue 用人工精选 + 分类 TOC 的方式，把高质量项目按用途分门别类，让开发者能够按图索骥、快速定位想要的资源，而不必在 npm 或 GitHub 搜索里大海捞针。
快速开始
# 直接 clone 阅读，或 fork 参与贡献
git clone https://github.com/vuejs/awesome-vue.git
cd awesome-vue
# 直接打开 README.md 用任意 Markdown 阅读器浏览
# 推荐用 VS Code + Markdown All in One 插件
不需要安装任何依赖——这就是一个纯 Markdown 文件仓库。
核心用法与资源速查
以下是基于 README 结构的精选资源速查，帮助你在不知道某类轮子是否存在时快速定位：
官方核心资源
| 资源 | 链接 |
|---|---|
| Vue 3 官方文档 | https://vuejs.org/ |
| API 参考 | https://vuejs.org/api/ |
| Vue 官方 GitHub | https://github.com/vuejs/ |
| 发行说明（Vue 3） | https://github.com/vuejs/core/releases |
| 风格指南 | https://vuejs.org/style-guide/ |
| Vue.js 新闻 | https://news.vuejs.org/ |
| VS Code / JetBrains Vue Language Tools | https://github.com/vuejs/language-tools |
学习教程
| 资源 | 说明 |
|---|---|
| Vue School | https://vueschool.io — Vue 核心团队成员参与的视频课程 |
| Vue Mastery | https://www.vuemastery.com — 付费优质教程平台 |
| Vue 3 Video Playlist（YouTube） | 官方出品的 Vue 3 教程视频播放列表 |
| Vue Curated Resources（Hackr.io） | 社区推荐的学习资源汇总 |
| Vue Dose | https://vuedose.tips — 碎片化技巧和实战经验 |
真正的明星项目（ Truly Awesome）
README 中单独列出了经过官方认证、高质量且经过时间验证的项目：
- Vue DevTools — 浏览器 DevTools 扩展，调试 Vue 应用必备
- unplugin-icons — 按需自动导入所有主流图标集
- vue-i18n — Vue 国际化插件的事实标准
UI 组件库
| 库 | 特点 |
|---|---|
| Vuetify | Material Design 3，Vue 2/3 双版本，企业级 |
| Quasar | 一套代码同时输出网站 / App / 桌面 / PWA |
| Element Plus | 饿了么出品，Vue 3 企业后台组件库 |
| Naive UI | TypeScript-first，Vue 3，专为中后台设计 |
| PrimeVue | 70+ 组件，主题系统强大，Angular/Vue/React 多框架 |
| Arco Design Vue | 字节跳动企业级设计系统 |
| TDesign Vue Next | 腾讯 TDesign 的 Vue 3 实现 |
| Vant | 有赞出品，移动端 H5 组件库 |
静态网站生成（SSG）
| 项目 | 特点 |
|---|---|
| VitePress | Vite + Vue 3 + Markdown，Vue 官方文档站框架 |
| VuePress | Vue 官方早期 SSG，目前官方推荐迁移到 VitePress |
| Slidev | 开发者友好的演示文稿工具，用 Markdown 写 PPT |
状态管理
- Pinia（Vue 官方）— 即将取代 Vuex 的新一代状态管理，简单、支持 Composition API
- Vuex（Vue 官方）— Vue 2 时代主流，Vue 3 仍可用但不推荐新项目使用
测试工具链
| 工具 | 说明 |
|---|---|
| Vitest | Vite 原生单元测试框架，与 Jest API 兼容 |
| Vue Test Utils | 官方组件单元测试工具 |
| Cypress | E2E 测试，Vue 官方推荐 |
| Playwright | 微软出品的现代 E2E 测试框架 |
典型适用场景
| 场景 | 推荐资源 |
|---|---|
| 从零开始学 Vue 3 | Vue School / Vue Mastery 视频课 + 官方文档 |
| 快速搭一个管理后台 | Element Plus + Vite + Pinia |
| 移动端 H5 开发 | Vant 4（Vue 3 版本） |
| 需要 SSR / SEO | Nuxt 3（Vue 3 全栈框架） |
| 找图标方案 | unplugin-icons（自动按需导入任何图标集） |
| 调试生产环境问题 | Vue DevTools Browser Extension |
| 写演示 PPT | Slidev（用 Markdown 开发演示文稿） |
| Electron 桌面应用 | Quasar（一套代码全平台）或 Tauri + Vue |
坑与注意
- awesome-vue 没有 releases：这是一个纯文档型仓库，不发版，版本即 Git commit 历史。
- 列表按 Vue 版本标注兼容性：很多组件库同时支持 Vue 2 和 Vue 3，README 中有明确标注，注意区分——Vue 2 已进入维护模式（security updates only），新项目应优先选择 Vue 3。
- awesome-vue 不是 npm 搜索的替代品：它是人工精选列表，适合找"什么方案最流行/最可靠"，但不是穷举所有 Vue 包。完整的 Vue 相关包列表可在 npm 上用
vue+vue3标签过滤。 - README 内容极长：原始 README 超过 7000 行，直接在 GitHub 网页端浏览可能会卡，建议 clone 后用本地 Markdown 编辑器阅读，或用 VS Code 大纲视图快速导航。
- 过时资源：作为一个社区维护列表，部分老项目可能已停止维护。README 中 "Truly awesome projects" 部分是官方认证的活跃高质量项目，是最安全的参考基准。
与同类对比
| 列表 | Stars（2026） | 定位 |
|---|---|---|
| awesome-vue | ~73,554 | Vue 生态全面精选，官方维护 |
| awesome-vue (vuejs devs 维护) | — | 同上，同一个仓库 |
| Curated Vue Resources（Hackr.io） | — | 学习资源导向 |
| Vue.js 官方文档生态 | — | 官方出品工具链（Vue Router、Pinia、Vite 等） |
如果要对比 awesome-vue vs awesome-react：两者结构类似，但 Vue 列表更注重"UI 组件库和工具"分类，React 列表更偏向工程化工具链。Vue 3 的 awesome-vue 与 React 的 awesome-react 的生态成熟度相当，但 Vue 在国内（阿里、字节等）的企业采用率更高，Element Plus/Vant 等中文社区贡献的组件库格外丰富。
一句话推荐结论
Vue 开发者找轮子、找教程、找灵感的第一站——超过 73k Stars 的官方维护精选列表，收藏它，遇到任何 Vue 生态相关需求时先来这里按图索骥，比在 npm 搜索里盲选高效得多。