简而言之，VitePress 获取用 Markdown 编写的源内容，为其应用主题，并生成可以轻松部署在任何地方的静态 HTML 页面。

之上 VitePress 建立在Vite 和 Vue ，是 VuePress 的精神继承者和现代替代品。

我可以使用 VitePress 做什么？

• 文档
• VitePress 附带一个专为技术文档设计的默认主题。 文档提供支持。 它为Vite 、 Rollup 、 Pinia 、 VueUse 、 Vitest 、 D3 、 UnoCSS 、 Iconify 等
• 也 Vue.js 官方文档 基于 VitePress，但使用多个翻译之间共享的自定义主题。
• 博客、作品集和营销网站
• VitePress 支持 完全定制的主题 ，具有标准 Vite + Vue 应用程序的开发者体验。 基于 Vite 构建还意味着您可以直接利用其丰富生态系统中的 Vite 插件。 此外，VitePress 提供灵活的 API 来 加载数据 （本地或远程）并 在构建时动态生成路由 。 只要可以在构建时确定数据，您就可以使用它来构建几乎任何东西。
• 这个博客 是使用 VitePress 的自定义主题和数据加载 API 构建的。

开发者经验

VitePress 旨在在处理 Markdown 内容时提供出色的开发者体验 (DX)。

• Vite-Powered： 即时服务器启动，编辑始终立即反映（<100ms），无需重新加载页面。
• 内置 Markdown 扩展： Frontmatter、表格、语法突出显示...应有尽有。 具体来说，VitePress 提供了许多用于处理代码块的高级功能，使其成为高技术文档的理想选择。
• Vue-Enhanced Markdown： 每个 Markdown 页面也是一个 Vue 单文件组件 ，这要归功于 Vue 模板与 HTML 100% 语法兼容。 您可以使用 Vue 模板功能或导入的 Vue 组件在静态内容中嵌入交互性。

表现

与许多传统的 SSG（每次导航都会导致整个页面重新加载）不同，VitePress 生成的网站在初次访问时提供静态 HTML，但会成为单 页应用程序 （SPA）以供网站内的后续导航。 我们认为，该模型提供了性能的最佳平衡：

• 快速初始加载
• 对任何页面的初始访问都将提供静态、预渲染的 HTML，以实现快速加载速度和最佳 SEO。 然后，该页面加载一个 JavaScript 包，将页面转变为 Vue SPA（“水化”）。 与 SPA 水合作用缓慢的常见假设相反，由于 Vue 3 的原始性能和编译器优化，这个过程实际上非常快。 在 PageSpeed Insights 上，即使在网络速度较慢的低端移动设备上，典型的 VitePress 网站也能获得近乎完美的性能分数。
• 快速加载后导航
• 带来更好的用户体验 后 更重要的是，SPA模型在初始加载 。 站点内的后续导航将不再导致整个页面重新加载。 相反，传入页面的内容将被获取并动态更新。 VitePress 还会自动预取视口内链接的页面块。 在大多数情况下，加载后导航会感觉即时。
• 互动无惩罚
• 为了能够水合嵌入静态 Markdown 中的动态 Vue 部分，每个 Markdown 页面都被处理为 Vue 组件并编译为 JavaScript。 这听起来可能效率低下，但 Vue 编译器足够智能，可以分离静态和动态部分，从而最大限度地减少水合成本和有效负载大小。 对于初始页面加载，静态部分会自动从 JavaScript 有效负载中消除，并在水合作用期间跳过。