VitePressSkill vitepress

VitePress是一个基于Vite和Vue.js的现代化静态站点生成器(SSG),专为构建高性能的文档网站、技术博客和营销页面而设计。它支持在Markdown中直接使用Vue组件,提供极速的热更新体验和内置的搜索功能,并可通过主题系统高度定制。核心关键词包括:静态站点生成器、Vite、Vue 3、文档工具、Markdown、前端开发、快速构建。

前端开发 0 次安装 10 次浏览 更新于 3/1/2026

name: vitepress description: VitePress静态站点生成器,基于Vite和Vue构建。适用于构建文档站点、配置主题或在Markdown中使用Vue组件。 metadata: author: Anthony Fu version: “2026.1.28” source: 生成自 https://github.com/vuejs/vitepress,脚本位于 https://github.com/antfu/skills

VitePress是一个基于Vite和Vue 3构建的静态站点生成器(SSG)。它接收Markdown内容,应用主题,并生成静态HTML,这些HTML会成为快速导航的单页应用(SPA)。非常适合文档、博客和营销网站。

主要特点:

  • 基于.md文件的文件路由
  • Vue组件可直接在Markdown中使用
  • 快速热模块替换(HMR),即时更新(<100ms)
  • 默认主题针对文档进行了优化
  • 内置搜索(本地或Algolia)

使用VitePress项目前:

  • 检查.vitepress/config.ts以获取站点配置
  • 查看.vitepress/theme/以获取自定义主题扩展
  • public/目录包含按原样提供的静态资源

此技能基于VitePress 1.x,生成于2026-01-28。

核心

主题 描述 参考链接
配置 配置文件设置、defineConfig、站点元数据 核心配置
命令行界面 命令行界面:dev、build、preview、init 核心命令行界面
路由 基于文件的路由、源目录、重写 核心路由
Markdown 前置元数据、容器、表格、锚点、包含 核心Markdown

功能

代码与内容

主题 描述 参考链接
代码块 语法高亮、行高亮、差异对比、聚焦 功能-代码块
Markdown中的Vue 组件、script setup、指令、模板 功能-Vue
数据加载 构建时数据加载器、createContentLoader 功能-数据加载
动态路由 从数据生成页面、路径加载器文件 功能-动态路由

主题

主题 描述 参考链接
主题配置 导航栏、侧边栏、搜索、社交链接、页脚 主题配置
自定义 CSS变量、插槽、字体、全局组件 主题自定义
自定义主题 从零开始构建主题、主题接口 主题自定义构建

高级

主题 描述 参考链接
国际化 多语言站点、区域设置配置 高级-国际化
SSR兼容性 服务器端渲染、ClientOnly、动态导入 高级-SSR

实践指南

主题 描述 参考链接
部署 GitHub Pages、Netlify、Vercel、Cloudflare、Nginx 实践指南-部署