项目简介

VitePress 是由 Vue 团队官方维护的静态站点生成器，它基于 Vite 和 Vue 构建，专为技术文档、博客和轻量级网站设计。它继承了 Vite 的极速开发体验，同时提供了 Vue 的强大组件化能力，让你能够以优雅、高效的方式创建现代化的静态站点。

项目特色

  • 极速 HMR：得益于 Vite 的底层支持，修改内容后可实现毫秒级热更新，极大提升开发效率。
  • 简洁高效：默认配置简洁明了，无需复杂设置即可快速启动项目，同时支持高度自定义。
  • Vue 驱动：以 Vue 组件为核心，支持使用 Vue 的所有特性（如 Composition API、SFC 等）构建内容。
  • 内置 Markdown 支持：支持 GitHub Flavored Markdown，且可直接在 Markdown 中使用 Vue 组件。
  • 静态生成 + 服务端渲染：默认生成纯静态 HTML，也可通过 SSR 模式提升首屏加载性能。
  • 主题定制：提供默认主题，支持自定义主题颜色、布局和组件，满足个性化需求。
  • SEO 友好：生成的静态页面结构清晰，有利于搜索引擎收录。

项目搭建

1. 初始化项目

# 创建项目目录
mkdir my-vitepress-site && cd my-vitepress-site

# 初始化 package.json
npm init -y

# 安装依赖
npm install -D vitepress vue

2. 添加脚本命令

在 package.json 中添加以下脚本：

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

3. 创建文档内容

创建 docs 目录，并在其中添加 index.md 文件：

# Hello VitePress

这是一个基于 VitePress 构建的静态站点。

## 快速开始

- 安装依赖
- 启动开发服务器
- 编辑内容

4. 启动开发服务器

npm run docs:dev

访问 http://localhost:5173 即可看到你的站点。

5. 构建生产版本

npm run docs:build

构建后的静态文件会输出到 docs/.vitepress/dist 目录。

点评

VitePress 是一款集极速开发体验、Vue 组件化能力和静态站点高性能于一体的现代化工具，是技术文档和轻量级网站的理想选择。