Как использовать внешнюю библиотеку Javascript с проектом Vue.js cli?

Question

Я недавно сделал свой первый проект Vue.js с помощью Vue CLI.Я хочу импортировать SVG.js , поэтому я установил его с

npm install @svgdotjs/svg.js

Мой /src/components/Map.vue файл:

<template>
  <div id="drawing"></div> 
</template>

<script>
  import SVG from '@svgdotjs/svg.js';
  export default {
    name: 'Map'
  }      
  let draw = SVG('drawing').size(300, 300) // TypeError
</script>

<style>
</style>

Браузер жалуется, когда я использую SVGфункция с ошибкой:

Map.vue?108f:10 Uncaught TypeError: _svgdotjs_svg_js__WEBPACK_IMPORTED_MODULE_0___default(...) is not a function
    at eval (Map.vue?108f:10)
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Map.vue?vue&type=script&lang=js& (app.js:954)
    at __webpack_require__ (app.js:724)
    at fn (app.js:101)
    at eval (Map.vue?d6e9:1)
    at Module../src/components/Map.vue?vue&type=script&lang=js& (app.js:2526)
    at __webpack_require__ (app.js:724)
    at fn (app.js:101)
    at eval (Map.vue?9397:1)
    at Module../src/components/Map.vue (app.js:2514)

Как использовать или импортировать библиотеку SVG с Vue.js?

Answer 1

Вы должны использовать SVG в блоке export default {}.

---

Например

export default {
  mounted() {
    let draw = SVG("drawing").size(300, 300);
  }
};