VuePress 简介

VuePress 是由 Vue.js 支持的静态网站生成工具,它以 Markdown 为中心,常用于构建项目文档、个人博客,可以帮助你快速生成一个静态网站来展示内容。

VuePress 诞生的初衷是为了支持 Vue.js 及其子项目的文档需求,但是现在它已经在帮助大量用户构建他们的文档、博客和其他静态网站。

工作原理

VuePress 由两部分组成:

每一个由 VuePress 生成的页面都带有预渲染好的 HTML,因此具有非常好的加载性能和搜索引擎优化(SEO)。同时,一旦页面被加载,Vue 将接管这些静态内容,并将其转换成一个完整的单页应用(SPA),其他的页面则会只在用户浏览到的时候才按需加载。

事实上,一个 VuePress 网站是一个由 VueVue Routerwebpack 驱动的单页应用。如果你以前使用过 Vue 的话,当你在开发一个自定义主题的时候,你会感受到非常熟悉的开发体验,你甚至可以使用 Vue DevTools 去调试你的自定义主题。

在构建时,VuePress 会为应用创建一个服务端渲染(SSR)的版本,然后通过虚拟访问每一条路径来渲染对应的 HTML。这种做法的灵感来源于 Nuxtnuxt generate 命令,以及其他的一些项目,比如 Gatsby

VuePress 的版本

目前,VuePress 主要有两个版本:1.x 和 2.x 版本。VuePress v2 的核心思想和流程是和 v1 一致的,但 v2 API 经过了重新设计,更加标准化。

相对于 VuePress v1,v2 版本主要有以下改动和优化:

  • VuePress v2 现在使用 Vue 3,因此你要保证你的组件和其他客户端文件是适用于 Vue 3 的。
  • VuePress v2 是使用 TypeScript 开发的,因此它能提供更好的类型支持。(强烈推荐使用 TypeScript 来开发插件和主题)
  • VuePress v2 的配置文件也同样支持 TypeScript,你可以直接使用 .vuepress/config.ts
  • VuePress v2 支持使用 Webpack 和 Vite 作为打包工具。现在默认的打包工具是 Vite,但你仍然可以选择使用 Webpack。你甚至可以在开发模式使用 Vite 来获取更好的开发体验,而在构建模式使用 Webpack 来获取更好的浏览器兼容性。
  • VuePress v2 现在是纯 ESM 包,CommonJS 格式的配置文件不再被支持。

建议:如果你的项目正在使用 VuePress v1,且运行良好,可以继续使用该版本;如果你是 VuePress 的新用户,建议尝试 VuePress v2 版本。

注意:VuePress v1 的插件和主题与 VuePress v2 不兼容,需要将它们升级到与 v2 对应的版本方可使用。

应用案例

相关链接