如何将 jointjs 与 Vue 2 和 webpack 集成

Question

我是 vue js 和 webpack 的新手，想将 jointjs 与 vue 2 或 webpack 集成。我尝试搜索但找不到与 jointjs 和 vue 2 相关的文章。有没有人把jointjs和vue2或者webpack集成过，有没有示例代码可以参考？任何帮助将不胜感激。

谢谢。

Answer 1

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

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

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

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

我的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'
            }
        ]
    }
};

我的Components/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>

如何将 jointjs 与 Vue 2 和 webpack 集成

How to integrate jointjs with Vue 2 and webpack

webpack

vue.js

vuejs2

vue-component

jointjs