vuep

VUEP（Vue Playground）

？用於使用實時編輯器和預覽的VUE組件的組件。

鏈接

• 文檔：https：//cinwell.com/vuep/
• 在線遊戲發現：https：//vuep.netlify.com

安裝

紗

yarn add vuep codemirror
# npm i vuep codemirror -S

HTML標籤

 <!-- Import theme -->
< link rel =" stylesheet " href =" //unpkg.com/vuep/dist/vuep.css " >

<!-- depend vue -->
< script src =" //unpkg.com/vue " > </ script >
< script src =" //unpkg.com/vuep " > </ script > 

快速開始

需要完整的（包括編譯器）的VUE構建

Webpack配置

 {
  alias : {
    'vue$' : 'vue/dist/vue.common'
  }
} 

 import Vue from 'vue'
import Vuep from 'vuep'
import 'vuep/dist/vuep.css'

Vue . use ( Vuep /*, { codemirror options } */ )
// or Vue.component('Vuep', Vuep)

new Vue ( {
  el : '#app' ,

  created : function ( ) {
    this . code = `
      <template>
        <div>Hello, {{ name }}!</div>
      </template>

      <script>
        module.exports = {
          data: function () {
            return { name: 'Vue' }
          }
        }
      </script>
    `
  }
} )

用法

 < div id =" app " >
  < vuep :template =" code " > </ vuep >
</ div >

用法b

您可以在HTML文件甚至Markdown文件中寫入。

 < div id =" app " >
  < vuep template =" #example " > </ vuep >
</ div >

< script v-pre type =" text/x-template " id =" example " >
  < template >
    < div > Hello, { { name } } ! </ div >
  </ template >

  < script >
    module . exports = {
      data : function ( ) {
        return { name : 'Vue' }
      }
    }
  </ script >
</ script >

範圍

您可以通過將對像傳遞到範圍屬性來自定義範圍。

該對象可以包含主範圍中可用的組件，以將它們包括在VUEP中。

• 功能。 JS ：要展示為VUEP的組件

 export default {
  props : {
    features : Array
  } ,
  template : `<div class="features">
<h3>Features</h3>
<ul>
  <li v-for="feature in features">{{ feature }}</li>
</ul>
</div>`
}

• app.js ：需要通過VUEP展示組件的應用程序

 import Vue from 'vue'

import Features from 'features' // Import component

new Vue ( {
  el : '#app' ,
  data : function ( ) {
    return {
      scope : { Features } , // Set the scope of vuep
      value : `
<template>
  <div>
    <features :features="features"></features>
  </div>
</template>

<script>
  export default {
    components: {
      Features // This variable is available through scope and can be used to register component
    },
    data () {
      return {
        features: [
          'Vue Single File Component support',
          'Scoped style',
          'UMD and CommonJS build',
          'Define JavaScript scope'
        ]
      }
    }
  }</script>`
      }
    }
  } )

• 應用模板：

 < div id =" app " >
  < vuep :value =" value " :scope =" scope " > </ vuep >
</ div > 

受到啟發

• https://facebook.github.io/react/
• https://github.com/formidablelabs/component-playground

貢獻

• 叉！
• 創建您的功能分支： git checkout -b my-new-feature
• 提交您的更改： git commit -am 'Add some feature'
• 推到分支機構： git push origin my-new-feature
• 提交拉動請求：D

發展

yarn && yarn dev
# npm i && npm run dev
open test.html

執照

麻省理工學院