How to integrate connections with Vue 2 and webpack

Question

I am very new to vue js and webpack and wanted to integrate with vue 2 or webpack. I tried to search, but could not find a related article with jointjs and vue 2. Has anyone integrated a co-article with Vue2 or webpack, is there any sample code for reference? Any help would be greatly appreciated.

Thank.

Answer 1

First you need to add the necessary components to the project, in particular the destinies themselves npm install jointjs --save(I work with npm), and then the packages on which this depends, also through npm (in my opinion, the spine and the rest ...). Then we connect them to the file where vue is connected, etc. (I have this .js application) for the following example:

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

In any component, I can already use it this way. let graph = new joint.dia.Graph;Run the file assembly via webpack (I have build.js, do not forget to attach this file in the template).

PS The examples below do not have all the dependencies, and this does not work, these are just examples of my code

my 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
});

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

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