vitepress做自己的组件库文档

已于 2024-03-15 15:31:29 修改
阅读量547 收藏 8
点赞数 9
文章标签： 前端
于 2024-02-21 11:45:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hongkid/article/details/136206563
版权

 1.文档部分

参考：

GitHub - dewfall123/ruabick: Dumi like tool based on vitepress.

GitHub - 1006008051/vitepress-demoblock: 基于vitepress的组件库文档

Vitepress编写组件文档 - 简书

elementplus的文档原理也是基于vitepress，对markdown文档做一些拦截解析成自定义的代码展示组件 

 2.在线编码体验部分

参考： 

https://github.com/vuejs/core/tree/main/packages/sfc-playground

GitHub - element-plus/element-plus-playground: Element Plus Playground

底层都是下面这个@vue/repl 

GitHub - vuejs/repl: Vue SFC REPL as a Vue 3 component

搭建内置内部库的vue3组件在线解释交互器_vue/repl-CSDN博客

一个完整的项目，可以好好看看

Vue组件库设计 | Vue3组件在线交互解释器 - 掘金

https://github.com/varletjs/varlet/tree/dev/packages/varlet-ui-playground

下面这个将编辑功能直接集成在vitepress 

GitHub - liyao1520/promise-ui: 一个vue3组件库

直接在SFC playground上搭建elementplus的demo环境

demo

hongkid
关注
【Vitepress系列】-- 自定义组件及布局，配置tailwindcss、配置Markdown
weixin_40240616的博客
08-05 1127
vitepress中，如果内置的home、doc、page不满足需求，还可以自己写vue代码进行自定义这将在上下文中查找注册名为foo的组件。例如，可以在如果在页面中使用了自己的vue代码，那vue代码中有两个重要的API。useDatauseRouter如何其他vue组件编写方式一样，写相关的vue代码组件，然后就可以直接在md中使用它注意：这里的vue组件，要支持SSG哦如果团队中封装了vue的组件，那用vitepress做文件就太方便了，可以直接写md文件，文件中就可以展示组件。
Vitepress搭建组件库文档（下）—— 组件 Demo
youyacoder的博客
10-27 3784
上文 《Vitepress搭建组件库文档（上）—— 基本配置》已经讨论了 vitepress 搭建组件库文档的基本配置，包括站点 Logo、名称、首页home布局、顶部导航、左侧导航等。本文进入最重要的部分 —— 如何像那样一遍代码就可以展示组件的效果和源代码。
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
Mr Dear的博客
06-07 3164
使用VitePress静态网站生成器创建vue-amazing-ui组件库使用文档，并部署到GitHub
从零搭建一个组件库 -- 使用 vitepress 为组件编写文档
Wannaer的博客
04-13 563
【代码】从零搭建一个组件库 -- 使用 vitepress 为组件编写文档。
vitepress搭建UI组件库文档
九段刀客的博客
05-04 553
在src/components下写了一个最简单的组件。6、是否在package.json中添加配置文件。1、输入目录，这里我选择创建docs目录下。4、站点主题,这里我选择默认主题加自定义。在docs/index.md中引入。到这里初始化就完成了。
Vue3+Vite+Element-plus搭建组件库并使用Vitepress编辑组件库文档且发布到 npm并且部署 github pages（vitepress文档渲染.vue组件-推荐使用第二种）
wocwin的博客
02-07 8956
Vue3 + Vite +Ts+Element-plus搭建组件库并使用Vitepress编辑组件库文档且发布到 npm并且部署 github pages;Vitepress编辑基于Element-plus再次封装的Vue3基础组件库文档弃用vitepress-theme-demoblock，使用自己封装的Demo组件
使用vitepress构建组件库文档
iijik55的博客
03-02 4582
使用vitepress构建组件库文档 前期调研 Vitepress 官方文档：https://vitepress.vuejs.org/ Vitepress是在Vite之上构建的Vue驱动的静态站点生成器。 Vitepress 被称为“ Vuepress的小弟弟”，它比同类产品具有一些优势。 建立在Vite而非Webpack上，因此启动时间，热重装等更快 使用Vue3来减少JS的有效负载 轻量级 Vitepress 能够实现这些目标的一个原因是，它比Vuepress 更具体，而 Vue
Vitepress搭建组件库文档（上）—— 基本配置
youyacoder的博客
10-25 5050
在vite出现以前，vuepress是搭建组件库文档不错的工具，支持以 Markdown 方式编写文档。伴随着vite的发展，vitepress已经到了版本，很多博客还是基于0.x版本，1.0.0与0.22配置略有差别，尤其是一些vitepress插件不支持1.0.0版本，如 vitepress-theme-demo（用它可以方便的编写组件 demo）。虽然现在 1.0.0 还是alpha版本，咱也可以尝试使用，反正遇到什么坑就去填什么坑就可以了呗。
vitepress-rc:基于vitepress的文档工具，支持引入react组件，mdx扩展
04-12
vitepress-rc 基于vitepress的文档工具，支持引入react组件，mdx扩展
vue3 + vite + js 组件库框架搭建：（四）使用VitePress搭建组件库文档
l_____z______z的博客
02-02 674
首先在根目录下新建 docs 文件夹,并执行pnpm init,然后安装vitepress在docs 目录下运行下面是我的选项 ./就在此目录创建项目，网站标题和网站描述可以后期修改，使用的默认样式，不实用ts 不添加npm。
使用 VitePress@1.0.0-rc.36 编写组件库文档
yzjandyyyYYDS的博客
03-09 1072
vitepress的根目录是docs，其子目录public和脚手架项目中的public目录一样，都是共享资源目录，直接通过/xxx即可访问到public/xxx中的资源xxx。
【vue组件库搭建04】使用vitepress搭建站点并部署到github
m0_73884922的博客
07-06 1136
VitePress，将 Markdown 变成优雅的文档，只需几分钟
组件库系列三：编写组件库文档
weixin_51670675的博客
04-06 2849
文章目录vuepress介绍创建文档工程配置运行指令vuepress浏览器自动更新下载插件和依赖npm/yarn linkdocs文件夹.vuepress文件夹可收缩代码块效果展示 vuepress介绍 Vue 驱动的静态网站生成器 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。 享受 Vue + webpack 的开发体验，可以在 Markdown 中使用 Vue 组件，又可以使用 Vue 来开发自定义主题。 VuePress 会为每个页面预渲染生成静态的 HTML，同时，每个页
手把手从零搭建一个 vue3 组件库 (二)：为组件编写文档
weixin_43960320的博客
08-23 2272
手把手从零搭建一个 vue3 组件库 (二)：为组件编写文档 本期任务如下： 抽离 eslint-config 定义 css 变量 编写一个 Button 组件 使用 vitepress 为组件编写文
搭建组件库文档
qq_42257169的博客
08-21 493
前言 在我们开发完一个组件库的时候，需要有一个组件说明文档，文档页面是最直接的获取信息的窗口。而文档页一般包含了这些信息： 组件的描述 组件 Demo 示例的展示、描述和源码 组件的参数文档 组件说明文档是让其他人了解组件库的关键环节，包括组件库的适用范围（pc端，移动端，轻量级还是重量级），兼容浏览器的版本，设计原则和背景，以及社区生态，使用方法等。 关于如何开发组件库，可看这篇： heaven-ui 文档生成 这里推荐 vuepress ，可以快速帮我们完成组件库文档的建设。(https://vue
使用VuePress搭建自己的前端组件库文档
宁静致远
09-23 3890
使用VuePress搭建自己的前端组件库文档
如何在 VitePress 中增加一个全局自定义组件
最新发布
专注于全栈开发领域
07-31 1258
VitePress 是一个基于 Vue. js 和 Vite 构建的静态网站生成器，主要用于编写技术文档。快速构建：得益于 Vite 的高速编译和热更新功能，VitePress 可以提供极快的开发体验。易于配置：VitePress 的配置简单明了，开发者可以轻松上手。强大的插件支持：VitePress 支持丰富的插件，可以扩展其功能。通过本文的介绍，我们了解了在 VitePress 中如何创建和注册全局自定义组件，并分享了一些使用技巧。通过合理地使用全局组件，可以大大提升文档站点的开发效率和可维护性。
viteePress搭建组件文档
每天都要努力学习哦~~
11-02 778
每个组件库都有它们自己的文档。所以当我们开发完成我们自己的组件库必须也需要一个组件库文档。，所以下面就以作为示例来搭建一个文档吧。vitepress中文官网：VitePress | 由Vite、Vue驱动的静态网站生成器。
Vue3组件库开发项目实战——03封装Button组件/输出vitePress文档
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
05-14 1096
对于Button的封装是很简单的，核心就是button.tsx文件，创建一个可定制样式的按钮组件 UButton，根据传入的 props 动态渲染按钮的样式和行为。比较复杂的就是样式的定义，对于一个Button组件，我们写了很多css的样式，定义变量、全局的、局部的变量。 其实组件库开发就是干这几件事： 写样式、定义父子通信、插槽 然后组件库开发还涉及到组件的结构设计、文档编写、测试等方面。综合考虑这些方面，可以开发出功能完善、易用且易维护的组件库。
lib-docs-template：基于 VitePress 的 Vue.js 文档模板项目
1. VitePress文档系统 VitePress是一个以 Vue 驱动的静态网站生成器，专门为构建文档网站而设计。它默认支持 Markdown 格式的文档编写，允许用户使用简单的文本文件来创建具有丰富格式的文档页面。通过 VitePress，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值