在vue中使用snap.svg的方法

下面介绍我使用的方法：

1、利用imports-loader来引入snapsvg

需要安装snap和imports-loader

cnpm i snapsvg --save-dev

cnpm i imports-loader@0.8.0 --save-dev

说明及注意事项：

• imports-loader版本要小于1.0.0（我开始装了最新版本3.1.1，会报错）
• snapsvg和imports-loader最好都装在devDependencies中

2、在main.js 中引入snap

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

3、页面中就可以使用啦

<template>
  <div class="hello">
     <svg id="svg" width="100%" height="300px"></svg>
  </div>
</template>

<script>

export default {
  mounted: function(){
        var s = Snap("#svg");
		var bigCircle = s.circle(150, 150, 100);
  }
}
</script>

4、看效果

方法二：

在index.html全局引入即可

 Snap.svg - Home

可以到官网下载资源 

最后，其他方法请参考

vue中使用snap.svg_wayhb的专栏-CSDN博客_vue-snap方法一利用imports-loader来引入snapsvg1，安装snapsvgcnpm i snapsvg --save-devcnpm i imports-loader@0.8.0 --save-devimports-loader版本要小于1.0.0snapsvg和imports-loader最好都装在devDependencies中npm中snap.svg说明"devDependencies": { "imports-loader": "^0.8.0", "snhttps://blog.csdn.net/wayhb/article/details/121009402?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~aggregatepage~first_rank_ecpm_v1~rank_v31_ecpm-1-121009402.pc_agg_new_rank&utm_term=vue+%E4%BD%BF%E7%94%A8SnapSVG&spm=1000.2123.3001.4430