从0到1搭建一个组件库-第5节课

五、开源库中的文参考视频：

视频：

【我要做开源】华为大佬亲授，Vue DevUI开源指南05：开源组件库中的文档建设，vitepress使用过程中的踩坑经历，克服这些困难你将收获多多！_哔哩哔哩_bilibili

文档：

【我要做开源】Vue DevUI开源指南05：给Vue3组件库添加VitePress文档系统 - 掘金

我的gitee：

https://gitee.com/shaoxiaohao/component-library-construction

---

目录

五、开源库中的文参考视频：

5.1文档建设--基础vitepress

2.建个文件夹和md文件，可以手动，也可以终端命令

3.在package.json 文件里增加 scripts 里边的参数，增加以下

4.本地启动，就可以看见了

​

5.2设置serbar---高级vitepress

1、配置serbar

 2、创建Button组件的文档

3.编写一个Button组件

4.引入button组件

5.启动服务器-->报错：React is not defined，vitepress中引入jsx插件

5.3设置demoblock ---vitepress再加个插件

最终文档是这样的

---

5.1文档建设--基础vitepress

1.在项目里打开终端，安装vitepress

yarn add -D vitepress

2.建个文件夹和md文件，可以手动，也可以终端命令

1）vite-demo/docs/index.md

 # Hello VitePress（手动建吧，命令建有点问题）

mkdir docs ; echo '# Hello VitePress' > docs/index.md

建个展示文档 

3.在package.json 文件里增加 scripts 里边的参数，增加以下

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

4.本地启动，就可以看见了

yarn docs:dev

5.2设置serbar---高级vitepress

至此，开源文档建设就基本完成了，但是

我们需要实现以下功能：

• 需要一个左侧菜单，用来展示我们有哪些组件
• 点击左侧菜单中的组件，可以展示这个组件的基本信息、Demo、API文档 像这样

开源文档样式图 

1、配置serbar

docs/.vitepress/config.ts  //给vitepress加一些默认的样式配置

const sidebar = {
  '/': [
    { text: '快速开始', link: '/' },
    {
      text: '通用',
      children: [
        { text: 'Button 按钮', link: '/components/button/' },
      ]
    },
    {
      text: '导航',
    },
    {
      text: '反馈',
    },
    {
      text: '数据录入',
    },
    {
      text: '数据展示',
    },
    {
      text: '布局',
    },
  ]
}

const config = {
  themeConfig: {
    sidebar,
  }
}

export default config

yarn docs:dev  试试，变成这样了

 2、创建Button组件的文档

404的原因是我们没有创建相应的文档，然后创建文档

docs/components/button/index.md

# Button 按钮

<d-button></d-button>

重启服务器

3.编写一个Button组件

devui/button/src/button.tsx

const Button = () => <div><button>Button 按钮</button></div>

export default Button

4.引入button组件

docs/.vitepress/theme/index.ts

import Theme from 'vitepress/dist/client/theme-default'
import Button from '../../../devui/button/src/button'

export default {
  ...Theme,
  enhanceApp({ app }) {
    app.component('d-button', Button)
  }
}

5.启动服务器-->报错：React is not defined，vitepress中引入jsx插件

安装插件

yarn add -D @vitejs/plugin-vue-jsx

引入插件

docs/vite.config.ts

import { defineConfig } from 'vite'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vueJsx()]
})

5.3设置demoblock ---vitepress再加个插件

至此，我们已经可以把写的组件显示出来了，解决下一个问题

展示组件demo和代码会重复的问题，最终展示的效果如下

1、安装

yarn add -D vitepress-theme-demoblock

2、注入

docs/.vitepress/config.js   

//这里是配置默认viteprss 的默认配置文件
import demoblock from 'vitepress-theme-demoblock'
const sidebar = {
    '/': [
      { text: '快速开始', link: '/' },
      {
        text: '通用',
        children: [
          { text: 'Button 按钮', link: '/components/button/' },
        ]
      },
      {
        text: '导航',
      },
      {
        text: '反馈',
      },
      {
        text: '数据录入',
      },
      {
        text: '数据展示',
      },
      {
        text: '布局',
      },
    ]
  }
  
  const config = {
    themeConfig: {
      sidebar,
    }, 
    markdown: {
      config: (md) => {
        // 这里可以使用 markdown-it 插件，vitepress-theme-demoblock就是基于此开发的
        const { demoBlockPlugin } = demoblock;
        md.use(demoBlockPlugin)
      }
    }
  }
  
  export default config
  

3、注册

docs/.vitepress/theme/index.ts

import Theme from 'vitepress/dist/client/theme-default';
import Button from '../../../devui/button/src/button';
import Demo from 'vitepress-theme-demoblock/components/Demo.vue';
import DemoBlock from 'vitepress-theme-demoblock/components/DemoBlock.vue';

// 主题样式
// import 'vitepress-theme-demoblock/theme/styles/index.css'
// 插件的组件，主要是demo组件


export default {
  ...Theme,
  enhanceApp({ app }) {
    app.component('d-button', Button);
    // vitepress-theme-block 注册demo-theme-block，给vue做配置，渲染组件的
    app.component("Demo", Demo);
    app.component("DemoBlock", DemoBlock);
  }
}

4、写md文档---展示demo+展示代码

docs/components/button/index.md

# Button 按钮a


:::demo 使用`size`、`style`属性来定义 Card 的样式。
```vue
    <template>
        <d-button></d-button>
    </template>
```

5、yarn docs:dev

最终文档是这样的