您如何在vue / @ cli UI中正确使用各种JS（在本例中为svg.js）库？

Question

使用Vue CLI 3 ui，我安装了以下额外的依赖项

• svg.js
• svg.connectable.js
• svg.draggy.js

但是我似乎无法在应用程序中使用这些库，因为我不清楚如何正确导入它们并在组件之间使用。

main.js中的最新尝试如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import SVG from 'svg.js'
// import connect from 'svg.connectable.js'
// import draggy from 'svg.draggy.js'

Vue.config.productionTip = false
Object.defineProperty(Vue.prototype, '$SVG', { value: SVG });
//Object.defineProperty(Vue.prototype, '$connect', { value: connect });
//Object.defineProperty(Vue.prototype, '$draggy', { value: draggy });


new Vue({
   router, SVG,
   render: h => h(App)
}).$mount('#app')

在我的组件中，我有以下内容

<template>

 <div id="spatialui">

  </div>

</template>

<script>
export default {
  name: 'spatialui',
  props: {
    object: Object
  }
}

// SVG UI needs
 var draw = SVG('spatialui').size(300, 300)

但是，这不适用于控制台抱怨

[vue-router] Failed to resolve async component default: TypeError: element is null vue-router.esm.js:16
[vue-router] uncaught error during route navigation: vue-router.esm.js:16
TypeError: "element is null" vue-router.esm.js:1905

接下来是一堆抱怨svg.js的东西

我试图找到使用该库的正确方法，并且一直在圈子里乱跑，任何指针都值得赞赏。

router.js

import Vue from 'vue'
import Router from 'vue-router'
import start from './views/start.vue'

Vue.use(Router)

export default new Router({
   routes: [
    {
       path: '/',
       name: 'start',
       component: start
    },

     {
       path: '/home',
       name: 'home',
       component: () =>
       import(/* webpackChunkName: "home" */ "./views/home.vue")
     },
     {
       path: '/about',
       name: 'about',
       component: () =>
      import(/* webpackChunkName: "about" */ "./views/about.vue")
    }
   ]
 })

 TypeError: "element is null" createwebpack-internal:///./node_modules/svg.js/dist/svg.js:3611:1SVGwebpack-internal:///./node_modules/svg.js/dist/svg.js:24:15<anonymous>webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js?!./src/components/spatialui.vue?vue&type=script&lang=js&:19:12./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js?!./src/components/spatialui.vue?vue&type=script&lang=js&http://localhost:8080/home.js:35:1__webpack_require__http://localhost:8080/app.js:768:12fnhttp://localhost:8080/app.js:131:20<anonymous>webpack-internal:///./src/components/spatialui.vue?vue&type=script&lang=js&:2:239./src/components/spatialui.vue?vue&type=script&lang=js&http://localhost:8080/home.js:281:1__webpack_require__http://localhost:8080/app.js:768:12fnhttp://localhost:8080/app.js:131:20<anonymous>webpack-internal:///./src/components/spatialui.vue:3:97vuehttp://localhost:8080/home.js:269:1__webpack_require__http://localhost:8080/app.js:768:12fnhttp://localhost:8080/app.js:131:20<anonymous>webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js?!./src/components/instance.vue?vue&type=script&lang=js&:3:72./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js?!./src/components/instance.vue?vue&type=script&lang=js&http://localhost:8080/home.js:11:1__webpack_require__http://localhost:8080/app.js:768:12fnhttp://localhost:8080/app.js:131:20<anonymous>webpack-internal:///./src/components/instance.vue?vue&type=script&lang=js&:2:238./src/components/instance.vue?vue&type=script&lang=js&http://localhost:8080/home.js:185:1__webpack_require__http://localhost:8080/app.js:768:12fnhttp://localhost:8080/app.js:131:20<anonymous>webpack-internal:///./src/components/instance.vue:3:96vuehttp://localhost:8080/home.js:173:1__webpack_require__http://localhost:8080/app.js:768:12fnhttp://localhost:8080/app.js:131:20<anonymous>webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js?!./src/views/home.vue?vue&type=script&lang=js&:2:82./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js?!./src/views/home.vue?vue&type=script&lang=js&http://localhost:8080/home.js:47:1__webpack_require__http://localhost:8080/app.js:768:12fnhttp://localhost:8080/app.js:131:20<anonymous>webpack-internal:///./src/views/home.vue?vue&type=script&lang=js&:2:234./src/views/home.vue?vue&type=script&lang=js&http://localhost:8080/home.js:329:1__webpack_require__http://localhost:8080/app.js:768:12fnhttp://localhost:8080/app.js:131:20<anonymous>webpack-internal:///./src/views/home.vue:3:92vuehttp://localhost:8080/home.js:317:1__webpack_require__http://localhost:8080/app.js:768:12fnhttp://localhost:8080/app.js:131:20runwebpack-internal:///./node_modules/core-js/modules/es6.promise.js:75:22notifywebpack-internal:///./node_modules/core-js/modules/es6.promise.js:92:30flushwebpack-internal:///./node_modules/core-js/modules/_microtask.js:18:9 vue-router.esm.js:1905 

Answer 1

事实证明它非常简单

使用Vue CLI UI添加所需的库。 然后用这一行导入它们

import SVG from 'svg.js'

进入希望使用该库并使用已安装功能的组件

<template>

 <div id="spatialui">
        <!-- the SVG.js stuff appears here -->


  </div>
</template>

<script>
import SVG from 'svg.js'

export default {
  name: 'spatialui',
  props: {
    object: Object
  },

mounted: function() {
// SVG UI needs
var draw = SVG('spatialui').size(600, 300)
var rect_1 = rect(50, 50).attr({ fill: '#f06' })
}

</script>