One

主题

什么是VitePress ​

vitepress是什么 ​

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

官网

https://vitepress.dev/zh/

image-20250225121222364

使用场景 ​

  • 文档

    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 组件在静态内容中嵌入交互性。

vitepress特性 ​

与许多传统的 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 基于 Vue 2 和 webpack。借助 Vue 3 和 Vite，VitePress 提供了更好的开发体验、更好的生产性能、更精美的默认主题和更灵活的自定义 API。

VitePress 和 VuePress 之间的 API 区别主要在于主题和自定义。如果使用的是带有默认主题的 VuePress 1，迁移到 VitePress 应该相对简单。

VuePress 2 我们也投入了精力，它也支持 Vue 3 和 Vite，与 VuePress 1 的兼容性更好。但是，并行维护两个 SSG 是难以持续的，因此 Vue 团队决定将重点放在 VitePress，作为长期的主要 SSG 选择推荐。

vitepress和vuepress的区别 ​

VitePress 和 VuePress 都是基于 Vue.js 的静态站点生成器，但它们在一些关键点上有显著区别。以下是两者的详细对比：

1. 构建工具 ​

  • VitePress：

    • 基于 Vite，利用现代浏览器的原生 ES 模块支持，构建速度极快。
    • 支持热模块替换（HMR），开发体验流畅。

  • VuePress：

    • 基于 Webpack，构建速度相对较慢。

    • 虽然也支持 HMR，但性能不如 Vite。

      结论：VitePress 的构建速度更快，开发体验更优。

2. 开箱即用的功能 ​

  • VitePress：

    • 更轻量，核心功能较少，专注于文档生成。
    • 默认主题简洁，支持 Markdown 扩展和 Vue 组件。
    • 需要手动配置插件和主题扩展。

  • VuePress：

    • 功能更丰富，内置了更多的插件和主题。

    • 默认主题更适合博客和文档站点。

    • 插件生态系统更成熟。

      结论：VuePress 更适合需要开箱即用功能的用户，而 VitePress 更适合追求轻量和灵活性的用户。

3. 性能 ​

  • VitePress：

    • 利用 Vite 的按需加载和 ES 模块特性，页面加载速度更快。
    • 开发模式下几乎无延迟。

  • VuePress：

    • 由于基于 Webpack，页面加载速度较慢，尤其是在大型项目中。

    • 开发模式下的 HMR 速度相对较慢。

      结论：VitePress 在性能上具有明显优势。

4. 生态系统 ​

  • VitePress：

    • 生态系统相对较新，插件和主题较少。
    • 但可以与 Vite 生态无缝集成。

  • VuePress：

    • 生态系统成熟，插件和主题丰富。

    • 社区支持更广泛。

      结论：VuePress 在生态系统上更具优势。

5. 配置复杂度 ​

  • VitePress：

    • 配置更简单，适合 Vue 开发者。
    • 需要手动配置插件和主题。

  • VuePress：

    • 配置更复杂，但提供了更多开箱即用的功能。

    • 适合不需要深度定制的用户。

      结论：VitePress 的配置更灵活，适合有一定技术能力的开发者。

6. 未来发展趋势 ​

  • VitePress：

    • 作为 Vite 生态的一部分，未来可能成为主流。
    • 社区支持逐渐增加。

  • VuePress：

    • 目前仍是主流，但可能逐渐被 VitePress 取代。

      结论：VitePress 代表未来的趋势。

7. 使用场景 ​

  • VitePress：
    • 适合轻量级文档站点、技术博客、个人项目。
    • 适合追求性能和开发体验的开发者。
  • VuePress：
    • 适合需要丰富功能和成熟生态系统的项目。
    • 适合企业级文档站点、博客、知识库。

总结 ​

特性VitePressVuePress
构建工具Vite（极快）Webpack（较慢）
性能快，支持现代浏览器特性较慢，适合传统项目
功能轻量，需手动扩展功能丰富，开箱即用
生态系统较新，插件和主题较少成熟，插件和主题丰富
配置简单，适合开发者复杂，适合非技术用户
未来趋势代表未来趋势逐渐被 VitePress 取代
适用场景轻量级文档、技术博客、个人项目企业级文档、博客、知识库

选择建议 ​

  • 如果你追求性能、开发体验和轻量化，选择 VitePress。
  • 如果你需要丰富的功能和成熟的生态系统，选择 VuePress。