在vue中引入joint.js的题目，之前在网上搜了许多，都没有给出一个确实的答案，捣鼓了两天终究弄邃晓了，做个纪录。
起首，我参考了一篇来自stackoverflow的文章点我点我
看完这篇文章，人人应当最少大抵怎样做了，下面我们来详细看一下：

• 起首在vue项目中运转npm install jointjs --save
• 然后在进口文件，我的是main.js，也有多是app.js中到场下面两行，把joint.js和jquery作为全局变量

  window.$ = require(‘jquery’);
  window.joint = require(‘jointjs’);

这里须要注重的是，joint.js依靠backbone、jquery和lodash，在经由过程script体式格局引入时，须要逐一引入这些文件，但经由过程vue的npm时不须要，npm引入的joint.js已默许封装好了这些。
经由过程如许引入还不够，可能会碰到图能够平常加载，但没法拖拽的题目，碰到这些题目平常是joint.js和本身vue项目中的环境争执了，致使没法读取或许读取毛病。

我本来的项目中装置了element、iview、axios、vuex、jquery，再装置joint.js后，jointjs没法平常加载，厥后从新建了一个项目，只装置了element、axios、vuex，为防止jquery和joint.js中的jquery争执，厥后没有装jquery。

如许就好了么？就能够运转上文链接中的例子了么？像如许：

<template>
    <div>
        <h1>Home</h1>
        <div id="myholder"></div>
    </div>
</template>

<script>
    export default {
        created() {
            let graph = new joint.dia.Graph;

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

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

            let rect2 = rect.clone();
            rect2.translate(300);

            let link = new joint.dia.Link({
                source: { id: rect.id },
                target: { id: rect2.id }
            });

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

NoNoNo，注重到这里是把衬着放在了created的生命周期里，依据vue的生命周期，是没法找到joint的挂载div的el: $('#myholder')，也就是说，运转会报错，我的解决方法是把div放了一个click，把joint的内容从created中拿出，放在methods中，须要点击一下才可显现哦，还不太圆满，以待革新(～￣▽￣)～
也就是说，代码会变成如许：

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

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

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

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

            let rect2 = rect.clone();
            rect2.translate(300);

            let link = new joint.dia.Link({
                source: { id: rect.id },
                target: { id: rect2.id }
            });

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

点明一下，经由过程npm引入只需install jointjs就能够，不须要install lodash、backbone、jquery，也不须要在页面中导入joint.css文件。笔者之前经由过程script体式格局引入joint.js，试了许屡次，都没有胜利，一向读取joint.js文件失足，假如其他小伙伴尝试胜利，迎接交换分享。