VitePress 是一个基于 Vue 和 Vite 的静态网站生成器，特别适合用于创建文档网站。通过之前撰写 EasyEditor 的文档经验，我将带你了解 VitePress 的基本使用方法以及一些高级配置技巧。

什么是 VitePress？

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

快速开始

初始化

在终端中运行以下命令，初始化一个新的 VitePress 项目：

npx vitepress init

你会遇到以下提示，需要回答几个简单的问题：

┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?
│  ./docs
│
◇  Site title:
│  My Awesome Project
│
◇  Site description:
│  A VitePress Site
│
◇  Theme:
│  Default Theme
│
◇  Use TypeScript for config and theme files?
│  Yes
│
◇  Add VitePress npm scripts to package.json?
│  Yes
│
└  Done! Now run npm run docs:dev and start writing.

Tips:
- Make sure to add  docs/.vitepress/dist and  docs/.vitepress/cache to your .gitignore file.

这将创建一个名为 docs 的文件夹，并在其中生成基础配置文件和示例页面。

同时，package.json 中会自动添加以下脚本命令：

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

启动

进入项目目录，启动开发服务器：

pnpm docs:dev

现在，你可以在浏览器中访问 http://localhost:5173 查看你的文档网站了。

配置详解

基础配置

VitePress 的配置文件位于 .vitepress/config.mts。下面是一个简单的基础配置示例：