vuepress-demo-block/README.md

vuepress demo box

# vuepress-demo-block

> vuepress 文档示例插件

![JS gzip size](http://img.badgesize.io/https://unpkg.com/vuepress-demo-block/lib/index.js?compression=gzip&label=gzip%20size:%20JS)
[![Npm package](https://img.shields.io/npm/v/vuepress-demo-block.svg)](https://www.npmjs.org/package/vuepress-demo-block)
![Language](https://img.shields.io/badge/language-javascript-yellow.svg)
![License](https://img.shields.io/badge/license-MIT-000000.svg)

## 安装

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

```js
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-demo-block@version/lib/index.js' }],
    ['link', { rel: 'stylesheet', type: 'text/css', href: 'https://unpkg.com/vuepress-demo-block@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-demo-block-code-box language'
        )
        .replace(
          '<pre v-pre',
          `<pre v-pre data-type="code" data-code="${str}"`
        )
      } else {
        return render.apply(this, arguments)
      }
  };
}
```

## 开始使用

### 基本用法

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


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

### 单独设置在线示例的依赖

```vue
/* 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
中引入

```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-demo-block@version/lib/index.js' }],
    ['link', { rel: 'stylesheet', type: 'text/css', href: 'https://unpkg.com/vuepress-demo-block@version/lib/style.css' }]
  ],
  markdown: {
    config: md => {
      md.renderer.rules.fence = wrap(md.renderer.rules.fence)
    }
  }
}
```

settings.js 中可配置内容如下

```js
window.$vuepressDemoBlock = {
  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