上面这个可是一个「一边编辑一边预览效果的」组件哦,有了它就可以在文档里写 demo 啦,就像 react 官网里的 react playground 一样。支持 Vue 模板语法。
提供 UMD 和 CommonJS 两个版本,并且自己做了点尝试,结合之前开发的 docsify ——— 一个文档生成工具 —— 可以实现在 Markdown 文件里直接写 Vue 的 demo 。
# Demo
正常写 markdown 的内容,如果要写 Vue 组件 Demo 只需要这样做
<vuep template="#demo1"></vuep>
<script type="text/x-template" id="demo1">
<style>
.main {
color: #2c3e50;
}
.text {
color: #4fc08d;
}
</style>
<template>
<div class="main">
<h2> Hello <span class="text">{{ name }}</span>!</h2>
<h2>Features</h2>
<ul>
<li v-for="text in features">{{ text }}</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
name: 'Vuep',
features: [
'Vue component spec',
'Scoped style',
'UMD and CommonJS build'
]
}
}
}
</script>
</script>
具体用法可以参考 Vuep 的文档 😜