Snap.svg 与 Vue.js

Question

我正在尝试在我的 Vue.js 应用程序中使用 Snap.svg，但是我对如何操作感到困惑。 我使用Vue CLI 3命令初始化我的项目，并使用yarn安装snapsvg依赖项。

另外，我读了这篇文章。 但我找不到

webpack.base.conf.js

文件！

当我尝试将依赖项导入到我的 main.js 文件或任何组件中时，我没有收到错误，但我的应用程序变空了。

在我的 Vue.js 应用程序中正确导入 Snap.svg 时我错过了什么？

Answer 1

而不是破解 webpack，
使用 snapsvg-cjs

该项目只是将优秀的 SnapSVG 从其发布的 AMD 格式中解压出来，并将其作为 CommonJS 托管在 NPM 上的一个名为 snapsvg-cjs 的包中。然后，这个包可以与 Webpack 一起开箱即用，不需要任何导入加载器 hax。

npm install snapsvg-cjs;

您需要的唯一一行代码：

import "snapsvg-cjs";

Answer 2

在 Vue cli 3 中，webpack 在 vue.config.js 中配置

要使用 snap，请将包含以下内容的 vue.config.js 放置在根目录中

module.exports = {
  chainWebpack: config => {
    config.module
      .rule("snapsvg")
      .test(require.resolve("snapsvg"))
      .use("imports-loader?this=>window,fix=>module.exports=0")
      .loader("imports-loader")
      .end();
  }
};

将此行添加到您的 main.js 文件中：

const snap = require(`imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js`);

Answer 3

在您的任何 Vue 组件上尝试此操作

运行：

npm install snapsvg-cjs

<template>
  <!-- Important that HTML element should be an SVG tag -->
  <svg id="chart"></svg>

</template>

<script>
import * as Snap from 'snapsvg-cjs'

export default {
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {

     var s = Snap('#chart');

     s.rect(0,0, 100, 100)
     
    },
  },
};
</script>

<style>
  #chart {
    width: 100%;
    height: 500px;
  }
</style>