vue dataflow editor

vue-dataflow 편집자

이봐, 당신은 https://github.com/jagenjo/litegraph.js를 사용할 수 있습니다.

vue- 블록을 기반으로합니다. @ghostiam의 프로젝트.

NPM

 npm i @krthr/vue-dataflow-editor

app.js 에서 lib를 가져옵니다

 // app.js or main.js, or the main file
// where you create the vue app
import Vue from "vue" ;
// other imports

import "@krthr/vue-dataflow-editor" ;
import "@krthr/vue-dataflow-editor/dist/vue-dataflow-editor.css" ;

const app = new Vue ( {
  /* ... */
} ) ; 

 < template >
  < vue-blocks-container
    class =" container "
    :blocks-content =" [] "
    :scene.sync =" {} "
  />
</ template > 

브라우저

 < body >
  < div id =" app " >
    < vue-blocks-container
      ref =" container "
      :blocks-content =" [] "
      :scene.sync =" {} "
      class =" container "
    />
  </ div >

  < script src =" https://cdn.jsdelivr.net/npm/vue/dist/vue.js " > </ script >
  < script src =" https://unpkg.com/@krthr/vue-dataflow-editor@latest/dist/vue-dataflow-editor.umd.min.js " > </ script >
  < script >
    new Vue ( {
      el : "#app" ,

      // ...
    } ) ;
  </ script >
</ body >