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 内声明的组件的方式有两种
将组件注册到 window.Vue 中,然后使用即可
将组件绑定到window上,然后在 demo 内注册组件
MIT