vite+ts+monorepo从0搭建vue3组件库(七) vitepress编写组件库文档

安装

首先在根目录下新建site文件夹并执行pnpm init，安装vitepress和vue

pnpm init
pnpm install -D vitepress vue

安装完成之后，新建docs/index.md，这个是文档的首页

---
layout: home

title: dlx-ui
titleTemplate: 一个Vue3组件库

hero:
  name: dlx-ui
  text: 一个Vue3组件库
  tagline: 自己学习用，仅供参考
  image:
    src: /logo.png
    alt: dlx-ui
  actions:
    - theme: brand
      text: 开始
      link: /guide/
    - theme: alt
      text: 在 Gitee 上查看
      link: https://gitee.com/chen_pengchao/dlx-ui

features:
  - icon: 💡
    title: Vue3组件库
    details: 基于vite5.x打包和TypeScript开发
  - icon: 📦
    title: 仅供学习使用
    details: Vue3组件库开发学习，请勿用于实际生产项目
  - icon: 🛠️
    title: 按需引入
    details: 直接支持按需引入无需配置任何插件。
---

然后package.json中新增命令:

"scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs"
  },

执行pnpm run docs:dev,效果如下图：

导航栏和侧边栏配置

在docs/.vitepress下新建config.js,其中nav是导航栏配置，sidebar是侧边栏配置，具体可查看vitepress官方文档

// config.js

export default {
  themeConfig: {
    siteTitle: 'DLX UI',
    nav: [
      { text: '指南', link: '/guide/installation' },
      { text: '组件', link: '/components/button' },
    ],
    // 侧边栏
    sidebar: {
      '/guide/': [
        {
          items: [
            { text: '安装', link: '/guide/installation' },
            { text: '快速开始', link: '/guide/quickstart' },
          ],
        },
      ],
      '/components/': [
        {
          items: [
            { text: '按钮', link: '/components/button/' },
            { text: '标签', link: '/components/tag/' },
          ],
        },
      ],
    },
    socialLinks: [
      { icon: 'github', link: 'https://gitee.com/chen_pengchao/dlx-ui' },
    ],
  },
}

点击指南和组件分别跳转到对应的页面

点击指南

点击组件：

引入组件库

这里我们引入的是本地的组件库dlx-ui，所以在 pnpm 的工作空间pnpm-workspace.yaml新增一个site目录

packages:
  - "packages/**"
  - "play"
  - "site"

然后 site 目录下安装pnpm add dlx-ui,在 docs/.vitepress 下新建 theme/index.js引入我们的组件库，

注意：因为组件库目前只做了全局引入的方式，所以要引入组件的样式文件，import 'dlx-ui/lib/style.css',否则样式不生效

import DefaultTheme from 'vitepress/theme'
import Dlxui from 'dlx-ui'
import 'dlx-ui/lib/style.css'
export default {
  ...DefaultTheme,
  enhanceApp: async ({ app }) => {
    // app is the Vue 3 app instance from `createApp()`. router is VitePress'
    // custom router. `siteData`` is a `ref`` of current site-level metadata.
    app.use(Dlxui)
  },
}

回到 components/button/index.md 中直接使用我们的 button 组件试一下

// components/button/index.md 
<dlx-button type="success">成功按钮</dlx-button>
<dlx-button type="danger">危险按钮</dlx-button>

同时我们还可以新增代码展示效果,如将 button/index.md 改为

::: details 显示代码

<dlx-button type="success">成功按钮</dlx-button>
<dlx-button type="danger">危险按钮</dlx-button>

:::

属性

属性	类型	默认值	说明
type	string	'default'	按钮类型，可选值：'default'、'primary'、'success'、'warning'、'danger'
size	string	'medium'	按钮大小，可选值：'small'、'medium'、'large'
disabled	boolean	false	是否禁用按钮
loading	boolean	false	是否显示加载状态