为了实现组件效果预览及代码展示可折叠功能,使用了插件vuepress-plugin-demo-container

相关配置可参考官网说明文档

第一步 安装插件

npm i - D vuepress-plugin-demo-container

第二步 配置插件

config.js 文件夹里(.vupress目录下)配置插件

module.exports = {
plugins: ['demo-container']
}

第三步 创建components目录,新建md文件,用于展示组件

第四步 在md文件里使用语法 ::: demo [some comments] :::

::: demo
```html
<wb-button icon="download"></wb-button>
:::
``` >>>这里也有

第五步 新建enhanceApp.js(.vupress目录下)用于全局注册你的UI组件。

import wbButton from '../../src/wb-button'
export default ({ Vue}) => {
Vue.mixin({
mounted() {
Vue.component(wbButton.name, wbButton);
}
})
}

最后

特别注意点:

一定要动态引入你的组件,否则在本地运行vuepress不会出错,而当你打包部署时会报window is not defined错误,错误大概原因是

在开发完成执行build 的时候,由于一些第三方依赖包使用了浏览器API,如window 对象, vuepress 又是服务端渲染。服务端渲染没有window 对象,会导致build 出现如下错误。

补充:vue组件中动态引入js文件

vuepress搭建UI组件库文档踩坑篇的更多相关文章

  1. Web 前端 UI 组件库文档自动化方案 All In One

    Web 前端 UI 组件库文档自动化方案 All In One 需求 自动化 动态 好用 markdown element-ui 中示例和说明按照一定规则写在md文件中,调用md-loader将md文 ...

  2. Vitepress搭建组件库文档(上)—— 基本配置

    在 vite 出现以前,vuepress 是搭建组件库文档不错的工具,支持以 Markdown 方式编写文档.伴随着 vite 的发展,vitepress 已经到了 1.0.0-alpha.22 版本 ...

  3. 使用VitePress搭建及部署vue组件库文档

    每个组件库都有它们自己的文档.所以当我们开发完成我们自己的组件库必须也需要一个组件库文档.如果你还不了解如何搭建自己的组件库可以看这里->从零搭建Vue3组件库.看完这篇文章你就会发现原来搭建和 ...

  4. Vitepress搭建组件库文档(下)—— 组件 Demo

    上文 <Vitepress搭建组件库文档(上)-- 基本配置>已经讨论了 vitepress 搭建组件库文档的基本配置,包括站点 Logo.名称.首页 home 布局.顶部导航.左侧导航等 ...

  5. 使用dumi生成react组件库文档并发布到github pages

    周末两天玩了下号称西湖区东半球最牛逼的react文档站点生成工具dumi,顺带结合github pages生成了react-uni-comps文档站, 一套弄下来,感觉真香,现在还只是浅尝,高级的特性 ...

  6. ES添加文档 踩坑之 —— The number of object passed must be even but was [1]

    读取文件,获取json格式的数据doc, 然后使用 bulkRequestBuilder.add(client.prepareIndex(index, type, id).setSource(doc) ...

  7. Maven02 -学习总结&学习文档 -踩坑123

    maven在开发中的作用 ①自动添加第三方 jar 包 在今天的 JavaEE 开发领域,有大量的第三方框架和工具可以供我们使用.要使用这些 jar 包最简单的方法就是复制粘贴到 WEB-INF/li ...

  8. Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库

    Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库 文档 https://phonycode.github.io/wuss-weapp 扫码体验 使用微信扫一扫体验小程序组 ...

  9. 前端如何搭建vue UI组件库/封装插件(从零到有)

    需求 因之前是做外包项目居多,经常用到相同的组件,之前的办法是在一个项目中写一个组件,其他项目直接将compents下的组件复制,粘贴到项目中使用,缺点是维护起来,改一个项目,其他项目也需要修改,所以 ...

随机推荐

  1. @Qualifier 注解有什么用?

    当您创建多个相同类型的 bean 并希望仅使用属性装配其中一个 bean 时,您可 以使用@Qualifier 注解和 @Autowired 通过指定应该装配哪个确切的 bean 来消除歧义. 例如, ...

  2. 并发包下常见的同步工具类(CountDownLatch,CyclicBarrier,Semaphore)

    在实际开发中,碰上CPU密集且执行时间非常耗时的任务,通常我们会选择将该任务进行分割,以多线程方式同时执行若干个子任务,等这些子任务都执行完后再将所得的结果进行合并.这正是著名的map-reduce思 ...

  3. Spring MVC 框架有什么用?

    Spring Web MVC 框架提供 模型-视图-控制器 架构和随时可用的组件,用于开 发灵活且松散耦合的 Web 应用程序.MVC 模式有助于分离应用程序的不同方 面,如输入逻辑,业务逻辑和 UI ...

  4. 专家PID

    前面我们讨论了经典的数字PID控制算法及其常见的改进与补偿算法,基本已经覆盖了无模型和简单模型PID控制经典算法的大部.再接下来的我们将讨论智能PID控制,智能PID控制不同于常规意义下的智能控制,是 ...

  5. 安装Backstage.io应用

    Backstage介绍 What's Backstage? Backstage is an open platform for building developer portals. Powered ...

  6. 一行代码让微信小程序支持 cookie

    weapp-cookie 一行代码让微信小程序支持 cookie,传送门:github Intro 微信原生的 wx.request 网络请求接口并不支持传统的 Cookie,但有时候我们现有的后端接 ...

  7. SQL之总结(三)

    1.怎么在where指定多个值得问题? select * from tb_article where article_id in(10008,10009) 结果如下: 如果是字符串的话: select ...

  8. D2Admin 8月更新: 高级数据持久化|标签页右键|模块化等

    剧透:这次,D2Admin 带来了其它同类模板都没有的"花式"数据持久化功能,以及极少同类产品才有的标签页右键控制... 概述 D2Admin 7月份更新到了 1.1.5 版本 相 ...

  9. CentOS 7.9 网络配置

    vi /etc/sysconfig/network-scripts/ifcfg-ens33 (45条消息) CentOS 7.9 网络配置_$青的博客-CSDN博客_centos7.9网卡配置

  10. 在IntelliJ IDEA配置Tomcat

    1,点击Run---EDit Configurations... 2.点击左侧"+"号,找到Tomcat Server---Local(若是没有找到Tomcat Server 可以 ...