从零搭建一个组件库 -- 使用 vitepress 为组件编写文档

使用 vitepress 编写组件文档

• packages 下创建 docs 目录

mkdir docs
cd docs
pnpm init
pnpm add -D vitepress

• 在 docs 下创建 index.md

---
layout: home

hero:
  name: Vangle
  text:
  tagline: 基于 Vue 3，面向设计师和开发者的组件库
  actions:
    - theme: brand
      text: Why Vangle
      link: /articles/组件库环境搭建
    - theme: alt
      text: 快速开始
      link: /component/button

features:
  - icon: ⚡️
    title: 这是一个闪电图标
    details: wawawa
  - icon: 🖖
    title: 这是一个手掌图标
    details: good...
  - icon: 🛠️
    title: 这是一个修理图标
    details: cocococo
---

• 在 package.json.添加一些 script 后运行 pnpm docs:dev

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

• 给 vitepress 添加配置，docs 目录下创建 .vitepress/config.ts，关于配置详情请参考官网

import type { UserConfig } from 'vitepress'

export const config: UserConfig = {
  title: 'Vangle',
  description: 'a Vue 3 based component library for designers and developers',
  themeConfig: {
    logo: '/images/vite.svg',
    footer: {
      message: 'Released under the MIT License.',
      copyright: 'Copyright © 2022-PRESENT vangleer and Vangle contributors'
    },
    algolia: {
      apiKey: 'your_api_key',
      indexName: 'index_name'
    },
    nav: [
      { text: '指南', link: '/guide/design' },
      { text: '组件', link: '/component/button' }
    ],
    socialLinks: [{ icon: 'github', link: 'https://github.com/vangleer' }],
    sidebar: {
      '/guide/': [],
      '/component/': [
        {
          text: 'Basic',
          items: [
            {
              text: 'Button',
              link: '/component/button'
            }
          ]
        }
      ]
    }
  }
}

export default config

• 创建 guide 和 component 目录，在 component 目录下编写组件文档，button.md
• 注意：文件的目录结构需要和 sidebar 的配置相对应