第一种

  • 使用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. 从0开发3D引擎（一）：开篇

    介绍 大家好,本系列带你踏上Web 3D编程之旅- 本系列是实战类型,从0开始带领读者写出"良好架构.良好扩展性.最小功能集合(MVP)" 的3D引擎. 本系列的素材来自我们的产品 ...

  2. $SP703\ Mobile\ Service\ DP$

    洛谷 Sol 首先状态是已经完成的请求数量 这题只有三个员工跑来跑去,只有三个.... 一般像这种人数特别少的DP题就会把它们都放到状态里去 于是:f[i][x][y][z]表示现在已经完成了i个请求 ...

  3. 高校表白app用后感

    此款app前提是我们自行设计研发的app,其次满足了在校大学生对谈恋爱的需求,可以说是一款简单实用,好操作的软件.下面我根据自己的使用体验简单的介绍一下此软件: (1)首先对于未使用过的用户,你需要在 ...

  4. 机器学习之路--Matplotlib

    1.绘制折线图 在pandas里面有一种数据类型为datatime ,可以将不规范的日期改为:xxxx-xx-xx import pandas as pd import numpy as np a = ...

  5. 反射 API基本代码测试

    ReflectBean.java package com.xiaojian.basics.reflect; /** * 使用反射的测试类 */ public class ReflectBean { / ...

  6. llinux重启、用户切换、注销命令

    一.指令 shutdown命令 shutdown -h now //立即关机 shutdown -h 2 //分钟后关机 shutdown -r now //立即重启 shutdown -r 1 // ...

  7. AcWing 251. 小Z的袜子| 分块+莫队

    传送门 题目描述 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿. 终于有一天,小Z再也无法忍受这恼人的找袜子过程,于是他决定听天由命. 具体来说,小Z把这N只袜子从 ...

  8. 【转】Java集合框架面试问题集锦

    Java集合框架(例如基本的数据结构)里包含了最常见的Java常见面试问题.很好地理解集合框架,可以帮助你理解和利用Java的一些高级特性.下面是面试Java核心技术的一些很实用的问题. Q:最常见的 ...

  9. The command '/bin/sh -c unzip -o php-7.2.23-src.zip' returned a non-zero code: 1

    Dockerfile 内容 #centos7 nginx php redis inotify FROM centos:7 MAINTAINER INFOBIRD RUN yum -y update & ...

  10. python中end=''

    end = ''  用于连接下一条的print输出内容 效果图: 代码: # end='' 用于连接下一条输出语句 print('哈哈哈') print('嘻嘻嘻') print('\n\n') pr ...