第一种

  • 使用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. mysql主从之配置基本环境

    实验环境 master  192.168.132.121 主库 slave     192.168.132.122 从库 一 mysql的使用介绍 1.1 mysql单台服务器特点 缺点 单台服务器如 ...

  2. Python 类的常用内置方法

    类的内置方法(魔法方法): 凡是在类内部定义,以__开头__结尾的方法,都是类的内置方法,类的内置方法,会在满足某种条件下自动触发. 1.1__new__ __new__:在___init__触发前, ...

  3. 洛谷P2858 奶牛零食 题解 区间DP入门题

    题目大意: 约翰经常给产奶量高的奶牛发特殊津贴,于是很快奶牛们拥有了大笔不知该怎么花的钱．为此,约翰购置了 \(N(1 \le N \le 2000)\) 份美味的零食来卖给奶牛们．每天约翰售出一份零 ...

  4. 「洛谷P1080」「NOIP2012提高组」国王游戏 解题报告

    P1080 国王游戏 题目描述 恰逢 \(H\)国国庆,国王邀请\(n\)位大臣来玩一个有奖游戏.首先,他让每个大臣在左.右手上面分别写下一个整数,国王自己也在左.右手上各写一个整数.然后,让这 \( ...

  5. 1063 计算谱半径 (20 分)C语言

    在数学中,矩阵的"谱半径"是指其特征值的模集合的上确界.换言之,对于给定的 n 个复数空间的特征值 { a1+b​1​​ i,⋯,a​n​​ +b​n​​ i },它们的模为实部与 ...

  6. Python 愤怒的小鸟代码实现:物理引擎pymunk使用

    游戏介绍 最近比较忙,周末正好有时间写了python版本的愤怒的小鸟,使用了物理引擎pymunk,图片资源是从github上下载的,实现了一个可玩的简单版本. 功能实现如下: 支持小鸟类型:红色小鸟, ...

  7. 如何验证docker-compose安装成功

    安装过程及如何验证docker-compose安装成功 步骤1: 通过运行 curl 从GitHub上进行安装下载 sudo curl -L "https://github.com/dock ...

  8. GitHub上的计算机视觉学习资料推荐

    9月份将要读研,导师是做cv的,最近学习时找到了不少的计算机视觉的资料,记录一下,同时也分享给需要的朋友 assmdx/ComputerVisionDoc AceCoooool/interview-c ...

  9. 1z0-062 题库解析5

    题目: Which three statements are true about Flashback Database? A. Flashback logs are written sequenti ...

  10. CF449B Jzzhu and Cities 迪杰斯特拉最短路算法

    CF449B Jzzhu and Cities 其实这一道题并不是很难,只是一个最短路而已,请继续看我的题解吧~(^▽^) AC代码: #include<bits/stdc++.h> #d ...