Question

我最近使用Vue CLI创建了第一个Vue.js项目。我想导入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)

如何与Vue.js一起使用或导入SVG库？

Answer 1

您应该在export default {}块中使用SVG。

例如

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

如何在Vue.js cli项目中使用外部Javascript库？

1 个答案: