第 30 章:Vue 生态资源
学习目标
- 知道去哪里找官方文档
- 收藏主流 UI / 工具库
- 关注社区动态
- 备战 Vue 3.5 / Vue 4
一、必收藏官网
| 资源 | 链接 |
|---|---|
| Vue 3 官方 | https://vuejs.org |
| Vue Router | https://router.vuejs.org |
| Pinia | https://pinia.vuejs.org |
| Vite | https://vitejs.dev |
| VueUse | https://vueuse.org |
二、UI 组件库
| 库 | 场景 |
|---|---|
| Element Plus | 中后台 |
| Naive UI | 现代中后台 |
| Ant Design Vue | 重型中后台 |
| Vant | 移动端 |
| PrimeVue | 全场景 |
| Headless UI | 无样式可访问 |
三、动效
| 库 | 特点 |
|---|---|
| motion-v | Vue 3 motion 封装 |
| @vueuse/motion | VueUse 系列 |
| GSAP | 复杂动画 |
| lottie-web | AE 动画 |
四、工具
| 库 | 用途 |
|---|---|
| VueUse | 200+ 组合式函数 |
| unplugin-vue-components | 自动注册 |
| unplugin-auto-import | 自动 import |
| vite-plugin-vue-devtools | 调试 |
| unplugin-icons | 图标 |
五、类型 / 测试
| 库 | 用途 |
|---|---|
| vue-tsc | vue 文件 TS 检查 |
| @vue/test-utils | 组件测试 |
| Vitest | 单测 |
| Cypress | e2e |
六、学习路径
| 阶段 | 资源 |
|---|---|
| 入门 | Vue 官方文档 + 本教程 |
| 进阶 | Vue Mastery / Vue School |
| 实战 | GitHub 优秀项目 |
| 源码 | Vue 3 源码阅读 |
七、社区
- Reddit: r/vuejs
- Discord: VueLand
- Twitter/X: @vuejs
- 中文: vue3 官方中文文档
八、版本演进
| 版本 | 亮点 |
|---|---|
| 3.0 | Composition API |
| 3.2 | <script setup> |
| 3.3 | defineModel / 泛型 |
| 3.4 | 同名 prop 简写、model 简化 |
| 3.5 | 响应式优化、defineModel 改进 |
| 未来 | Vapor(无虚拟 DOM) |
九、面试常问
- 响应式原理
- diff 算法
- Composition API 优势
- v-model 原理
- 组件通信方式
- 性能优化手段
十、本章小结
| 维度 | 资源 |
|---|---|
| 文档 | vuejs.org |
| 状态 | Pinia |
| 路由 | vue-router |
| 工具 | VueUse |
| 组件 | Element Plus / Naive UI |
动手练习
- 收藏官网:把 5 个官方链接加入书签
- 试用 VueUse:用
useLocalStorage重构一个状态 - 源码阅读:读 Vue 3 reactivity
ref源码
至此,Vue 3 教程 30 章全部完成。