vuepress-playgeround

vuepress 文档示例插件

安装

在 project/docs/.vuepress/config.js 中加入以下修改。 需要注意的是，将 version 修改为当前版本。

module.exports = {
  head: [
    ['script', { src: 'https://unpkg.com/vue/dist/vue.min.js' }],
    ['script', { src: 'https://unpkg.com/babel-standalone/babel.min.js' }],
    ['script', { src: 'https://unpkg.com/vuepress-playground@version/lib/index.js' }],
    ['link', { rel: 'stylesheet', type: 'text/css', href: 'https://unpkg.com/vuepress-playground@version/lib/style.css' }]
  ],
  markdown: {
    config: md => {
      md.renderer.rules.fence = wrap(md.renderer.rules.fence)
    }
  }
}

function wrap (render) {
  return function() {
    const [tokens, idx] = arguments
    const token = tokens[idx]
    if (~token.content.indexOf('/* vue */')) {
      token.content = token.content.replace(/\/\*\s*vue\s*\*\//gm, '').trim()
      let str = token.content
        .replace(/"/g, '##double-quotes##')
        .replace(/\n/g, '##line-break##')
      token.content = token.content
        .replace(/<js-lib>([\s\S]+)<\/js-lib>/, '')
        .replace(/<css-lib>([\s\S]+)<\/css-lib>/, '')
        .trim()
      return render.apply(this, arguments)
        .replace(
          'div class="language',
          'div class="vuepress-playground-code-box language'
        )
        .replace(
          '<pre v-pre',
          `<pre v-pre data-type="code" data-code="${str}"`
        )
      } else {
        return render.apply(this, arguments)
      }
  };
}

开始使用

基本用法

增加 /* vue */ 注释的代码会被解析

/* vue */
<template>
  <div class="box">
    Hello {{ message }}
  </div>
</template>
<script> 
export default {
  data () {
    return {
      message: 'World'
    }
  }
}
</script>
<style>
.box {
  color: red;
}
</style>

单独设置在线示例的依赖

/* vue */
<js-lib>
https://unpkg.com/jquery
</js-lib>
<css-lib>
https://unpkg.com/v-charts/lib/style.css
</css-lib>
<template>
  <div class="box">
    Hello {{ message }}
  </div>
</template>
<script> 
export default {
  data () {
    return {
      message: 'World'
    }
  }
}
</script>
<style>
.box {
  color: red;
}
</style>

默认配置

在 .vuepress 文件夹下增加 public 目录并创建 settings.js 文件，然后在 config.js 中引入

module.exports = {
  head: [
    ['script', { src: './settings.js' }],
    ['script', { src: 'https://unpkg.com/vue/dist/vue.min.js' }],
    ['script', { src: 'https://unpkg.com/babel-standalone/babel.min.js' }],
    ['script', { src: 'https://unpkg.com/vuepress-playground@version/lib/index.js' }],
    ['link', { rel: 'stylesheet', type: 'text/css', href: 'https://unpkg.com/vuepress-playground@version/lib/style.css' }]
  ],
  markdown: {
    config: md => {
      md.renderer.rules.fence = wrap(md.renderer.rules.fence)
    }
  }
}

settings.js 中可配置内容如下

window.$vuepressPlayground = {
  jsLib: ['http://xxx'], // 全局设置的在线示例(jsfiddle, codepen)中的js依赖
  cssLib: ['http://xxx'], // 全局设置的在线示例(jsfiddle, codepen)中的css依赖
  vue: 'http://xxx', // 全局设置的在线示例(jsfiddle, codepen)中的vue依赖
  jsfiddle: true, // 是否显示 jsfiddle 链接
  codepen: true // 是否显示 vue 链接
}

使用外部组件

使用非 demo 内声明的组件的方式有两种

1. 全局注册：

将组件注册到 window.Vue 中，然后使用即可

2. 示例内注册

将组件绑定到window上，然后在 demo 内注册组件

License

MIT