vuepress-plugin-vue-compdemo v1.0.0

简介

一个能生成和 element-ui 官网一样的组件演示效果的 vuepress 插件

起步

• 安装

npm i -D vuepress-plugin-compdoc

支持的版本

• 暂只支持：vuepress v1.x、v2.x版本

使用插件

• 在 vuepress 中引入插件

// .vuepress/config.js
module.exports = {
  plugins: [[require('vuepress-plugin-vue-compdemo')]]
}

• 识别的容器

:::demo 这里是描述
// ```js 
// 一些vue组件单文件的内容 
//```
:::

• 例如：

:::demo 在 Alert 组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。`closable`属性决定是否可关闭，接受`boolean`，默认为`true`。你可以设置`close-text`属性来代替右侧的关闭图标，注意：`close-text`必须为文本。设置`close`事件来设置关闭时的回调。
```js
<template>
  <div>
    <el-alert
      title="不可关闭的 alert"
      type="success"
      :closable="false">
    </el-alert>
    <el-alert
      title="自定义 close-text"
      type="info"
      close-text="知道了">
    </el-alert>
    <el-alert
      title="设置了回调的 alert"
      type="warning"
      @close="hello">
    </el-alert>
  </div>
</template>

<script>
  export default {
    methods: {
      hello() {
        alert('Hello World!');
      }
    }
  }
</script>
```
:::

• 编译后显示的效果：

• 具体的效果可以参考element-ui 官网

插件配置

• compItemList（array）: 需要用到的演示组件或依赖组件的导入配置项
  • isInstall（boolean）: 默认：false，是否该组的模块是以安装 vue 插件的形式导入，app.use(...)，否则 app.component(...)，取决于你导入的模块
  • isRequire（boolean）: 默认：false， 是否该组的模块是使用 require 导入，否则 import
  • pathList（array）: vue 组件单文件路径或 node_modules 的模块的名称
• stylePathList（array）: css样式导入，相当于 import 'element-plus/dist/index.css'，其他格式的样式导入的话取决于你是否装了对应的loader
• demoBlockName（string:） 默认：'demo'，识别 mrakdown 容器的名称 ::: ${demoBlockName}
• vuepressVersion：默认：2，vuepress的版本号，如果是v1.x，就填 1 即可

// .vuepress/config.js
module.exports = {
  plugins: [
    [
      // 导入插件
      require('vuepress-plugin-vue-compdemo'),
      {
        compItemList: [
          {
            // 是否是已安装vue插件的形式，app.use(...)，否则app.component(...)
            isInstall: true,
            // 是否是使用require导入，否则import
            isRequire: true,
            // vue组件文件路径或node_modules的模块的名称
            pathList: ['element-plus']
          }
        ],
        // 样式导入，相当于 import 'element-plus/dist/index.css'
        stylePathList: ['element-plus/dist/index.css'],
        // 识别mrakdown容器的名称 ::: ${demoBlockName}
        demoBlockName: 'demo',
        // vuepress的版本号
        vuepressVersion: 2
      }
    ]
  ]
}

常见问题

• Module parse failed: Identifier 'elementplus' has already been declared (11:6)，中止上一次运行，重新 npm run dev 就好了

• Cannot find module 'core-js/library/xxx'