如何将 Jointjs 与 Vue 2 和 webpack 集成

Posted 2023-02-22

【中文标题】如何将 Jointjs 与 Vue 2 和 webpack 集成

【英文标题】：How to integrate jointjs with Vue 2 and webpack

【发布时间】：2017-09-15 18:51:30

【问题描述】：

我对 vue js 和 webpack 非常陌生，想将 jointjs 与 vue 2 或 webpack 集成。我尝试搜索但找不到与jointjs和vue 2相关的文章。 有没有人将jointjs与Vue2或webpack集成，有没有示例代码可供参考？ 任何帮助将不胜感激。

谢谢。

【问题讨论】：

您如何看待它们的集成？一般来说，你会为这样的事情写wrapper components。

【参考方案1】：

首先你需要向项目添加必要的组件，特别是jointjs本身npm install jointjs --save（我使用npm），然后它依赖的包也通过npm（在我看来是主干和其余的. ..)。接下来我们将它们连接到连接vue的文件等（我有这个app.js），例如：

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

在任何组件中我已经可以通过这种方式使用它let graph = new joint.dia.Graph; 通过 webpack 运行文件的程序集（我有它 build.js，不要忘记在模板中附加这个文件）。

附言 在下面的示例中，没有所有依赖项并且它不起作用，这些只是我的代码示例

我的 app.js：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Vuex from 'vuex'

Vue.use(Vuex);
Vue.use(VueRouter);

import Home from './Components/Home.vue'
import Users from './Components/Users.vue'
import Calculator from './Components/Calculate.vue'

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

import  store  from './store'

const routes = [
     path: '/', component: Home ,
     path: '/users/:id?', component: Users ,
     path: '/calculator', component: Calculator 
];

const router = new VueRouter(
    mode: 'history',
    routes
);

Vue.component('index', require('./Components/Test.vue'));

const app = new Vue(
    el: '#app',
    router,
    store
);

我的 webpack.config.js

"use strict";

module.exports = 
    entry: './js/app.js',
    output: 
        filename: './js/bundle.js'
    ,
    resolve: 
        alias: 
            vue: 'vue/dist/vue.js'
        
    ,
    module: 
        rules: [
            
                test: /\.vue$/,
                loader: 'vue-loader'
            
        ]
    
;

我的组件/Home.vue

<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>

【讨论】：

我已经尝试过您的方法，似乎当调用 created() 钩子时，html 元素尚未呈现，这会导致错误：Cannot read property ‘ownerDocument’ of undefined I已经将 created() 更改为 mounted() 并且它有所帮助。