VitePress

Vue 驱动的静态网站生成器

Vitepress官方文档

安装依赖

以books目录为例

mkdir books
cd books

git init
yarn init

yarn add -D vitepress

增加脚本

在 package.json 中添加一些 scripts

{
  "scripts": {
    "start": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:serve": "vitepress serve docs"
  }
}

添加.gitignore文件

node_modules
.temp
.cache

增加第一个文件

新建目录docs,目录下新建index.md

# Hello VitePress

开启本地调试

yarn start

增加菜单配置

在docs/.vitepress目录下，新建config.js

默认主题配置官方文档

export default {
  lang: 'en-US',
  title: 'VitePress',
  description: 'Vite & Vue powered static site generator.',

  // Theme related configurations.
  themeConfig: {
    logo: '/logo.svg',
    nav: [...],
    sidebar: { ... }
  }
}

Markdown

自定义容器

::: tip
这是一个提示
:::

::: warning
这是一个警告
:::

::: danger
这是一个危险警告
:::

::: details
这是一个 details 标签
:::

TIP

这是一个提示

WARNING

这是一个警告

DANGER

这是一个危险警告

Details

这是一个 details 标签

配置首页

官方文档

例子

---
layout: home

hero:
  name: VitePress
  text: Vite & Vue powered static site generator.
  tagline: Lorem ipsum...
  image:
    src: /logo.png
    alt: VitePress
  actions:
    - theme: brand
      text: Get Started
      link: /guide/what-is-vitepress
    - theme: alt
      text: View on GitHub
      link: https://github.com/vuejs/vitepress
---

通过设置hero,actions,features来配置个性化信息，效果同Vuepress官网首页

Vue 组件

使用组件时，用内置的ClientOnly包裹

<ClientOnly>
  <MyComponent />
</ClientOnly>

部署GitHub Pages

部署说明官方文档

新建.github/workflows/docs.yml

目录结构

├─ .github
│  └─ workflows
│     └─ docs.yml
├─ docs
│  ├─ .vitepress
│  │  └─ config.js
│  └─ index.md
├─ .gitignore
└─ package.json