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

目录
  • 安装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/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:
    title: Vue3组件库
    details: 基于vite打包和TypeScript开发
  - icon:
    title: 仅供学习使用
    details: 倾向于Vue3组件库的学习，请勿用于实际生产项目
  - icon:
赞 (0)

相关推荐

  • 将Vue组件库更换为按需加载的方法步骤

    本文介绍了将Vue组件库更换为按需加载的方法步骤,分享给大家,具体如下: 按需加载DEMO仓库地址 背景 我司前端团队拥有一套支撑公司业务系统的UI组件库,经过多次迭代后,组件库体积非常庞大. 组件库依赖在npm上管理,组件库以项目根目录的 index.js 作为出口导出,文件中导入了项目中所有的组件,并提供组件安装方法. index.js import Button from "./button"; import Table from "./table"; imp

  • vue3.0 移动端二次封装van-uploader实现上传图片(vant组件库)

    vue3.0 移动端二次封装van-uploader实现上传图片(vant组件库)

    1.前提:业务需求,最多上传6张图片,并可以实现本地预览 2.解决方法:使用vant组件库中的van-uploader实现 3.代码实现 template <div class="upload-oss"> <van-uploader :after-read="onRead" :before-read="beforeRead" :accept="fileType" v-model="fileList&

  • vue移动端项目vant组件库之tag详解

    vue移动端项目vant组件库之tag详解

    目录 vant组件库之tag tag标签选中(类型选择,分类选择) vant组件库之tag 直接上代码 <template>   <div class="pd50">     <!-- Tag标签的属性与Button按钮的大体相同 -->     <!-- 基础用法          其他第三方ui库的颜色可能不一致     -->     <h2>基础用法</h2>     <van-tag type=&q

  • 使用vue3+TS实现简易组件库的全过程

    目录 前置 组件编写 dropdown form 验证 总结 前置 首先下载vue-cli,搭建我们的环境,vue-create-luckyUi,选择vue3和TypeScript .在src目录下创建package作为组件目录.再安装bootstrap,用bootstrap里面的样式来完成我们的组件. 组件编写 dropdown 首先查看boorstrap文档,是这样用的 <div class="dropdown"> <button class="btn

  • Vue组件库ElementUI实现表格加载树形数据教程

    Vue组件库ElementUI实现表格加载树形数据教程

    ElementUI实现表格树形列表加载教程,供大家参考,具体内容如下 Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助网站快速成型 关键代码,在el-table添加属性, :tree-props="{children: 'children'}" ,注意row必须命名为children,官网也进行了说明: 支持树类型的数据的显示.当 row 中包含 children 字

  • vue3如何按需加载第三方组件库详解

    vue3如何按需加载第三方组件库详解

    前言 以Element Plus为例,配置按需加载组件和样式. 环境 vue3.0.5 vite2.3.3 安装 Element Plus yarn add element-plus # OR npm install element-plus --save 完整引入 import { createApp } from 'vue' import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.c

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

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

    目录 安装vitepress 目录结构 文档首页 配置 导航栏配置 侧边栏 部署到GitHub Pages 每个组件库都有它们自己的文档.所以当我们开发完成我们自己的组件库必须也需要一个组件库文档.如果你还不了解如何搭建自己的组件库可以看这里->从零搭建Vue3组件库.看完这篇文章你就会发现原来搭建和部署一个组件库文档是那么的简单.当然部署也不需要你有自己的服务器,你只要有github即可.由于我们的组件库还没有完成,所以下面就以element-plus作为示例来搭建一个文档吧. 安装vitep

  • vue组件生命周期钩子使用示例详解

    vue组件生命周期钩子使用示例详解

    目录 组件生命周期图 组件生命周期钩子 1.beforeCreate 2.created 3.beforeMount 4.mounted 5.beforeUpdate 6.updated 7.activated 8.deactivated 9.beforeDestroy 10.destroyed 11.errorCaptured 组件生命周期图 组件生命周期钩子 所有的生命周期钩子自动绑定 一.组件的生命周期:一个组件从创建到销毁的整个过程 二.生命周期钩子:在一个组件生命周期中,会有很多特殊的

  • Vue3搭建组件库开发环境的示例详解

    Vue3搭建组件库开发环境的示例详解

    目录 1 packages 目录 1.1 foo 目录 1.2 yyg-demo-ui 目录 2 实现 foo 示例组件 2.1 初始化 package.json 2.2 初始化 foo 目录结构 2.3 定义 foo 组件的 props 2.4 实现 foo 组件 2.5 定义 foo 组件入口文件 3 实现 yyg-demo-ui 3.1 初始化 package.json 3.2 安装依赖 3.3 定义入口文件 前文已经初始化了 workspace-root,从本文开始就需要依次搭建组件库.

  • Vue组件实现卡片动画倒计时示例详解

    Vue组件实现卡片动画倒计时示例详解

    目录 前言 需求拆解 组件设计思路 具体开发 animate-clock.vue animate-card 项目中使用 后记 前言 最近有朋友在做投票的项目,里面有用到一个倒计时的组件,还想要个动画效果.cv大法浸染多年的我,首先想到的是直接找个现有的组件. 通过一通搜索,看上的只有一个 vue2-flip-countdown,但是当我要修改大小和颜色的时候发现改不了,从而直接把源码拉到项目里面,改起来也挺麻烦. 而且,在搜索大法运行几个周天以后,其实心理已经有了一个倒计时开发整体思路,便决定自

  • vue组件之间的数据传递方法详解

    (1)props属性: 在父组件中,可以通过子组件标签属性的形式将数据或者函数传给子组件,子组件通过props去读取父组件传过来的数据 用法 父组件传数据给子组件: 一般的属性值都是用来给子组件展示的 子组件传数据给父组件 属性值为函数类型的,一般是用来子组件向父组件传递数据,子组件通过调用父组件传过来的函数,可以修改父组件的状态数据 缺点: 隔层组件间传递: 必须逐层传递(麻烦) 兄弟组件间: 必须借助父组件(麻烦) 注意: //子组件获取父组件传过来的值 props: { obj: {//o

  • Vue组件化(ref,props, mixin,.插件)详解

    Vue组件化(ref,props, mixin,.插件)详解

    目录 1.ref属性 2.props配置项 props总结 3.mixin混入 3.1.局部混入 3.2.全局混入 mixin混入总结 4.插件 插件总结 1.ref属性 被用来给元素或子组件注册引用信息(id的替代者) 应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc) 使用方式: 打标识:<h1 ref="xxx">.....</h1>或 <School ref="xxx"></Schoo

  • react 组件实现无缝轮播示例详解

    react 组件实现无缝轮播示例详解

    目录 正文 无缝轮播 实现思路 构思使用时代码结构 Carousel组件 CarouselItem组件 完善组件 完成小圆点 正文 需求是做一个无缝轮播图,我说这不是有很多现成的轮子吗?后来了解到他有一个特殊的需求,他要求小圆点需要在轮播图外面,因为现在大部分插件都是将小圆点写在轮播图内部的,这对于不了解插件内部结构的小伙伴确实不知道如何修改. 很久没有写插件的我准备写一个插件(react) 无缝轮播 无缝轮播从最后一张到第一张的过程中不会原路返回,它就像轮子似的,从结束到开始是无缝连接的,非常

  • vue electron实现无边框窗口示例详解

    vue electron实现无边框窗口示例详解

    目录 一.前言 二.实现方案 1.创建无边框窗口 2.创建windows窗口控件组件 三.后记 一.前言 无边框窗口是不带外壳(包括窗口边框.工具栏等),只含有网页内容的窗口.对于一个产品来讲,桌面应用带边框的很少,因为丑(我们的UI觉得--与我无关-.-).因此我们就来展开说下,在做无边框窗口时候需要注意的事项以及我踩过的坑. 二.实现方案 1.创建无边框窗口 要创建无边框窗口,只需在 BrowserWindow的 options 中将 frame 设置为 false: const { Bro

  • vue整合项目中百度API示例详解

    目录 官网介绍 申请密钥 官方示例 项目实战 创建地图 获取经纬度 创建Map实例 两个坐标点之间的距离 查询地点信息 Vue项目中整合百度API获取地理位置的方法 组件中使用 vue-baidu-map 百度地图官方vue组件 官网介绍 百度地图 JavaScript API 是一套由 JavaScript 语言编写的应用程序接口 可帮助您在网站中,构建功能丰富交互性强的地图应用 支持PC端和移动端,基于浏览器的地图应用开发,且支持HTML5特性的地图开发 官网传送门 百度地图JavaScri

  • Vue3之元素和组件的动画切换实现示例详解

    目录 前言 实例解析 元素间的动画切换 组件间的动画切换 总结 前言 当我们使用某个软件或者网站完成一些交互的时候,会发现做得很好的网站和软件都少不了动画的润色,完成的功能都是从一个界面跳转到另一个界面,但是加动画和不加动画完全是两种不同的体验,而且动画还可以遮住一些缺陷,比如相机预览从16:9切换到4:3时会出现黑边的情况,这时加一个转场动画,用户就不会看到这个黑边了,同样在网站开发中如果说加载的另一个页面网络不太好时,我们可以使用一个加载动画,让用户感觉当前系统仍然正常.不会出现“卡死”的假

随机推荐