阅读数:87 评论数:0

一、概述

VitePress是一个基于Vite和Vue的静态站点生成器，它通常用于编写文档。

二、使用方法

要在 VitePress 中配置组件文档，你需要遵循以下步骤：

1、安装VitePress

npm i vitepress --save

2、创建文档结构

在你的项目目录中创建一个 .vitepress 文件夹和一个 docs 文件夹。通常，你的文档文件（如 Markdown 文件）会放在 docs 文件夹中。

project/
├── .vitepress/
│   └── config.js
└── docs/
    ├── index.md
    └── components/
        └── your-component.md

3、配置VitePress

在 .vitepress 文件夹中创建 config.js 文件，用于配置站点标题、描述、主题配置等。

// .vitepress/config.js
module.exports = {
  title: 'Hello VitePress',
  // 首页描述
  description: 'Just playing around.'
}

4、编写组件文档

在 docs/components 文件夹中为每个组件创建一个 Markdown 文件。你可以使用 Vue 组件和 Markdown 混合内容。

# Your Component

## Usage

```vue
<template>
  <YourComponent />
</template>

<script>
import YourComponent from 'path-to-your-component';

export default {
  components: {
    YourComponent
  }
};
</script>

5、启用Vue组件支持

VitePress 默认支持在 Markdown 中使用 Vue 组件。你只需要在 Markdown 文件中导入并使用它们。

6、启动VitePress

在你的项目中运行 VitePress，它会启动一个本地服务器供你预览文档。

npx vitepress dev docs

需要注意的是这里的docs是根据你起的文件夹名字，如果你的名字是abc那么这里的命令应该是

"abc:dev": "vitepress dev abc"

或者在路下的package.json添加指令

"docs:dev": "vitepress dev docs", //启动命令
"docs:build": "vitepress build docs", //打包指令
"docs:serve": "vitepress serve docs" //测试运行打包后文件指令

7、构建静态站点

当你的文档准备好发布时，通过以下命令构建静态站点：

npx vitepress build docs

构建完成后，你会在 .vitepress/dist 文件夹中得到静态文件。

8、清缓存

# 删除 Vite 的缓存目录
rm -rf node_modules/.vite
rm -rf node_modules/.vitepress