在vue项目中怎么使用qunee拓扑图插件，怎么正确的使用 graphEditor ？求帮助

Question

<div id="editor" data-options="region:'center'"></div>
<script src="js/js.js"></script>
<script src="js/qunee-min.js?v=1.8"></script>
<script src="js/graph.editor.js"></script>
<script>

var images = {
    name: '自定义图元', images: [{
        label: 'Node',
        image: 'Q-node',
        clientProperties: {
            type: 'CustomNode'
        }
    }, {
        type: 'Text',
        label: 'Text',
        html: '<span style="background-color: #2898E0; color:#FFF; padding: 3px 5px;">' + getI18NString('Text') + '</span>',
        styles: {
            'label.background.color': '#2898E0',
            'label.color': '#FFF',
            'label.padding': new Q.Insets(3, 5)
        },
        clientProperties: {
            type: 'CustomNode2'
        }
    }, {
        type: 'Group',
        label: 'Group',
        image: 'Q-group',
        clientProperties: {
            type: 'CustomNode3'
        }
    }, {
        label: 'SubNetwork',
        image: 'Q-subnetwork',
        properties: {enableSubNetwork: true},
        clientProperties: {
            type: 'CustomNode4'
        }
    }]
};

$('#editor').graphEditor({
    images: images, callback: function (editor) {
        var toolbox = editor.toolbox;
        toolbox.hideDefaultGroups();
        var graph = editor.graph;

        var propertySheet = editor.propertyPane;
        propertySheet.showDefaultProperties = false;

        propertySheet.getCustomPropertyDefinitions = function(data){
            var type = data.get('type');
            if (type == 'CustomNode') {
                return {
                    group: '自定义属性',
                    properties: [
                        {client: 'a', displayName: 'AAA', groupName: 'A'},
                        {client: 'b', displayName: 'AA'},
                        {client: 'c', displayName: 'AAAA'},
                        {client: 'd', displayName: '自定义1', groupName: 'A'},
                    ]
                }
            }
            if (type == 'CustomNode2') {
                return {
                    group: '自定义属性',
                    properties: [
                        {client: 'b', displayName: 'BBBBB'},
                        {client: 'c', displayName: '自定义3'},
                    ]
                }
            }
            if (type == 'CustomNode3') {
                return {
                    group: '自定义属性',
                    properties: [
                        {client: 'b', displayName: 'CC'},
                        {client: 'c', displayName: '自定义3'},
                    ]
                }
            }
        }

// propertySheet.register({
// class: Q.Element,
// properties: [
// {client: 'id', displayName: 'ID'},
// {style: 'label.color', displayName: '文本颜色', type: 'color'},
// ]
// })
// propertySheet.register({
// class: Q.Node,
// properties: [
// {client: 'ip', displayName: 'IP'},
// {style: 'label.background.color', displayName: '背景颜色', type: 'color'},
// ],
// group: '自定义属性'
// })

        graph.moveToCenter();
    }
});

</script>

怎么在vue项目中引入qunee并且正确使用呢，，我引用的总是报错，，求帮助

Answer 1

请问你解决了吗