学习资源
精选的 VitePress 外部学习资源，帮助你更深入地掌握 VitePress 开发。
官方资源
| 资源 | 说明 | 链接 |
|---|---|---|
| VitePress 官方文档 | 最权威的参考文档 | vitepress.dev |
| VitePress GitHub | 源码和 Issue 追踪 | github.com/vuejs/vitepress |
| VitePress 更新日志 | 版本发布记录 | GitHub Releases |
| Vue.js 官方文档 | Vue 3 基础知识 | vuejs.org |
| Vite 官方文档 | Vite 构建工具文档 | vitejs.dev |
视频教程
入门系列
| 教程 | 作者 | 时长 | 说明 | 链接 |
|---|---|---|---|---|
| VitePress 从零开始 | Evan You | 45 分钟 | VitePress 核心概念 | YouTube |
| VitePress 快速上手指南 | Vue Mastery | 30 分钟 | 基础配置和部署 | Vue Mastery |
| VitePress + GitHub Pages 部署 | The Net Ninja | 20 分钟 | 自动化部署流程 | YouTube |
进阶系列
| 教程 | 作者 | 时长 | 说明 | 链接 |
|---|---|---|---|---|
| 自定义主题开发实战 | Anthony Fu | 60 分钟 | 完整主题开发流程 | YouTube |
| VitePress 插件开发 | Vue School | 40 分钟 | Markdown-it 和 Vite 插件 | Vue School |
| VitePress 多语言方案 | 社区贡献者 | 25 分钟 | i18n 配置和最佳实践 | Bilibili |
中文视频
| 教程 | 平台 | 说明 |
|---|---|---|
| VitePress 建站教程 | Bilibili | 从零搭建完整站点 |
| VitePress 主题定制 | Bilibili | CSS 变量和组件扩展 |
| VitePress 博客搭建 | YouTube 中文 | 博客主题和功能配置 |
提示
视频教程可能会随 VitePress 版本更新而过时，建议同时参考官方文档。
精选文章
入门指南
| 文章 | 作者 | 说明 |
|---|---|---|
| VitePress 入门：5 分钟搭建文档站 | 社区 | 快速上手指南 |
| 从 VuePress 迁移到 VitePress | 社区 | 迁移步骤和注意事项 |
| VitePress vs VuePress：如何选择 | 社区 | 功能和性能对比 |
| VitePress 项目结构最佳实践 | 社区 | 目录组织和文件命名 |
主题定制
| 文章 | 作者 | 说明 |
|---|---|---|
| VitePress 主题定制完全指南 | 社区 | CSS 变量和布局插槽 |
| 创建自定义 VitePress 主题 | 社区 | 从零开发主题 |
| VitePress 深色模式优化技巧 | 社区 | 暗色主题适配 |
| VitePress 响应式设计指南 | 社区 | 移动端适配 |
高级功能
| 文章 | 作者 | 说明 |
|---|---|---|
| VitePress 数据加载器详解 | 社区 | 远程数据集成 |
| VitePress + Algolia 搜索集成 | 社区 | 全文搜索配置 |
| VitePress PWA 离线访问实现 | 社区 | PWA 配置和测试 |
| VitePress 国际化 (i18n) 实战 | 社区 | 多语言站点搭建 |
部署运维
| 文章 | 作者 | 说明 |
|---|---|---|
| VitePress 部署到 Vercel 完整指南 | 社区 | 自动化部署 |
| VitePress + Cloudflare Pages 部署 | 社区 | 国内加速方案 |
| VitePress 性能优化实战 | 社区 | Lighthouse 评分优化 |
| VitePress SEO 优化策略 | 社区 | 搜索引擎优化 |
在线课程
| 课程 | 平台 | 价格 | 说明 |
|---|---|---|---|
| VitePress Fundamentals | Vue Mastery | 会员 | 官方合作课程 |
| Build a Docs Site with VitePress | Frontend Masters | 会员 | 深度实战课程 |
| VitePress 全栈开发 | 掘金小册 | 付费 | 中文实战教程 |
社区项目
优秀站点案例
| 站点 | 说明 | 源码 |
|---|---|---|
| Vue.js 文档 | Vue.js 官方文档 | GitHub |
| Vite 文档 | Vite 官方文档 | GitHub |
| Pinia 文档 | Pinia 状态管理文档 | GitHub |
| Vue Router 文档 | Vue Router 文档 | GitHub |
| Vitest 文档 | Vitest 测试框架文档 | GitHub |
| Rollup 文档 | Rollup 打包工具文档 | GitHub |
开源模板
| 模板 | 说明 | 链接 |
|---|---|---|
| VitePress 博客模板 | 带标签、归档、评论的博客 | GitHub |
| VitePress 组件文档模板 | 组件库文档站模板 | GitHub |
| VitePress API 文档模板 | API 参考文档模板 | GitHub |
| VitePress 企业站模板 | 企业官网模板 | GitHub |
工具和资源
开发工具
| 工具 | 说明 | 链接 |
|---|---|---|
| VS Code VitePress 插件 | 语法高亮和自动补全 | VS Code Marketplace |
| VitePress Dev Tools | 浏览器开发者工具扩展 | Chrome Web Store |
| VitePress Snippets | VS Code 代码片段 | VS Code Marketplace |
设计资源
| 资源 | 说明 | 链接 |
|---|---|---|
| VitePress 设计系统 | Figma 设计文件 | Figma Community |
| 图标库 | Lucide / Heroicons | lucide.dev |
| 配色方案 | CSS 变量生成器 | UI Colors |
辅助服务
| 服务 | 说明 | 链接 |
|---|---|---|
| Algolia DocSearch | 免费搜索服务 | DocSearch |
| Giscus | 免费评论系统 | Giscus |
| Umami | 隐私友好的统计 | Umami |
| Pagefind | 轻量搜索工具 | Pagefind |
社区交流
| 平台 | 说明 | 链接 |
|---|---|---|
| GitHub Discussions | 官方讨论区 | 参与讨论 |
| Discord | Vue.js 官方 Discord | 加入频道 |
| 掘金 Vue.js 标签 | 中文社区 | 查看文章 |
| SegmentFault | 中文问答社区 | 查看问题 |
贡献资源
发现了好的 VitePress 学习资源？欢迎提交：
- 在 GitHub Issues 提交资源推荐
- 或直接提交 PR 更新本页面
提示
本页面持续更新，欢迎贡献优质资源！