vuepress-playgeround
vuepress 文档示例插件
安装
在 project/docs/.vuepress/config.js
中加入以下修改。
需要注意的是,将 version 修改为当前版本。
moduleexports = 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: { mdrendererrulesfence = } { return { const tokens idx = arguments const token = tokensidx if ~tokencontent tokencontent = tokencontent let str = tokencontent tokencontent = tokencontent return render else return render };}
开始使用
基本用法
增加 /* 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
中引入
moduleexports = 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: { mdrendererrulesfence = }
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