Vue 2 및 웹 팩과 조인트 j를 통합하는 방법

Vue 2 및 웹 팩과 조인트 j를 통합하는 방법

나는 vue js와 webpack을 처음 접하는 사람이고, vue 2나 webpack과 조인트j를 통합하고 싶었다.검색해봤는데 조인트j,뷰2와 관련된 기사를 찾을 수가 없었어.조인트j를 Vue2 또는 웹팩과 통합한 사람이 있는가? 참조할 수 있는 샘플 코드가 있는가?어떤 도움이라도 감사할 것이다.

고마워요.

먼저 프로젝트에 필요한 구성 요소, 특히 조인트js 자체를 추가해야 한다.npm install jointjs --save(npm과 함께 작업한다), 그 다음에 그것이 의존하는 패키지도 npm을 통해 (내 생각에 backbone과 나머지 ...)그런 다음 vue가 연결된 파일 등(이 app.js가 있음)에 연결하여 다음 예를 참조하십시오.

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

어떤 구성 요소에서도 이미 이러한 방식으로 사용할 수 있음let graph = new joint.dia.Graph;웹 팩을 통해 파일 어셈블리를 실행하십시오(build.js가 있으므로 이 파일을 템플릿에 첨부하는 것을 잊지 마십시오).

PS 아래 예제에서 모든 종속성이 없고 작동하지 않는 것은 단지 내 코드의 예일 뿐이다.

내 앱.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'
            }
        ]
    }
};

내 구성 요소/홈부에를 하다

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

참조URL: https://stackoverflow.com/questions/43497467/how-to-integrate-jointjs-with-vue-2-and-webpack