Wie man jointjs mit Vue 2 und webpack integriert

Question

Ich bin sehr neu zu Vue Js und Webpack und wollte Jointjs mit Vue 2 oder Webpack integrieren. Ich habe versucht zu suchen, konnte aber nicht verwandten Artikel mit Jointjs und Vue 2 finden. Haben jemand die Jointjs mit Vue2 oder Webpack integriert, gibt es keinen Beispielcode als Referenz? Jede Hilfe würde sehr geschätzt werden.

Danke.

Answer 1

Zuerst müssen Sie die notwendigen Komponenten zum Projekt hinzufügen, insbesondere die Jointjs selbst npm install jointjs --save (Ich arbeite mit Npm), dann die Pakete, auf denen es auch durch npm (meiner Meinung nach das Rückgrat und der Rest .. .). Als nächstes verbinden wir sie in die Datei, wo vue verbunden ist, usw. (ich habe diese app.js) für das folgende Beispiel:

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

In jeder Komponente ich es bereits auf diese Weise let graph = new joint.dia.Graph; Führen Sie die Montage verwenden können die Datei über das Webpack (Ich habe es build.js, vergiss nicht, diese Datei in der Vorlage anzuhängen).

PS In den folgenden Beispielen gibt es keine alle Abhängigkeiten und es funktioniert nicht, das sind nur Beispiele für meinen Code

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

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

meine Komponenten/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>