gojs с vuejs и webpack

Question

Я пытаюсь настроить простую диаграмму gojs в vuejs + webpack.Я установил gojs с помощью npm и импортировал его в свой проект в файле main.js: import go from 'gojs' Теперь моя проблема состоит в том, как заставить вещи работать в реализации компонента, это код компонента Diagram.vue:

<template>
   <div id="myDiagramDiv" style="width:300px; height:300px;"></div>
</template>

<script>
   export default {
      name: 'Diagram', 
      data: function () {
         return {
            nodeDataArray: [
               {key:1, text:"Alpha"},
               {key:2, text:"Beta"}
            ],
            linkDataArray: [
               {from:1, to:2}
            ]
         }
      },
      methods: {
         getUnits: function(){
            var $ = go.GraphObject.make;
            myDiagram = $(go.Diagram, "myDiagramDiv");
            myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
         }
      },
      mounted: function(){
         this.getUnits();
      }
}
</script>

компилируется без ошибок, но я вижу только белое пустое поле ...

Answer 1

моя проблема в том, как заставить вещи работать в реализации компонента

В gojs-проектах есть официальный (созданный командой GoJS) проект VueJS + Webpack + GoJSgithub, который вы можете использовать в качестве примера: https://github.com/NorthwoodsSoftware/GoJS-projects

Answer 2

Вы еще не инициализировали диаграмму .Обычно это делается путем вызова go.GraphObject.make(go.Diagram, theHTMLDivElement, { . . . options . . .})

. Существует полный, но простой пример использования GoJS в инфраструктуре Vue.js по адресу https://gojs.net/latest/samples/vue.html.

.