devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

使用VitePress搭建vue组件库文档_vitepress中文文档

作者：从前慢现在也慢 | 2024-06-21 00:46:08

赞

踩

vitepress中文文档

每个组件库都有它们自己的文档。所以当我们开发完成我们自己的组件库必须也需要一个组件库文档。，所以下面就以element-plus作为示例来搭建一个文档吧。

vitepress中文官网：https://process1024.github.io/vitepress/

安装vitepress

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

pnpm add vitepress -D

在 package.json添加一些script

  1. "scripts": {
  2.     "docs:dev": "vitepress dev docs",
  3.     "docs:build": "vitepress build docs",
  4.     "docs:serve": "vitepress serve docs"
  5.   }

安装组件库element-plus

安装组件库element-plus

目录结构

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

  • .vitepress/config.js为配置文件

  • .vitepress/theme/index.js为自定义主题

  • examples作为为组件示例目录

  • public是公共文件目录

  • index.md则是组件库文档的首页

  • gulild放我们组件指南文档

文档首页

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

  1. layout: home
  2.  
  3. title: Kitty
  4. titleTemplate: 一个Vue3组件库
  5.  
  6. hero:
  7.   name: Vue3组件库
  8.   text: 一个Vue3组件库
  9.   tagline: 没啥特点仅供学习
  10.   image:
  11.     src: /logo.png
  12.     alt: Kitty
  13.   actions:
  14.     - theme: brand
  15.       text: 开始
  16.       link: /guide/
  17.     - theme: alt
  18.       text: 在 Gitee 上查看
  19.       link: https://gitee.com/geeksdidi/kittyui
  20.  
  21. features:
  22.   - icon: 
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/741420
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。