第一次搞这个玩意，感觉很新奇（自带黑夜模式哎）。就试着创建了一下试试

VitePress是 一个Vite 和 Vue 支持的静态站点生成器

VitePress 官网

VitePress Github

建立项目

目录结构大概这样

选择你想要建立的位置生成文件夹，就叫 docs_demo

先使用包管理器初始化项目 pnpm init

然后pnpm i -D vitepress vue

我装的时候，控制台提示我还应该再装一下这个依赖 @algolia/client-search@^4.9.1

那就 pnpm i -D @algolia/client-search@^4.9.1

接下来在项目里新建docs/index.md文档，里面随便写点什么。 我是直接拿的vitepress官网首页，哈哈

---
layout: home

title: VitePress
titleTemplate: Vite & Vue Powered Static Site Generator

hero:
  name: VitePress
  text: Vite & Vue Powered Static Site Generator
  tagline: Simple, powerful, and performant. Meet the modern SSG framework you've always wanted.
  actions:
    - theme: brand
      text: Get Started
      link: /guide/getting-started
    - theme: alt
      text: View on GitHub
      link: https://github.com/vuejs/vitepress

features:
  - title: "Vite: The DX that can't be beat"
    details: Feel the speed of Vite. Instant server start and lightning fast HMR that stays fast regardless of the app size.
  - title: Designed to be simplicity first
    details: With Markdown-centered content, it's built to help you focus on writing and deployed with minimum configuration.
  - title: Power of Vue meets Markdown
    details: Enhance your content with all the features of Vue in Markdown, while being able to customize your site with Vue.
  - title: Fully static yet still dynamic
    details: Go wild with true SSG + SPA architecture. Static on page load, but engage users with 100% interactivity from there.
---

下面在package.json里面把运行脚本加上

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

然后pnpm docs:dev就运行起来了。

接下来配置下目录

在docs 文件下新建 .vitepress 文件夹 再在 .vitepress 下新建 config.ts

config.ts

const nav = [{ text: "快速开始", link: "/components/dog/" }];

const sidebar = [
  {
    text: "动物",
    items: [
      { text: "Hello 修狗", link: "/components/dog/" },
      { text: "Hello 喵了个咪", link: "/components/cat/" },
    ],
  },
  {
    text: "数码",
    items: [{ text: "Phone", link: "/components/phone/" }],
  },
];

const config = {
  title: "Hello VitePress",
  description: "Hello VitePress",
  themeConfig: {
    siteTitle: "Hello VitePress",
    nav,
    sidebar,
  },
};

export default config;

里面的内容大概就是这些，其中 sidebar 就是左侧的菜单， nav 是顶部的菜单

sidebar 是一个数组，下面每一项都是一个大目录分类，每个分类可通过text设置名称、通过items设置子目录 nav 基本雷同，详细可以看看官网。 然后多建几个文档出来，里面随便写点什么，如下。

ok大功告成，下次写静态网站就会了哈哈

最后来看看效果