第一种

  • 使用vue2-svg-icon
 npm install vue2-svg-icon --save-dev`
  • 下载之后在mian.js引入

名字可以随便起，这里我起icon

  • 引入svg资源

这时注意：网上有人说直接在src/根目录引入svg资源，也有人说在src/assets/根目录引入svg资源，两个应该都是对的，可能因为webpack版本不同，svg引入的路径就不同，因此这两种引入方式都试试，我项目webpack版本是2.96的，我在src/assets/引入资源成功，在src/引入svg资源报错。



  • 使用svg图片

此时只需要把 icon当作一个标签使用即可，name属性指定svg相应资源的名字，不要带后缀名，w、h指定svg图的宽高。

  • 效果图

第二种

第二种我还没有使用过，下一次使用在补上，使用 svg-sprite-loader。

svg图片在vue脚手架vue-cli怎么使用的更多相关文章

  1. Vue脚手架（CLI）第一天

    vue 1.脚手架的搭建(CLI) 1.1.下载nodejs,在官网, [nodejs官网地址][ https://nodejs.org/en/ ] 无脑下一步就可以了.环境自动安装 1.2.下载脚手 ...

  2. 运行vue项目--安装vue脚手架vue cli

    第一步. 安装node: 官网下载node的.pkg,下载地址,选择相应版本进行下载 mac终端下输入npm -v 和 node -v, 出现相应版本号即安装成功. 若均提示 command not ...

  3. 08 . Vue脚手架安装,使用,自定义配置和Element-UI导入使用

    Vue脚手架 Vue脚手架可以快速生成Vue项目基础的架构. 安装3.x版本的Vue脚手架 /* npm install -g @vue/cli@3.3 */ 基于3.3版本的脚手架命令创建Vue项目 ...

  4. vue - Error: Can't resolve '@/assets/img/github.svg （vue-cli3.0,无法解析.svg图片，已解决）

    用vue脚手架(vue-cli3.0)生成的目录,无法解析.svg图片的问题 <img src="@/assets/img/github.svg" alt="git ...

  5. 前端MVC Vue2学习总结（二）——Vue的实例、生命周期与Vue脚手架（vue-cli）

    一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...

  6. [vue三部曲]第一部：vue脚手架的搭建和目录资源介绍，超详细！

    第一步 node环境安装 1.1 如果本机没有安装node运行环境,请下载node 安装包进行安装1.2 如果本机已经安装node的运行换,请更新至最新的node 版本下载地址:https://nod ...

  7. Vue脚手架（vue-cli）安装总结

    单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序. 提供一 ...

  8. 教你用webpack搭一个vue脚手架[超详细讲解和注释！]

    1.适用人群 1.对webpack知识有一定了解但不熟悉的同学. 2.女同学!!!(233333....) 2.目的 在自己对webpack有进一步了解的同时,也希望能帮到一些刚接触webpack的同 ...

  9. 教你用webpack搭一个vue脚手架[超详细讲解和注释！](转载)

    1.适用人群 1.对webpack知识有一定了解但不熟悉的同学. 2.女同学!!!(233333....) 2.目的 在自己对webpack有进一步了解的同时,也希望能帮到一些刚接触webpack的同 ...

随机推荐

  1. $NOIp$提高组做题记录

    对了我在这里必须讲一个非常重要的事情,就是前天也就是$2019.8.21$的傍晚,我决定重新做人了$!!$ 其实之前没怎么做$Noip$题,那就从现在开始叭

  2. ng-zorro-antd中踩过的坑

    ng-zorro-antd中踩过的坑 前端项目中,我们经常会使用阿里开源的组件库:ant-design,其提供的组件已经足以满足多数的需求,拿来就能直接用,十分方便,当然了,有些公司会对组件库进行二次 ...

  3. MySQL中文乱码 - window环境

    MySQL中文乱码 window环境 Linux环境请参考这篇文章:[https://www.cnblogs.com/hankleo/p/9695842.html]: 查看及修改字符集sql --查看 ...

  4. 洛谷P1147 连续自然数和 题解 枚举

    题目链接:https://www.luogu.com.cn/problem/P1147 题目大意: 给你一个数 \(M\) ,求有多少对连续自然数对之和为 \(M\),输出这列连续自然数对的首项和末项 ...

  5. C语言之while循环

    while循环能做什么??? 先来个概念格式,while循环的一般形式为: while(表达式){ 语句块 } 意思是,先计算"表达式"的值,当值为真(非0)时, 执行" ...

  6. Web基础了解版12-上传下载

    上传 两个步骤: 用户在页面中选择要上传的文件,然后将请求提交到Servlet Servlet收到请求,解析用户上传的文件,然后将文件存储到服务器 上传文件表单 <form action=&qu ...

  7. Spark设置Kryo序列化缓冲区大小

    背景 今天在开发SparkRDD的过程中出现Buffer Overflow错误,查看具体Yarn日志后发现是因为Kryo序列化缓冲区溢出了,日志建议调大spark.kryoserializer.buf ...

  8. ACM北大暑期课培训第四天

    今天讲了几个高级搜索算法:A* ,迭代加深,Alpha-Beta剪枝   以及线段树 A*算法 启发式搜索算法(A算法) : 在BFS算法中,若对每个状态n都设定估价函数 f(n)=g(n)+h(n) ...

  9. OpenJ_Bailian 2815 城堡问题（DFS）

    题目传送门OpenJ_Bailian 2815 描述 1 2 3 4 5 6 7 ############################# 1 # | # | # | | # #####---### ...

  10. MongoDB高级用法

    MongoDB高级查询用法大全 转载 http://blog.163.com/lgh_2002/blog/static/440175262012052116455/ 详见官方的手册:http://ww ...