Demo Containeris aVuepress-basedplug-in, which can help you addVueexamples when writing documents. Its original intention is to reduce the difficulty of adding some related examples when writing component documents. Using Vuepress to write component examples has the following embarrassment: ...
第一步 安装插件 npmi- D vuepress-plugin-demo-container 第二步 配置插件 在config.js文件夹里(.vupress目录下)配置插件 module.exports= { plugins: ['demo-container'] } 第三步 创建components目录,新建md文件,用于展示组件 第四步 在md文件里使用语法 ::: demo [some comments] ::: ::: demo```...
安装Demo插件 这里我们会使用到一个vuepress-plugin-demo-container这个插件,使用以下命令安装 npm install vuepress-plugin-demo-container 然后在/docs/.vuepress/config.js文件中配置上该插件 module.exports = { // ... plugins: ['demo-container'], // 配置插件 markdown: {} } 认识enhanceApp.js 你有没...
关于最佳实践方案我提供了一个插件 vuepress-plugin-demo-container 来统一解决,插件的具体介绍、示例与使用文档 点此访问。 前言 什么是组件示例文档? 当你使用 Vue、React 或者其他语言编写了一个组件库,如 Element UI、Ant Design Vue 或是像我一样基于它们开发的业务封装库,都需要使用文档来支撑,而使用文档必然...
关于最佳实践方案我提供了一个插件vuepress-plugin-demo-container来统一解决,插件的具体介绍、示例与使用文档点此访问。 前言 什么是组件示例文档? 当你使用 Vue、React 或者其他语言编写了一个组件库,如Element UI、Ant Design Vue或是像我一样基于它们开发的业务封装库,都需要使用文档来支撑,而使用文档必然会包含代...
vuepress-plugin-demo-container 我使用的是 vuepress-plugin-demo-container,用法相对而言还算简单,虽然样式没那么符合我的心意,但是基本功能是有的。基本用法参照 快速上手 | Demo Container 大概长这样: 在vuepress 中使用 sass 由于项目中的 vue 组件都使用了 sass 样式预处理器,因此想正常引入组件,vuepress 还需...
版本:vuepress v1.9.9;vuepress-plugin-demo-container v^0.2.0 基于elementui v2.13.2、echarts图标库做的二次封装组件库; 组件库技术栈:vue 2.7.14 css预编译器stylus 1.环境准备 安装VuePress 安装为本地依赖 yarn add -D vuepress # npm install -D vuepress ...
Demo Container V2is aVuepress-basedplug-in, which can help you addVueexamples when writing documents. It can help you: Write an example to automatically generate component examples and code examples by the custom::: demosyntax; Support theimportsyntax in code example; ...
.theme-container.sidebar-open .sidebar { box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); border: 0; } .sidebar, .navbar { z-index: 10000; } .component-wrapper { border: 1px solid #ebebeb; border-radius: 3px; transition: .2s; .component-wrapper-demo { padding: 24px 24px 15px 24...
Demo Container 是一个基于 Vuepress 的插件,它可以帮助你在编写文档的时候增加 Vue 示例,它的诞生初衷是为了降低编写组件文档时增加一些相关示例的难度。 使用Vuepress 编写组件示例有以下尴尬之处: 组件示例和示例代码本质上一样,却需要写两遍; Vuepress 无法渲染 Markdown 中的 export default {} 代码块; Demo ...