简介
尤大大又出手了，这次他带来了VitePress1.0，一个基于Vite和Vue前端框架构建的静态站点生成器（SSG）。它主要用于快速搭建静态网页项目，尤其适合开发文档较多的场景，同时也支持自定义主题开发官网、博客等项目。
- 内容优先，Markdown 至上
- Vue/VueUse/Pinia/Vite/Vitest 等官方文档，都是基于 VitePress 构建的。
- 官网地址:https://vitepress.dev/zh/guide/getting-started
性能
VitePress 构建时，会为站点创建一个 SSR（服务端渲染）的版本，然后通过虚拟访问每一条路径来渲染对应的 HTML。这种方案的灵感来源于 Nuxt 和 Gatsby 等项目。传统的 SSG 每次导航都会导致页面完全重载，VitePress 的 SSG 会在首次访问时提供静态 HTML，再变成了 SPA（单页应用程序）进行站内的后续导航，包括但不限于：
-
初始加载很快
-
加载完毕后快速切换
-
高效的交互
特性
-
Markdown支持：VitePress支持获取用Markdown编写的内容，并对其进行主题应用，最终生成可以轻松部署的静态HTML页面。
-
Vue组件使用：VitePress支持使用Vue组件进行开发，享受Vite的热更新功能。
-
自定义主题：VitePress支持自定义主题，具有标准Vite+Vue应用程序的开发体验。
-
单页应用程序：与许多传统的静态站点生成器不同，VitePress生成的站点实际上是一个单页应用程序（SPA）。对任何页面的初次访问都将是静态HTML，后续页面加载JavaScript，变成Vue SPA单页应用程序。用户在站点内浏览时，不会再次触发整个页面的刷新。
使用步骤
- 安装VitePress：
yarn add --dev vitepress
或
npm i vitepress --save
- 创建项目文件夹：
在你的项目根目录下创建一个放置页面的文件夹，例如，如果你要创建的是文档，那么可以创建一个名为 docs 的文件夹。
- 创建索引文件：
在项目最外层创建一个 index.md 文件。
- 添加脚本命令：
在你的项目根目录下的 package.json 文件中添加如下指令，如
"docs:dev": "vitepress dev docs", "docs:build": "vitepress build docs", "docs:serve": "vitepress serve docs"
- 启动项目：
yarn docs:dev
或
npm run docs:dev