vue 组件中的 svg.js答案

【问题标题】：svg.js inside the vue componentvue 组件中的 svg.js
【发布时间】：2021-03-22 14:03:18
【问题描述】：

我在添加 SVG.js 库时遇到了很大的问题。就像我不做一样，我仍然不能画任何东西:(

我的文件： -public/index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>

    <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
  </head>
  <body style="font-size:11px">
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

-src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { SVG } from '@svgdotjs/svg.js'


import 'bootstrap/dist/css/bootstrap.min.css'
Vue.use(SVG);

Vue.config.productionTip = false

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

-src/components/picture.vue

<template>
<div class="row">
<div class="col-sm border-right" style="margin-right: 15px;background-color: #f3f3f3;">
</div>
<div class="col-auto" style="width: 703px;">
    <div class="row">
        <div class="col px-1 pt-1 pb-1">
            <div class="border row" style="width: 653px;height: calc(100vh - 61px);overflow: auto;">

                <div id="drawing">
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-sm border-left" style="margin-left: 15px; background-color: #f3f3f3;">

</div>
</div>
</template>

<script>
import axios from "axios";
import { SVG } from '@svgdotjs/svg.js'

export default {
    data() {
        return {

        }
    },
    created() {
        
            var draw = SVG().addTo('drawing').size(400, 400) 
            var rect = draw.rect(100, 100) 

    },
    methods: {

    }
}
</script>

我在页面上收到此错误：

编译失败。

./src/components/Picture.vue 模块错误（来自 ./node_modules/eslint-loader/index.js):

D:\inzynierka\projekt\src\components\Picture.vue 41:17 错误 'rect' 被赋值但从未使用 no-unused-vars

✖ 1 个问题（1 个错误，0 个警告）

【问题讨论】：

标签： vue.js svg.js

【解决方案1】：

已声明但未在代码中任何位置使用的变量很可能是由于重构不完整而导致的错误。此类变量占用代码空间，可能导致读者混淆。

var rect = draw.rect(100, 100) rect 未使用。

如果你想忽略它。你可以这样做

      // eslint-disable-next-line no-unused-vars
      var rect = draw.rect(100, 100)

【讨论】：