Vuep - 一个提供实时编辑并预览功能的组件

[qingv]

上面这个可是一个「一边编辑一边预览效果的」组件哦，有了它就可以在文档里写 demo 啦，就像 react 官网里的 react playground 一样。支持 Vue 模板语法。

• GitHub: https://github.com/QingWei-Li/vuep
• Demo: https://qingwei-li.github.io/vuep/

提供 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 的文档 😜