学习资源
本文档整理了学习 VitePress 的优质资源和相关工具推荐，帮助你更高效地学习和开发。
官方资源
核心文档
| 资源 | 说明 |
|---|---|
| VitePress 官方文档 | 最权威的 VitePress 文档，包含所有 API 和配置说明 |
| VitePress GitHub | 源码仓库，可以查看源码和提交 Issue |
| VitePress Discord | 官方社区讨论，与其他开发者交流 |
| VitePress 更新日志 | 查看版本更新记录 |
相关官方资源
| 资源 | 说明 |
|---|---|
| Vue.js 官方文档 | Vue.js 框架官方文档 |
| Vue.js 中文文档 | Vue.js 中文翻译文档 |
| Vite 官方文档 | Vite 构建工具官方文档 |
| Vite 中文文档 | Vite 中文翻译文档 |
视频教程
入门视频
| 平台 | 教程 | 说明 |
|---|---|---|
| B站 | VitePress 入门教程 | 中文入门视频教程 |
| YouTube | VitePress Crash Course | 英文入门教程合集 |
| YouTube | Vue School | Vue 官方合作教程平台 |
进阶视频
| 主题 | 推荐内容 |
|---|---|
| 主题开发 | Vue 3 组件开发相关教程 |
| 部署实践 | Vercel/Netlify 部署教程 |
| 性能优化 | 前端性能优化专题 |
教程与文章
入门教程
| 教程 | 来源 | 说明 |
|---|---|---|
| VitePress 快速开始 | 官方 | 官方入门指南 |
| 从零搭建 VitePress 博客 | 本站 | 本站实战案例 |
| VitePress 入门指南 | 本站 | 本站入门教程 |
进阶教程
| 教程 | 来源 | 说明 |
|---|---|---|
| 自定义主题开发 | 本站 | 深度定制主题 |
| 组件开发指南 | 本站 | Vue 组件使用 |
| 多语言支持 | 本站 | 国际化配置 |
| 部署与发布 | 本站 | 多平台部署 |
社区文章
| 平台 | 说明 |
|---|---|
| 掘金 - VitePress 标签 | 中文技术社区文章 |
| 知乎 - VitePress 话题 | 知乎相关讨论 |
| Dev.to - VitePress | 英文技术社区文章 |
| Medium - VitePress | Medium 相关文章 |
工具与插件
构建工具
| 工具 | 说明 |
|---|---|
| Vite | 新一代前端构建工具，VitePress 的核心 |
| Vue 3 | 渐进式 JavaScript 框架 |
| Node.js | JavaScript 运行环境 |
Markdown 工具
| 工具 | 说明 |
|---|---|
| Markdown Guide | Markdown 语法参考 |
| Markdown 中文教程 | 中文 Markdown 教程 |
| Markdoc | 可扩展 Markdown 系统 |
| MDX | Markdown + JSX |
常用插件
内容增强
| 插件 | 说明 | 链接 |
|---|---|---|
| vitepress-plugin-mermaid | Mermaid 图表支持 | GitHub |
| medium-zoom | 图片点击缩放功能 | GitHub |
| vitepress-plugin-image-viewer | 图片预览器 | GitHub |
评论与互动
| 插件 | 说明 | 链接 |
|---|---|---|
| giscus | 基于 GitHub Discussions 的评论系统 | 官网 |
| Waline | 简洁安全的评论系统 | 官网 |
| Twikoo | 简洁高效的评论系统 | 官网 |
SEO 与统计
| 插件 | 说明 | 链接 |
|---|---|---|
| vitepress-plugin-rss | RSS 订阅支持 | GitHub |
| vitepress-plugin-sitemap | 站点地图生成 | GitHub |
搜索增强
| 插件 | 说明 | 链接 |
|---|---|---|
| Algolia DocSearch | 官方搜索服务 | 教程 |
| vitepress-plugin-local-search | 增强本地搜索 | GitHub |
主题与布局
| 插件 | 说明 | 链接 |
|---|---|---|
| vitepress-theme-demoblock | 组件演示容器 | GitHub |
| vitepress-plugin-group-icons | 分组图标支持 | GitHub |
开发工具
| 插件 | 说明 | 链接 |
|---|---|---|
| unplugin-vue-components | 组件自动导入 | GitHub |
| vite-plugin-vue-layouts | 布局系统增强 | GitHub |
| vite-plugin-pwa | PWA 支持 | GitHub |
编辑器工具
| 工具 | 说明 |
|---|---|
| VS Code | 推荐代码编辑器 |
| Vue DevTools | Vue 调试工具 |
| Volar | VS Code Vue 插件 |
部署平台
推荐平台
| 平台 | 说明 | 免费额度 | 特点 |
|---|---|---|---|
| Vercel | 前端部署平台 | 充足 | 自动部署、全球 CDN、最简单 |
| Netlify | 自动化部署平台 | 充足 | 表单处理、函数支持 |
| GitHub Pages | GitHub 托管 | 免费 | 与 GitHub 集成、免费域名 |
| Cloudflare Pages | 全球 CDN | 充足 | 极速 CDN、DDoS 防护 |
| EdgeOne Pages | 腾讯云边缘计算 | 有免费额度 | 国内访问快、安全防护 |
更多平台
| 平台 | 说明 | 特点 |
|---|---|---|
| Railway | 全栈部署平台 | 简单易用、支持后端 |
| Render | 云平台 | 免费 SSL、自动部署 |
| Zeabur | 新兴部署平台 | 国内优化、一键部署 |
| Fly.io | 边缘计算平台 | 全球分布、低延迟 |
平台对比
| 特性 | Vercel | Netlify | GitHub Pages | Cloudflare |
|---|---|---|---|---|
| 国内访问 | 一般 | 一般 | 较慢 | 较快 |
| 配置难度 | 简单 | 简单 | 中等 | 中等 |
| 自定义域名 | 支持 | 支持 | 支持 | 支持 |
| HTTPS | 免费 | 免费 | 免费 | 免费 |
主题与模板
社区主题
| 主题 | 说明 | 链接 |
|---|---|---|
| vitepress-theme-openapi | API 文档主题 | GitHub |
| vitepress-theme-demoblock | 组件演示主题 | GitHub |
| vitepress-theme-youngo | 博客主题 | GitHub |
精选模板
| 模板 | 说明 |
|---|---|
| VitePress 官方模板 | 官方文档源码 |
| Vue.js 文档 | Vue.js 官方文档源码 |
| Vite 文档 | Vite 官方文档源码 |
扩展阅读
Vue 生态系统
| 资源 | 说明 |
|---|---|
| Vue 3 文档 | Vue 3 中文文档 |
| Pinia | Vue 状态管理 |
| Vue Router | Vue 官方路由 |
| VueUse | Vue 组合式函数库 |
静态站点生成器
| 工具 | 框架 | 说明 |
|---|---|---|
| Docusaurus | React | Facebook 出品的文档工具 |
| Nextra | Next.js | Next.js 驱动的文档工具 |
| Astro | 多框架 | 多框架支持的静态站点生成器 |
| Docsify | 无框架 | 无需构建的文档站 |
相关技术
| 技术 | 说明 |
|---|---|
| TypeScript | JavaScript 超集，类型安全 |
| ESLint | JavaScript 代码检查工具 |
| Prettier | 代码格式化工具 |
| Tailwind CSS | 原子化 CSS 框架 |
设计资源
图标资源
| 资源 | 说明 |
|---|---|
| Heroicons | Tailwind 官方图标库 |
| Lucide Icons | 精美的开源图标 |
| Feather Icons | 简洁的图标库 |
| Iconify | 统一的图标框架 |
图片资源
| 资源 | 说明 |
|---|---|
| Unsplash | 免费高质量图片 |
| Pexels | 免费图片素材 |
| SVG Repo | SVG 图标和插图 |
订阅与关注
官方动态
| 渠道 | 链接 |
|---|---|
| Vue 官方博客 | blog.vuejs.org |
| Vite 官方博客 | vitejs.dev/blog |
| Vue Twitter | @vuejs |
| Evan You Twitter | @youyuxi |
中文社区
| 渠道 | 说明 |
|---|---|
| Vue.js 中文社区 | Vue 中文官方论坛 |
| 掘金 Vue 专区 | 掘金 Vue 相关内容 |
| 思否 Vue 专区 | SegmentFault Vue 内容 |
资源推荐
如果你有好的资源推荐，欢迎通过 CNB 提交 MR！