如何将 Jointjs 与 Vue 2 和 webpack 集成
Posted
技术标签:
【中文标题】如何将 Jointjs 与 Vue 2 和 webpack 集成【英文标题】:How to integrate jointjs with Vue 2 and webpack 【发布时间】:2017-09-15 18:51:30 【问题描述】:我对 vue js 和 webpack 非常陌生,想将 jointjs 与 vue 2 或 webpack 集成。我尝试搜索但找不到与jointjs和vue 2相关的文章。 有没有人将jointjs与Vue2或webpack集成,有没有示例代码可供参考? 任何帮助将不胜感激。
谢谢。
【问题讨论】:
您如何看待它们的集成?一般来说,你会为这样的事情写wrapper components。 【参考方案1】:首先你需要向项目添加必要的组件,特别是jointjs本身npm install jointjs --save
(我使用npm),然后它依赖的包也通过npm(在我看来是主干和其余的. ..)。接下来我们将它们连接到连接vue的文件等(我有这个app.js),例如:
window.$ = require('jquery');
window.joint = require('jointjs');
在任何组件中我已经可以通过这种方式使用它let graph = new joint.dia.Graph;
通过 webpack 运行文件的程序集(我有它 build.js,不要忘记在模板中附加这个文件)。
附言 在下面的示例中,没有所有依赖项并且它不起作用,这些只是我的代码示例
我的 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>
【讨论】:
我已经尝试过您的方法,似乎当调用 created() 钩子时,html 元素尚未呈现,这会导致错误:Cannot read property ‘ownerDocument’ of undefined
I已经将 created() 更改为 mounted() 并且它有所帮助。以上是关于如何将 Jointjs 与 Vue 2 和 webpack 集成的主要内容,如果未能解决你的问题,请参考以下文章