目录
  • 安装vitepress
  • 目录结构
  • 文档首页
  • 配置
    • 导航栏配置
    • 侧边栏
  • 部署到GitHub Pages

    每个组件库都有它们自己的文档。所以当我们开发完成我们自己的组件库必须也需要一个组件库文档。如果你还不了解如何搭建自己的组件库可以看这里->从零搭建Vue3组件库。看完这篇文章你就会发现原来搭建和部署一个组件库文档是那么的简单。当然部署也不需要你有自己的服务器，你只要有github即可。由于我们的组件库还没有完成，所以下面就以element-plus作为示例来搭建一个文档吧。

    安装vitepress

    首先新建文件夹就叫kittydocs,执行pnpm init初始化，然后安装vitepress

    pnpm add vitepress -D

    在package.json添加一些script

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

    安装组件库element-plus

    pnpm i element-plus -S

    目录结构

    新建kittydocs目录，其中文件结构如下图

    使用VitePress搭建及部署vue组件库文档的示例详解

     

    • .vitepress/config.js为配置文件
    • .vitepress/theme/index.js为自定义主题
    • examples作为为组件示例目录
    • public是公共文件目录
    • index.md则是组件库文档的首页
    • gulild放我们组件指南文档

    文档首页

    首先我们按照官网的样式给我们组件库整个首页，在index.md文件中写入

    ---
    
layout: home
    

    title: Kitty
    
titleTemplate: 一个Vue3组件库
    

    hero:
    
  name: Kitty
    
  text: 一个Vue3组件库
    
  tagline: 没啥特点仅供学习
    
  image:
    
    src: /logo.png
    
    alt: Kitty
    
  actions:
    
    - theme: brand
    
      text: 开始
    
      link: /guide/
    
    - theme: alt
    
      text: 在 Gitee 上查看
    
      link: https://gitee.com/geeksdidi/kittyui
    

    features:
    
  - icon: 
    

			
    
	声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。