Как мне использовать плагины 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

У меня есть решение для работы с не 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
});

Живой пример

Answer 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';