gojs 与 vuejs 和 webpack答案

【问题标题】：gojs with vuejs and webpackgojs 与 vuejs 和 webpack
【发布时间】：2019-03-08 04:18:47
【问题描述】：

我正在尝试在 vuejs + webpack 中设置一个简单的 gojs 图。我用 npm 安装了 gojs，并将它导入到我的项目中的 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>

它编译没有错误，但我只能看到一个白色的空框...

【问题讨论】：

尝试使用this.nodeDataArray和this.linkDataArray
尝试使用 linter。它会在没有 stackoverflow 问题的情况下向您显示错误。

标签： vue.js webpack gojs

【解决方案1】：

您还没有初始化图表。这通常通过调用 go.GraphObject.make(go.Diagram, theHTMLDivElement, { . . . options . . .})

来完成

https://gojs.net/latest/samples/vue.html 有一个在 Vue.js 框架中使用 GoJS 的完整而简单的示例。

【讨论】：

【解决方案2】：

我的问题是如何在组件实现中工作

gojs-projects github中有一个官方（GoJS团队制作的）VueJS + Webpack + GoJS项目，可以作为例子：https://github.com/NorthwoodsSoftware/GoJS-projects

【讨论】：