VitePress 学习笔记

VitePress 官网中文 —— https://vitepress.dev/zh/

什么是 VitePress？

VitePress 是由 Vite 和 Vue 驱动的静态站点生成器(SSG)。
VitePress 获取用 Markdown 编写的内容，对其应用主题，并生成可以轻松部署到任何地方的静态 HTML 页面。

VitePress 使用场景

• 文档
  VitePress 附带一个专为技术文档设计的默认主题。
• 博客、档案和营销网站
  VitePress 支持完全的自定义主题，具有标准 Vite + Vue 应用程序的开发体验。

了解更多，请查看 VitePress 是什么？

安装和运行

VitePress 官网快速开始：https://vitepress.dev/zh/guide/getting-started

npm

$ npm add -D vitepress    # 安装 VitePress

pnpm

$ pnpm add -D vitepress    # 安装 VitePress

yarn

$ yarn add -D vitepress    # 安装 VitePress

yarn(pnp)

$ yarn add -D vitepress vue    # 安装 VitePress

bun

$ bun add -D vitepress    # 安装 VitePress

npm

$ npx vitepress init    # VitePress 设置向导

pnpm

$ pnpm vitepress init    # VitePress 设置向导

yarn

$ yarn vitepress init    # VitePress 设置向导

bun

$ bun vitepress init    # VitePress 设置向导

npm

$ npm run docs:dev    # 启动本地开发服务器

pnpm

$ pnpm run docs:dev    # 启动本地开发服务器

yarn

$ yarn docs:dev    # 启动本地开发服务器

bun

$ bun run docs:dev    # 启动本地开发服务器

npm

$ npx vitepress dev docs    # 直接调用 VitePress 启动本地开发服务器

pnpm

$ pnpm vitepress dev docs    # 直接调用 VitePress 启动本地开发服务器

yarn

$ yarn vitepress dev docs    # 直接调用 VitePress 启动本地开发服务器

bun

$ bun vitepress dev docs    # 直接调用 VitePress 启动本地开发服务器

下一步

• 想要进一步了解 Markdown 文件是怎么映射到对应的 HTML，请继续阅读路由指南。

• 要了解有关可以在页面上执行的操作的更多信息，例如编写 Markdown 内容或使用 Vue 组件，请参见指南的“编写”部分。一个很好的起点是了解 Markdown 扩展。

Markdown 指南中文版 - 一份免费且开源的 Markdown 参考手册，详细讲解了 Markdown 这一简单、易用的文档格式化标记语言的用法。

• 要探索默认文档主题提供的功能，请查看默认主题配置参考。

• 如果想进一步自定义站点的外观，参见扩展默认主题或者构建自定义主题。

• 文档成形以后，务必阅读部署指南。

本地构建与测试

$ npm run docs:build    # 构建文档，输出目录 docs/.vitepress/dist

$ npm run docs:preview    # 启动本地静态 Web 服务，预览构建后的文档

# 直接调用 VitePress 启动本地静态 Web 服务（端口：8080），预览构建后的文档器
$ npx vitepress preview docs --port 8080