VitePress 是什么?
VitePress 是一个靜態站點生成器 (SSG),专为构建快速、以内容为中心的站點而设计。简而言之,VitePress 获取用 Markdown 编写的内容,对其应用主題,并生成可以轻松部署到任何地方的靜態 HTML 頁面。
只是想尝试一下?跳到快速开始。
使用場景
文件
VitePress 附带一个专为技术文件设计的默认主題。你现在正在阅读的这个頁面以及 Vite、Rollup、Pinia、VueUse、Vitest、D3、UnoCSS、Iconify 等文件都是基於这个主題的。
Vue.js 官方文件也是基於 VitePress 的。但是为了可以在不同的翻译文件之间切换,它自訂了自己的主題。
博客、档案和营销网站
VitePress 支援完全的自訂主題,具有标准 Vite + Vue 应用程序的開發体验。基於 Vite 构建还意味着可以直接利用其生態系统中丰富的 Vite 外掛。此外,VitePress 提供了灵活的 API 来加载数据 (本地或远程),也可以动態生成路由。只要可以在构建时确定数据,就可以使用它来构建几乎任何东西。
Vue.js 官方博客是一个简单的博客頁面,它根据本地内容生成其索引頁面。
開發体验
VitePress 旨在使用 Markdown 生成内容时提供出色的開發体验。
Vite 驱动:即时服务器啟动,始终立即反映 (<100ms) 編輯变化,无需重新加载頁面。
内置 Markdown 扩展:frontmatter、表格、语法高亮……应有尽有。具体来说,VitePress 提供了许多用于處理程式碼块的高级功能,使其真正成为技术文件的理想選擇。
Vue 增强的 Markdown:每个 Markdown 頁面都是 Vue 单文件组件,这要归功于 Vue 模板與 HTML 的 100% 语法相容性。可以使用 Vue 模板语法或导入的 Vue 组件在靜態内容中嵌入交互性。
性能
與许多传统的 SSG 不同,每次導航都會导致頁面完全重新加载,VitePress 生成的网站在初次访问时提供靜態 HTML,但它变成了单页应用程序(SPA)进行站點内的後续導航。我们认为,这种模式为性能提供了最佳平衡:
快速的初始加载
对任何頁面的初次访问都将會是靜態的、预呈现的 HTML,以实现极快的加载速度和最佳的 SEO。然後頁面加载一个 JavaScript bundle,将頁面变成 Vue SPA (这被称为“激活”)。與 SPA 激活缓慢的常见假设不同,由于 Vue 3 良好的原始性能和编译优化,这个過程實際上非常快。在 PageSpeed Insights 上,典型的 VitePress 站點即使在网络速度较慢的低端移动设备上也能获得近乎完美的性能分数。
加载完成後可以快速切换
更重要的是,SPA 模型在首次加载後能够提升用户体验。用户在站點内導航时,不會再触發整个頁面的刷新。而是通過获取并动態更新頁面的内容来实现切换。VitePress 还會自动预加载视口范围内連結對應的頁面片段。这样一来,大部分情况下,用户在加载完成後就能立即浏览新頁面。
高效的交互
为了能够嵌入靜態 Markdown 中的动態 Vue 部分,每个 Markdown 頁面都被處理为 Vue 组件并编译成 JavaScript。这听起来可能效率低下,但 Vue 编译器足够聪明,可以将靜態和动態部分分开,从而最大限度地减少激活成本和有效负载大小。对于初始的頁面加载,靜態部分會自动从 JavaScript 有效负载中删除,并在激活期间跳過。
VuePress 又是什么?
VitePress 灵感来源于 VuePress。最初的 VuePress 1 基於 Vue 2 和 webpack。VitePress 则基於 Vue 3 和 Vite 開發,提供了更好的開發体验、更好的生产性能、更精美的默认主題和更灵活的自訂 API。
VitePress 和 VuePress 1 的 API 区别主要在于主題和自訂。如果你使用的是 VuePress 1 的默认主題,应该可以很方便地迁移到 VitePress。
并行维护两个 SSG 是难以持续的,因此 Vue 团队决定将 VitePress 作为长期维护并推荐的 SSG。现在 VuePress 1 已被弃用,VuePress 2 已移交给 VuePress 社区团队进行进一步開發和维护。