时间戳

首页 > 解决方案 > 如何在 vue /@cli UI 中正确使用各种 JS（在本例中为 svg.js）库？

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

问题描述

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

在此处输入图像描述

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

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 的东西

我试图找到使用这个库的正确方法，并且一直在绕圈子，任何指针表示赞赏。

路由器.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

标签： javascriptvuejs2vue-routervue-clisvg.js

解决方案

原来它很简单

使用 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>

推荐阅读