Skip to content
本页目录

什么是 VitePress ?

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

使用案例

  • 文档 VitePress附带了一个为技术文档设计的默认主题,尤其是那些需要嵌入交互式演示的文档。它为您现在正在阅读的页面提供了动力,还有VitePiniaVueUseMermaidWikimedia Codex等文档。 Vue.js的官方文档也基于VitePress,但使用了多个翻译之间共享的自定义主题。

  • 博客、投资组合和营销网站 VitePress支持完全定制的主题,具有标准Vite + Vue应用程序的开发体验。构建在Vite上也意味着您可以直接利用其丰富的生态系统中的Vite插件。此外,VitePress还提供了灵活的api来加载数据(本地或远程)和动态生成路由。只要在构建时可以确定数据,您就可以使用它来构建几乎任何东西。 Vue.js官方博客是一个基于本地内容生成索引页面的简单博客。

开发者经验

VitePress的目标是在使用Markdown内容时提供一个伟大的开发体验(DX)。

  • Vite-Powered : 服务器立即启动,编辑总是立即反映(<100ms),无需重新加载页面。
  • Build-in Markdown Extensions: 封面,表格,语法高亮…你能想到的都有。具体来说,VitePress为代码块提供了许多高级功能,使其成为高技术文档的理想选择。
  • Vue Ehanced Markdown: 每个Markdown页面也是一个Vue单文件组件,这要归功于Vue模板与HTML的100%语法兼容性。可以使用Vue模板特性或导入的Vue组件将交互性嵌入到静态内容中。

性能

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

  • 快速初始加载 对任何页面的首次访问都将提供静态的、预渲染的HTML,以获得极快的加载速度和最佳的SEO。然后,页面加载一个JavaScript包,将页面转换为Vue SPA(“水合作用”)。水化过程非常快:在PageSpeed Insights上,典型的VitePress站点即使在网络较慢的低端移动设备上也能获得近乎完美的性能分数。
  • 快速加载后导航 更重要的是,SPA模型在初始加载后会带来更好的用户体验。站点内的后续导航将不再导致整个页面重新加载。相反,将获取并动态更新传入页面的内容。VitePress还自动预取视口内链接的页面块。在大多数情况下,加载后导航会让人感觉很即时。
  • 无禁区的互动性 为了能够在静态Markdown中嵌入动态Vue部件,每个Markdown页面都被作为Vue组件处理并编译成JavaScript。这听起来可能效率很低,但是Vue编译器足够聪明,可以分离静态和动态部分,从而最小化水合成本和有效负载大小。对于初始页面加载,静态部分将自动从JavaScript有效负载中删除,并在水合过程中跳过。

VuePress怎么样?

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

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

VuePress 2也投入了精力,它也支持Vue 3Vite,与VuePress 1的兼容性更好。然而,同时维护两个SSG是不可持续的,所以Vue团队决定将VitePress作为长期推荐的主要SSG

Released under the MIT License