使用 VitePress 搭建和部署 Vue 组件库文档

2024-01-19 13:43:58

前言

构建和部署一个组件库文档对于任何想要与他人分享和展示其组件的开发人员来说都是至关重要的。VitePress 是一个基于 Vite 和 VuePress 构建的现代文档生成器，专门用于为 Vue 组件库创建文档。使用 VitePress，你可以轻松创建交互式文档、演示和示例，并将其部署到 GitHub Pages 或其他平台上。

本教程将带你一步步使用 VitePress 搭建和部署一个 Vue 组件库文档。即使你没有任何文档编写经验，也可以轻松上手。我们从创建一个新的 VitePress 项目开始，然后添加我们的组件库代码，最后将其部署到 GitHub Pages。

搭建 VitePress 项目

首先，我们需要创建一个新的 VitePress 项目。你可以使用 VitePress CLI 全局安装 VitePress：

npm install -g vitepress

安装完成后，创建一个新目录，然后使用 VitePress CLI 初始化一个新项目：

vitepress new my-component-lib-docs
cd my-component-lib-docs

这将创建一个新的 VitePress 项目，其中包含所有必要的配置和文件。

添加组件库代码

接下来，我们需要添加我们的组件库代码到 VitePress 项目中。将你的组件库代码复制到 docs/.vitepress/components 目录中。

cp -r path/to/your-component-lib docs/.vitepress/components

确保将你的组件库代码组织成目录结构，每个组件都有自己的目录。

配置 VitePress

接下来，我们需要配置 VitePress 以识别我们的组件库代码。打开 docs/.vitepress/config.js 文件，并在 themeConfig 对象中添加以下配置：

module.exports = {
  themeConfig: {
    // ...
    componentLibraries: [
      {
        libName: 'my-component-lib',
        exampleDir: 'components',
      },
    ],
  },
};

此配置告诉 VitePress 在 docs/.vitepress/components 目录中查找我们的组件库代码。