jointjをVue 2とwebpackに統合する方法

Question

私はvue jsとwebpackの新機能で、jointjをvue 2またはwebpackと統合したいと考えていました。私は検索しようとしましたが、jointjsとvue2で関連する記事を見つけることができませんでした。 誰かがVue2またはwebpackでjointjsを統合しましたが、参照できるサンプルコードはありますか？ ご協力いただければ幸いです。

ありがとうございました。

Answer 1

まず、プロジェクトに必要なコンポーネント、特にjointjsを追加する必要があります。npm install jointjs --save（私はnpmで作業します）、次にnpmでも依存するパッケージ（私の意見ではバックボーンと残りの部分.. ）。次は、次の例のために（私はこれがapp.js持っている）VUEが接続されているファイルなどにそれらを接続：私はすでにのアセンブリを実行しますlet graph = new joint.dia.Graph;この方法でそれを使用することができます任意のコンポーネントで

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

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

私のコンポーネント/

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>