教你在vue中使用jointjs的方法

本篇文章主要介绍了在vue中使用jointjs的方法，写的十分的全面细致，具有一定的参考价值，对此有需要的朋友可以参考学习下。如有不足之处，欢迎批评指正。

首先在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
      });
//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：864305860 
      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]);
    }
  }//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：864305860
</script>
复制代码

NoNoNo，注意到这里是把渲染放在了created的生命周期里，根据vue的生命周期，是无法找到joint的挂载div的el: $('#myholder')，也就是说，运行会报错，我的解决方法是把div放了一个click，把joint的内容从created中拿出，放在methods中，需要点击一下才可显示哦，还不太完美，以待改进(～￣▽￣)～ 也就是说，代码会变成这样：

<template>
  <div>
    <div id="myholder" @click="click_joint"></div>
  </div>
</template>
 //欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：864305860
<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]);
    }//欢迎加入前端全栈开发交流圈一起学习交流：864305860
   }//面向1-3年前端人员
  }//帮助突破技术瓶颈，提升思维能力
</script>
复制代码

点明一下，通过npm引入只要install jointjs就可以，不需要install lodash、backbone、jquery，也不需要在页面中导入joint.css文件。笔者之前通过script方式引入joint.js，试了很多次，都没有成功，一直读取joint.js文件出错，如果其他小伙伴尝试成功，欢迎交流分享。

结语

感谢您的观看，如有不足之处，欢迎批评指正。

本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。 对web开发技术感兴趣的同学，欢迎加入Q群：864305860，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。 最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。

转载于:https://juejin.im/post/5c1116426fb9a04a0440e334