这是我参与「第五届青训营」伴学笔记创作活动的第11天

由于结营项目中需要编写演示文档，因此用到了VitePress，是之前没有接触过的框架。本篇来介绍什么是VitePress以及简单使用。

什么是VitePress

VitePress 是一个静态站点生成器（SSG）。它专为构建高性能的以内容为中心的网站而设计，例如您现在正在阅读的本文档。它还为 Vue.js、Vite等文档提供支持。简而言之，VitePress 获取用 Markdown编写的源内容，对其应用主题，并生成一个静态 HTML 页面（和必要的资产文件）目录，可以轻松部署到任何地方。

开发人员体验

vitepress的优势

• 基于vite而不是webpack，所有更快的启动时间，热重载等
• 使用vue3来减少js的有效负载

VitePress 附带了一个功能丰富的默认主题，专为文档目的而设计。它允许你以最小的努力启动像这样的漂亮文档站点，并且不需要任何特定于 Vue 的知识。

VitePress 还支持完全自定义的主题，具有标准 Vite + Vue 应用程序的开发人员体验。建立在 Vite 上也意味着您可以直接从其丰富的生态系统中利用 Vite 插件。这使得VitePress成为构建以内容为中心但也需要非平凡交互性的网站的理想选择。Vue.js 文档是这种定制的一个很好的例子。

VuePress

VitePress是VuePress的精神继承者。最初的 VuePress 基于 Vue 2 和 webpack。借助 Vue 3 和 Vite，VitePress 提供了明显更好的 DX、更好的制作性能、更精致的默认主题和更灵活的自定义 API。

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

VuePress 2也投入了精力，它也支持Vue 3和Vite，与VuePress 1的兼容性更高。然而，并行维护两个 SSG 是不可持续的，因此 Vue 团队决定将 VitePress 作为长期推荐的主要 SSG。

使用

1.创建并更改为新目录。

mkdir vitepress-starter

cd vitepress-starter

2.使用首选包管理器进行初始化。

npm init

3.安装 VitePress

npm install -D vitepress vue

4.创建第一个文档

 mkdir docs && echo '# Hello VitePress' > docs/index.md

启动开发环境

首先需要在package.json中添加脚本

{ ... "scripts": { "docs:dev": "vitepress dev docs", "docs:build": "vitepress build docs", "docs:preview": "vitepress preview docs" }, ... }

使用命令行访问文档

npm run docs:dev