vuepress搭建UI组件库文档踩坑篇

本文主要是介绍vuepress搭建UI组件库文档踩坑篇，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

为了实现组件效果预览及代码展示可折叠功能，使用了插件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组件库文档踩坑篇的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！