如何在SVG.js中使用vue.js插件？

Question

我在运行svg.js的Laravel项目中使用了vue.js。

我就是这样使用svg.js的

步骤1:将svg.js作为插件安装在我的vue应用程序中。

import svgJs from "svg.js/dist/svg"

export default {
    install(Vue) {
        Vue.prototype.$svg = svgJs
    }
}

步骤2:导入并使用插件。

import svgJs from "./plugins/vueSvgPlugin"

Vue.use(svgJs);

步骤3:然后我就可以这样做了。

console.log(this.$svg);

console.log(this.$svg.get("samplesvg"));

然而，我不知道如何添加svg.js插件。我想使用以下三个插件，以防有人想知道。

1. svg.select.js
2. svg.resize.js
3. svg.draggable.js

Answer 1

根据菲兹玛的评论，我不得不改变我的方法

所以我只是在我的应用程序文件中做了简单的导入，一切都很好。还值得一提的是，我使用了< 3.0版本来使其工作。

import * as SVG from 'svg.js/dist/svg';
import './plugins/svg.draggable/dist/svg.draggable';
import './plugins/svg.select/dist/svg.select';
import './plugins/svg.resize/dist/svg.resize';

Answer 2

我有处理非npm/module库的解决方案。

首先，我将使用杰斯德维尔直接从Github提供文件。例如，https://cdn.jsdelivr.net/npm/svg.js@2.7.1/dist/svg.min.js。

然后我使用script.js加载它们。

script.order([
  "https://cdn.jsdelivr.net/npm/svg.js@2.7.1/dist/svg.min.js",
  "https://cdn.jsdelivr.net/npm/svg.select.js@3.0.1/dist/svg.select.min.js"
], () => {
  // window.SVG is available
});

实例化

Answer 3

要使用3.x版本，只需使用esm导入即可：

import { SVG } from '@svgdotjs/svg.js'
import '@svgdotjs/svg.draggable.js'
// ...

无需为vue使用插件。需要时，只需在代码中使用SVG()即可。如果您需要其他功能，那么也需要导入“旧”SVG.on()：import { SVG, on } from '@svgdotjs/svg.js'

或者你通过脚本标签把它包括进去。为此目的，svg.js总是附带预先打包的文件：

<script src="node_modules/@svgdotjs/svg.js/dist/svg.js"></script>
<script src="node_modules/@svgdotjs/svg.draggable.js/dist/svg.draggable.js"></script>

在这种情况下，您只需使用全局SVG变量，就可以像SVG.on(...)一样使用它访问所有东西。