为了实现组件效果预览及代码展示可折叠功能,使用了插件vuepress-plugin-demo-container 相关配置可参考官网说明文档 第一步 安装插件 npm i - D vuepress-plugin-demo-container 第二步 配置插件 在config.js 文件夹里(.vupress目录下)配置插件 module.exports = { plugins: ['demo-container'] } 第三步 创建components目录,新建md文件,用于展示组件 第四步 在…

Web 前端 UI 组件库文档自动化方案 All In One 需求 自动化 动态 好用 markdown element-ui 中示例和说明按照一定规则写在md文件中,调用md-loader将md文件转成相应的页面,组件库维护者,只需要书写md文件即可自动地生成对应的文档页面. MMP, 一个简单的文档,添加了好多脚本,看的太累了,没有耐心了! Storybook https://storybook.js.org/ https://github.com/storybookjs/storyboo…

在 vite 出现以前,vuepress 是搭建组件库文档不错的工具,支持以 Markdown 方式编写文档.伴随着 vite 的发展,vitepress 已经到了 1.0.0-alpha.22 版本,很多博客还是基于 0.x 版本,1.0.0 与 0.22 配置略有差别,尤其是一些 vitepress 插件不支持 1.0.0 版本,如 vitepress-theme-demo(用它可以方便的编写组件 demo).虽然现在 1.0.0 还是 alpha 版本,咱也可以尝试使用,反正遇到什么坑就去…

每个组件库都有它们自己的文档.所以当我们开发完成我们自己的组件库必须也需要一个组件库文档.如果你还不了解如何搭建自己的组件库可以看这里->从零搭建Vue3组件库.看完这篇文章你就会发现原来搭建和部署一个组件库文档是那么的简单.当然部署也不需要你有自己的服务器,你只要有github即可.由于我们的组件库还没有完成,所以下面就以element-plus作为示例来搭建一个文档吧. 安装vitepress 首先新建文件夹就叫kittydocs,执行pnpm init初始化,然后安装vitepress p…

上文 <Vitepress搭建组件库文档(上)-- 基本配置>已经讨论了 vitepress 搭建组件库文档的基本配置,包括站点 Logo.名称.首页 home 布局.顶部导航.左侧导航等.本文进入最重要的部分 -- 如何像 Element Plus 那样一遍代码就可以展示组件的效果和源代码. 1 组件 Demo 的实现效果 vitepress 对 MarkDown 支持比较好,同时对 vue3 也支持较好.常见的在 MD 文档中展示 Demo 有两种方式: 在一个区块内展示,添加插件用来解析…

周末两天玩了下号称西湖区东半球最牛逼的react文档站点生成工具dumi,顺带结合github pages生成了react-uni-comps文档站, 一套弄下来,感觉真香,现在还只是浅尝,高级的特性还没玩完,文档还需继续打磨完整,不知道是不是东半球最牛逼,西湖全区应该无与伦比了 ,下面是当前文档站移动端和pc端预览截图(整套弄下来花了半天时间!) 桌面端效果(手机界面模拟/桌面端效果/自动根据ts生成的API表格文档) 手机效果(支持light/dark主题) 文档站点制作步骤如下: 安装 d…

读取文件,获取json格式的数据doc, 然后使用 bulkRequestBuilder.add(client.prepareIndex(index, type, id).setSource(doc)); 往ES中批量插入文档,接着就报下面这个异常错误: java.lang.IllegalArgumentException: The number of object passed must be even but was [1] 后来,花了点时间,才查到原因: ES 变更版本后,此处代码不适用,…

maven在开发中的作用 ①自动添加第三方 jar 包 在今天的 JavaEE 开发领域,有大量的第三方框架和工具可以供我们使用.要使用这些 jar 包最简单的方法就是复制粘贴到 WEB-INF/lib 目录下.但是这会导致每次创建一个新的工程就需要将 jar 包重复复制到 lib 目录下,从而造成工作区中存在大量重复的文件,让我们的工程显得很臃肿. 而使用 Maven 后每个 jar 包本身只在本地仓库中保存一份,需要 jar 包的工程只需要以坐标的方式简单的引用一下就可以了.不仅极大的节约了…

Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库 文档 https://phonycode.github.io/wuss-weapp 扫码体验 使用微信扫一扫体验小程序组件示例 演示图片 快速上手 在开始使用 Wuss Weapp 之前,你需要先阅读 微信小程序自定义组件 的相关文档. 如何使用 方法一 [推荐] (通过npm安装依赖并在小程序构建npm模块) 通过使用shell命令或git定位到当前小程序开发目录,然后使用npm或者yarn安装依赖. npm in…

需求 因之前是做外包项目居多,经常用到相同的组件,之前的办法是在一个项目中写一个组件,其他项目直接将compents下的组件复制,粘贴到项目中使用,缺点是维护起来,改一个项目,其他项目也需要修改,所以,自己研究准备去封装一个组件库, 前言 日常在项目中我们经常直接根据 npm install/ npm i 去安装插件/组件库 例如:npm i element-ui -S, npm install vux --save 内容 1.vue项目安装(如已安装,可略过此步骤) 全局安装webpack n…