初用jointJS，有哪些注意事项和技巧分享？

2026-05-19 12:561阅读0评论SEO资源

内容介绍
文章标签
相关推荐

本文共计567个文字，预计阅读时间需要3分钟。

jointJs 使用指南

1.下载与安装

- 提前准备：一个健康的、高效的 Vue 脚手架项目。 - 安装方式：普遍采用 yarn，命令如下： yarn add jointjs 或者使用 npm： npm install jointjs - 建议安装以下插件（dagre、graphlib）： yarn add dagre graphlib

jointJs使用随记 1.下载与安装

前提：一个健康良好且干净的vue脚手架项目。

还是普遍的安装方式

yarn：yarn add jointjs
npm：npm install jointjs

还建议安装这几个其他的插件（dagre、graphlib）

这里建议jointjs的版本不要太高。（PS：最新版本可能会报变量undefined的问题，目前仍未解决...）

2.引入

在main.js里面全局引入：import joint from 'jointjs/dist/joint.js'

vue2：Vue.use(joint)
vue3：createApp(App).user(joint) 这里我用的是vue3

主组件中引入(这里我用的vue3的语法，当然也可以使用vue2的写法我就不演示了)

<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<div id="myholder"></div>
</div>
</template>
<script>
import joint from 'jointjs/dist/joint.js'
export default {
name: 'HomeView',
mounted () {
this.initJointjs()
},
setup () {
function initJointjs () {
const nameS = joint.shapes

const graph = new joint.dia.Graph({}, { cellNamespace: nameS })

const paper = new joint.dia.Paper({
el: document.getElementById('myholder'),
model: graph,
width: 600,
height: 100,
gridSize: 1,
cellViewNamespace: nameS
})

console.log('paper', paper)

const rect = new joint.shapes.standard.Rectangle()
rect.position(100, 30)
rect.resize(100, 40)
rect.attr({
body: {
fill: 'blue'
},
label: {
text: 'Hello',
fill: 'white'
}
})
rect.addTo(graph)

const rect2 = rect.clone()
rect2.translate(300, 0)
rect2.attr('label/text', 'World!')
rect2.addTo(graph)

const link = new joint.shapes.standard.Link()
link.source(rect)
link.target(rect2)
link.addTo(graph)
}
return {
initJointjs
}
}
}
</script>

在init()方法里面，使用的是官网给出的demo示例代码。如下图

最后启动项目，效果图如下：

后续...继续深入研究jointjs，实现复杂demo

标签：JointJS 初使用随记