上面这个可是一个「一边编辑一边预览效果的」组件哦,有了它就可以在文档里写 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 的文档