Package Exports

vuepress-plugin-demo-block-vue3
vuepress-plugin-demo-block-vue3/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vuepress-plugin-demo-block-vue3) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vuepress2-plugin-demo-block

介绍

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

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

安装

安装 VuePress

请参考 Vuepress2 官方文档，点此查看

安装插件

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

yarn add vuepress2-plugin-demo-block -D

或者使用 npm 安装它：

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

如果你的网络环境不佳，推荐使用 cnpm。

配置插件

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

配置扫描路径 componentsDir

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，请自行安装

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);
});