# vuepress-plugin-demo-block-vue3

> Vuepress2 plugin for demo block support vue3.

Latest version **1.1.0** (published 2022-07-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install vuepress-plugin-demo-block-vue3
pnpm add vuepress-plugin-demo-block-vue3
yarn add vuepress-plugin-demo-block-vue3
bun add vuepress-plugin-demo-block-vue3
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2022-07-17 |
| First published | 2022-01-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 21.6 KB |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 7 |
| Author | seepine |
| Maintainers | seepine |
| Keywords | vuepress, vuepress2, vuepress-plugin, plugin, vue, vue3, demo, block, documentation |

## Links

- npm: https://www.npmjs.com/package/vuepress-plugin-demo-block-vue3
- Repository: https://github.com/seepine/vuepress-plugin-demo-block-vue3
- Issues: https://github.com/seepine/vuepress-plugin-demo-block-vue3/issues
- npm.io page: https://npm.io/package/vuepress-plugin-demo-block-vue3

## Dependencies (3)

- [escape-html](https://npm.io/package/escape-html.md) ~1.0.3
- [markdown-it](https://npm.io/package/markdown-it.md) ~13.0.0
- [markdown-it-container](https://npm.io/package/markdown-it-container.md) ~3.0.0

## Alternatives

- [@cantoo/pdf-lib](https://npm.io/package/@cantoo/pdf-lib.md) — 297.9K weekly downloads
- [datatables.net-buttons](https://npm.io/package/datatables.net-buttons.md) — 200.1K weekly downloads
- [@ckeditor/ckeditor5-export-pdf](https://npm.io/package/@ckeditor/ckeditor5-export-pdf.md) — 167.0K weekly downloads
- [scanbot-web-sdk](https://npm.io/package/scanbot-web-sdk.md) — 15.0K weekly downloads
- [@syncfusion/ej2-angular-pdfviewer](https://npm.io/package/@syncfusion/ej2-angular-pdfviewer.md) — 8.8K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2022-07-17
- 1.1.0-beta.1 — 2022-07-17
- 1.0.3 — 2022-02-05
- 1.0.2 — 2022-02-04
- 1.0.1 — 2022-02-04
- 1.0.0 — 2022-01-31

## README

# vuepress2-plugin-demo-block
## 介绍
基于Vuepress2的插件，它可以帮助你在编写组件库文档的时候增加示例代码和预览。

查看文档和示例：[https://demo-block.seepine.com](https://demo-block.seepine.com)或克隆项目运行

## 安装

### 安装 VuePress

请参考 Vuepress2 官方文档，[点此查看](https://v2.vuepress.vuejs.org/zh/guide/getting-started.html)

### 安装插件

使用 `yarn` 安装 `vuepress2-plugin-demo-block` 插件

```bash
yarn add vuepress2-plugin-demo-block -D
```

或者使用 `npm` 安装它：

```bash
npm i vuepress2-plugin-demo-block --save-dev
```

如果你的网络环境不佳，推荐使用 [cnpm](https://github.com/cnpm/cnpm)。

### 配置插件

打开 .vuepress/config.js 文件，然后在合适的位置引用插件：

- **配置扫描路径** `componentsDir`

```js
module.exports = {
  ...
  plugins: [[
    'vuepress2-plugin-demo-block',
    {
      componentsDir: path.resolve(__dirname, './../examples')
    }
  ]],
  ...
}
```
::: warning 注意
componentsDir 必传，为动态注册组件的基础路径，目录结构可参考 element-plus
:::

## 引入组件
可在`docs/.vuepress/clientAppEnhance.js`引入组件，需要注意的是，第三方库可能还需要依赖，例如`ant-design-vue`还需要`less`和`less-loader`，请自行安装

```js
import { defineClientAppEnhance } from "@vuepress/client";

// import Antd from "ant-design-vue";
// import "ant-design-vue/dist/antd.css";

// import ElementPlus from "element-plus";
// import "element-plus/dist/index.css";

// import ArcoVue from '@arco-design/web-vue';
// import ArcoVueIcon from '@arco-design/web-vue/es/icon';
// import '@arco-design/web-vue/dist/arco.css';

export default defineClientAppEnhance(({ app, router, siteData }) => {
  // app.use(Antd)
  // app.use(ElementPlus)
  // app.use(ArcoVue);
  // app.use(ArcoVueIcon);
});
```

---
_Source: https://npm.io/package/vuepress-plugin-demo-block-vue3 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._