Methods of using jointjs in vue

I searched a lot of questions introduced in vue before, but I didn’t give a definite answer. After fiddling with them for two days, I finally figured it out and made a record.
First, I refer to an article from *Click me click me

After reading this article, you should at least roughly what to do. Let’s take a look at it in detail below:

First run npm install jointjs in vue project --save

Then in the entry file, mine, it is also possible to add the following two lines to the entry file, and use jquery as global variables

window.$ = require('jquery');
 = require('jointjs');

It should be noted here that relying on backbone, jquery and lodash, these files need to be introduced one by one when introducing them through script, but they are not required when passing through npm of vue. npm has been encapsulated by default.

It is not enough to introduce it in this way. You may encounter problems such as the graph being loaded normally but not being able to drag and drop. These problems are generally conflicting with the environment in your vue project, resulting in unreadable or read errors.

I installed element, iview, axios, vuex, and jquery in my original project. After installing it, jointjs could not load normally. Later, I rebuilt a project and only installed element, axios, and vuex. In order to avoid conflicts between jquery and jquery, jquery was not installed later.

Is this enough? Can you run the examples in the link above? Like this:

<template>
  <div>
    <h1>Home</h1>
    <div ></div>
  </div>
</template>

<script>
  export default {
    created() {
      let graph = new ;

      let paper = new ({
        el: $('#myholder'),
        width: 600,
        height: 200,
        model: graph,
        gridSize: 1
      });

      let rect = new ({
        position: { x: 100, y: 30 },
        size: { width: 100, height: 30 },
        attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } }
      });

      let rect2 = ();
      (300);

      let link = new ({
        source: { id:  },
        target: { id:  }
      });

      ([rect, rect2, link]);
    }
  }
</script>

NoNoNo, notice that the rendering is placed in the created life cycle. According to the vue life cycle, the el of the joint mounted div cannot be found: $('#myholder'), which means that the operation will report an error. My solution is to put the div a click, take the joint content out of the created, and put it in methods. It needs to be clicked to display. It is not perfect yet, and it is waiting for improvement (~￣▽￣)~

That is, the code will become like this:

<template>
  <div>
    <div  @click="click_joint"></div>
  </div>
</template>

<script>
  export default {
   methods:{
     click_joint() {
      let graph = new ;

      let paper = new ({
        el: $('#myholder'),
        width: 600,
        height: 200,
        model: graph,
        gridSize: 1
      });

      let rect = new ({
        position: { x: 100, y: 30 },
        size: { width: 100, height: 30 },
        attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } }
      });

      let rect2 = ();
      (300);

      let link = new ({
        source: { id:  },
        target: { id:  }
      });

      ([rect, rect2, link]);
    }
   }
  }
</script>

To point out, just install jointjs is required through npm, and you don’t need install lodash, backbone, jquery, or import files into the page. The author introduced it through script before. I tried it many times but it failed. I kept reading the file error. If other friends try it successfully, please communicate and share it.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.