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

【问题标题】：How do i use SVG.js plugins in vue.js?如何在 vue.js 中使用 SVG.js 插件？
【发布时间】：2019-08-30 11:40:48
【问题描述】：

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

这就是我使用svg.js的方式

第 1 步：在我的 vue 应用中安装 svg.js 作为插件。

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 插件。我想使用以下三个插件，以防有人想知道。

svg.select.js
svg.resize.js
svg.draggable.js

【问题讨论】：

将 SVG 设为全局并导入它们。这应该工作
select.js 和 resize.js 没有导入的定义文件
没有导出的文件不是刚刚执行了吗？

标签： javascript laravel vue.js svg svg.js

【解决方案1】：

我有使用非 npm/module 库的解决方案。

首先，我将使用jsdelivr 直接从 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
});

Live Example

【讨论】：

【解决方案2】：

我不得不根据Fuzzyma的评论改变我的方法

所以我只是在我的应用程序文件中进行了简单的导入，一切正常。还值得一提的是，我使用了 < 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';

【讨论】：

您能否解释一下您在项目中是如何做到这一点的，更像是问题结构，这对于启动和运行 svg.js 非常有用，但我也想要可拖动的，我不确定现在把所有东西放在哪里。使用vue ui安装库和插件
@adamprocter 我在问题中所做的必须被丢弃，你必须使用我的答案。因此，从问题中删除所有内容，从答案中添加导入，一切都应该正常工作。不要忘记使用版本
好的，谢谢，会尝试只是不确定所有步骤

【解决方案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(...)

【讨论】：