VitePress 强大的静态网站生成器

什么是VitePress？

VitePress 是一个静态站点生成器 (SSG)，专为构建快速、以内容为中心的网站而设计。简而言之，VitePress 获取用 Markdown 编写的源内容，为其应用主题，并生成可以轻松部署在任何地方的静态 HTML 页面。

VitePress中文教程：https://vitepress.qzxdp.cn/

用例

• 文档

VitePress附带了一个默认主题，专为技术文档而设计，特别适用于需要嵌入交互式演示的文档。它支持您当前正在阅读的页面，以及其他文档，例如：

• Vite: 下一代前端工具
• Pinia: Vue.js的直观状态管理工具
• VueUse: Vue组合工具集合
• D3: 用于定制数据可视化的JavaScript库
• Rollup: JavaScript模块打包工具
• Mermaid: 绘图和图表工具
• Wikimedia Codex: Wikimedia设计系统
• Vitest: 极速的单元测试框架
• UnoCSS: 即时按需的原子级CSS引擎
• VitePWA: Vite和生态系统的PWA集成
• Iconify: 自由选择图标
• and many more.

Vue.js官方文档也是基于VitePress构建的，但使用了一个自定义主题，用于多语言版本之间的共享。

• 博客、个人作品集和营销网站 VitePress支持完全定制的主题，同时提供了与标准Vite + Vue应用程序相似的开发体验。它是基于Vite构建的，这意味着您可以直接利用Vite生态系统中丰富的插件。此外，VitePress还提供了灵活的API，用于加载数据（本地或远程）和动态生成路由。只要数据可以在构建时确定，您可以使用VitePress构建几乎任何类型的网站，包括博客、个人作品集和营销网站。

官方的Vue.js博客是一个简单的博客，它根据本地内容生成索引页面。

开发者体验

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

• 基于 Vite 引擎: VitePress实现了即时的服务器启动，对编辑的更改始终在瞬间反映出来（<100毫秒），无需重新加载页面。
• 内置Markdown扩展: VitePress提供了许多高级功能，包括Frontmatter（前置元数据）、表格、语法高亮等等，几乎所有你能想到的功能它都有。特别是在处理代码块方面，VitePress提供了许多高级功能，使其非常适合编写高度技术性的文档。
• 增强型Vue Markdown: 由于Vue模板与HTML具有100%的语法兼容性，因此每个Markdown页面也是一个Vue单文件组件（Single-File Component）SFC。您可以使用Vue模板的特性或导入的Vue组件，在静态内容中嵌入交互性。这意味着您可以在Markdown页面中使用Vue模板的语法和功能来实现交互效果。

性能

与许多传统的SSG不同，VitePress生成的网站实际上是一个单页应用程序 (SPA)。

• 快速初始加载

对于任何页面的初始访问，将提供静态的预渲染HTML，以实现极快的加载速度和最佳的SEO效果。然后，页面会加载一个JavaScript捆绑包，将页面转换为Vue单页面应用程序（SPA）进行"水合"（hydration）过程。水合过程非常快速：在PageSpeed Insights上，即使在低端移动设备上使用缓慢的网络，典型的VitePress站点也能获得接近完美的性能分数。

• 快速加载后导航

更重要的是，SPA模型在初始加载之后为用户提供了更好的用户体验。在站点内进行后续导航将不再导致完整的页面重新加载。相反，将获取并动态更新进入页面的内容。VitePress还会自动预取视口内链接的页面块。在大多数情况下，加载后的导航将感觉瞬间完成。

• 无损交互性

为了能够对静态Markdown中嵌入的动态Vue部分进行水合（hydration），每个Markdown页面都会被处理为一个Vue组件并编译为JavaScript。这听起来可能效率低下，但是Vue编译器足够智能，能够将静态部分和动态部分分离，从而将水合成本和负载大小都最小化。对于初始页面加载，静态部分会自动从JavaScript负载中删除，并在水合过程中跳过。

VuePress 怎么样？

VitePress 是 VuePress 的精神继承者。最初的 VuePress 基于 Vue 2 和 webpack。借助 Vue 3 和 Vite，VitePress 提供了明显更好的 DX、更好的生产性能、更精致的默认主题以及更灵活的定制 API。

VitePress 和 VuePress 之间的 API 差异主要在于主题和定制。如果您使用带有默认主题的 VuePress 1，那么迁移到 VitePress 应该相对简单。

VuePress 2 也投入了精力，它也支持 Vue 3 和 Vite，与 VuePress 1 具有更高的兼容性。但是，并行维护两个 SSG 是不可持续的，因此 Vue 团队决定将 VitePress 作为主要推荐从长远来看，SSG。