第一种

  • 使用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. vue项目创建步骤 和 路由router知识点

    菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) 1.创建一个vue项目步骤 (windows环境下).创 ...

  2. IE框架表单遍历

    // HtmlWeb.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <atlbase.h> #include ...

  3. mongodb 更新嵌套数组的值

    概要 本文主要讲述在 mongodb 中,怎么更新嵌套数组的值. 使用$更新数组 基本语法  { "<array>.$" : value } 可以用于:update, ...

  4. Redis系列之----Redis的数据类型及使用场景

       Redis是一个开源的.高性能的.基于键值对的缓存与存储系统,能够提供多种不同的键值数据类型来适应不同场景下的缓存和存储需求.    Redis中所有的数据都存储在内存中,因此读写速度非常快,相 ...

  5. Vue.js 入门 --- vue.js 安装

    本博文转载  https://blog.csdn.net/m0_37479246/article/details/78836686 Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据 ...

  6. 【JavaScript学习笔记】函数、数组、日期

    一.函数 一个函数应该只返回一种类型的值. 函数中有一个默认的数组变量arguments,存储着传入函数的所有参数. 为了使用函数参数方便,建议给参数起个名字. function fun1(obj, ...

  7. 从源码角度来看BeanFactory和ApplicationContext的关系

    大家好,我是小黑,这是年前的最后一篇推文,提前祝大家新年快乐~~ 这次我们从源码角度来聊聊BeanFactory和ApplicationContext的关系,讲一些网上文章不曾提到的点. 官方描述 先 ...

  8. VLC播放器的快捷键(shutcut)

    ubuntu上的视频播放器功能简陋,不支持快慢速,于是需要一款播放器来替代它,从网上找了找,大家对VLC的评价出奇的一致, 于是试水了一下,发现功能确实强大,支持大多数多媒体文件以及各类流媒体协议 在 ...

  9. Java 从入门到进阶之路（二十二）

    在之前的文章我们介绍了一下 Java 中的  集合框架中的Collection 中的一些常用方法,本章我们来看一下 Java 集合框架中的Collection 的迭代器 Iterator. 当我们创建 ...

  10. 【5min+】闪电光速拳？ .NetCore 中的Span

    系列介绍 简介 [五分钟的DotNet]是一个利用您的碎片化时间来学习和丰富.net知识的博文系列.它所包含了.net体系中可能会涉及到的方方面面,比如C#的小细节,AspnetCore,微服务中的. ...