Nimble Prime Musketeers

    vuepress-plugin-demo-block-vue3

    1.1.0 • Public • Published

    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还需要lessless-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);
    });

    Install

    npm i vuepress-plugin-demo-block-vue3

    DownloadsWeekly Downloads

    60

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    22.1 kB

    Total Files

    9

    Last publish

    Collaborators

    • seepine