Vue2+VueRouter3+Webpack3.6+Axios项目实战----svg图片在项目中的使用（十一）

最新推荐文章于 2023-06-01 16:22:20 发布
最新推荐文章于 2023-06-01 16:22:20 发布
阅读量498 收藏 1
点赞数
分类专栏： vue 文章标签： Vue2+VueRouter3+Webpack3.6+Axi
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weiyongliang_813/article/details/81133904
版权

svg图片的优点不再阐述，直接讲解怎么集成到项目中。
项目中采用的vue2-svg-icon组件，来使用svg图片。
第一步：自然就是安装vue2-svg-icon插件

cnpm install vue2-svg-icon --save-dev

第二步：则就是src/assets/下新建svg文件夹
这里写图片描述

第三步：将插件配置到main.js里面

import Icon from 'vue2-svg-icon/Icon.vue'; 
Vue.component('icon', Icon);

第四步：就是调用使用了

  <icon :name="svg图片名称" :w="24" :h="24"></icon>
飞天代码
关注
专栏目录
webpack5+vue3+vant的基础配置
qq_41379824的博客
11-05 1056
webpack一些基础知识点 核心概念 Entry : 入口，执行构建的第一步 Module : 会从配置的Entry开始递归找出所有依赖的模块 Chunk ：用于代码的分割与合并 Loader：模块转换器 Plugin：扩展插件，在特定时机注入扩展逻辑改变构建结果 Output：输出结果 webpack是对jacascript打包的工具，不能识别其他的文件，所以需要配置loader进行识别 前言 项目目录结构 ├─build │ ├─webpack.base.conf.js //开发环境和生产
vue2svgicon组件
08-12
vue2 svg icon 组件
vue@2 使用 svg-icon：webpack + svg-sprite-loader
彭世瑜的博客
05-28 1201
vue@2 使用 svg-icon：webpack + svg-sprite-loader 项目结构 $ tree -I node_modules . ├── README.md ├── package.json ├── pnpm-lock.yaml ├── public │ ├── index.html │ └── libs │ └── vue@2.6.14.min.js ├── src │ ├── App.vue │ ├── icons │ │ ├── SvgIcon
webpack使用svg-sprite-loader详解
qq867263657的博客
03-13 5920
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
vue2 系列：SvgIcon 组件构建
最新发布
weixin_64684095的博客
06-01 821
SvgIcon 组件构建
vue项目使用svg图片（svg-sprite-loader以及vue2-svg-icon的使用）
热门推荐
txfyteen的专栏
12-06 1万+
一、使用svg的好处 未来必热：SVG Sprite技术介绍 第一种方式： 二、安装svg-sprite-loader npm install svg-sprite-loader --save-dev 三、webpack 配置（build/webpack.base.conf.js） { test: /\.svg$/, loader: 'svg-...
vue博客：:基于vue全家桶+ element-ui构建的一个后台管理集成解决方案
02-04
您的本地环境需要安装和 ，本项目技术栈基于 ， ， ， ， 和 ，所有的请求数据都使用模拟，提前了解和学习这些知识进步使用本项目有很大的帮助。 如果你是Vue初学者，这里有一些资源可以帮助到你 功能 功能持续迭代...
vue-vant-mobile:项目前查看
05-27
2. axios 封装(请求拦截, 响应拦截, 页面切换取消ajax请求),请求加载loading 3. 移动端适配 4. px 自动转 rem 5. svg渲染组件 6. 页面渲染前空白处理 7. 服务器接口环境配置 8. 路由切换动画(闪屏问题处理) 9. 包...
vue-cli3-template:基于 vue-cli 搭建的前端模板
05-27
基于 vue-cli3 搭建的前端模板，fork 或 clone 本仓库(持续更新中...) :bellhop_bell: 不建议用此作为项目的基础模板 :rocket: 结合 vue-cli3 的 preset 搭建基于 git repo 的前端项目模板，可以移步 特性 CSS 预...
vue-svg-icon：vue2.0中多色svg图标的解决方案（vue2.0的可变彩色svg图标方案）
02-04
vue-svg-icon vue2图标方案中多色svg图标的解决 v1.2.9 演示： : 特征： 不再需要在main.js中注入SVG 支持SVG的路径，圆，椭圆，矩形，线，折线，多边形标签 支持SVG中的分组标签 在Illustrator或素描中进行实时svg编辑 通过css'color'属性动态设置svg的一部分的颜色 一个很棒的SVG图标网站 用法 1.安装 npm install vue-svg-icon --save-dev 2.将您的svg放入src / svg / 现在不支持配置此目录 src文件夹应与node_modules位于同一文件夹中 3.在您的main.j
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
11-21
vue cli3 手把手教学封装Svgicon组件 第一步:在src文件下新建一个放置svg文件的文件夹 第二步:在components文件下新建一个Svg组件 这是一个 文件夹 专门用来存放项目里面需要使用的svg文件，比如 a.svg b.svg … svg组件源码 <svg :class="svgClass" aria-hidden="true"> </svg> [removed] /* icon组件实现自动引入
vue20的可变彩色svg图标方案
08-10
vue2.0的可变彩色svg图标方案
Vue+Typescript中在Vue上挂载axios使用时报错问题
12-10
在vue项目开发过程中，为了方便在各个组件中调用axios，我们通常会在入口文件将axios挂载到vue原型身上，如下： main.ts import Vue from 'vue' import axios from './utils/http' Vue.prototype.$axios = axios; 这样的话,我们在各个组件中进行请求时，就可以直接使用this.$axios，但是在ts中使用this.$axios进行请求时，会进行报错,如下所示： 从图中我们可以看出ts在Vue身上检测不到$axios。通过 在网上查阅发现：在ts中，不识别vue下面挂$axios，不可以挂在原型链上
echarts中引用svg
weixin_44042792的博客
12-28 3477
<template> <div class="hello"> <div class="EchartPractice"> <div id="main"></div> </div> </div> </template> <script> export default { name: "EchartPractice", data() { ...
vueaxios请求封装，vue过滤器和moment日期库的使用，vue组件传值，vue中利用组件方式使用SVG，vue中底部导航栏router-link样式的修改
weixin_48210599的博客
08-19 262
axios请求接口封装 首先是三个文件 request.js，api.js和env.js文件 request.js： //引入axios import axios from "axios" //设置专属域名 const vipUrl = "/api/app/" //设置公共域名 const env = require("../http/env") const Url = env.default.prod.baseUrl //创建一个axios请求 const service = axios.create({
Svg-webpack配置及使用
Tom__cy的博客
06-10 2872
安装依赖 读取svg信息，去除svg中的无用标签，精简结构 npm install svgo svgo-loader --save-dev SVG Sprite插件 npm install svg-sprite-loader --save-dev 配置webpack { test: /\.svg$/, loader: 'svg-sprite-loader'...
vue2中引入svg图标的方式
gaoyapei1993的博客
03-21 4132
说明：在实际的项目开发中，使用svg图标占用内存比图片更小，映入图片内存比较大，同时也适用于不同屏幕的尺寸， 1，安装 npm i svg-sprite-loader --save 2，在components文件夹中新建文件SvgIcon,在文件夹下新建文件index.vue 2,在index.vue文件下写入代码 <template> <svg :class="svgClass" aria-hidden="true" v-on="$listeners">.
使用Vue（svg-sprite-loader、vue2-svg-icon）重构svg管网监控图
Elena102896的博客
12-18 1990
        9月底，接手了一个项目，主要是完成流程单元回路管网的监控。考虑到开发现状，第一版开发采用了HTML、CSS、ECharts、JQuery、SVG（使用工具Visual Graph绘制管道网络图，导出svg文件备用）、.Net、Oracle技术完成。主要完成监控数据的展示、监控切换与跳转。例如：报警类信息、监控指标详细信息的展示；切换、选择、超链接等交互功能。由于目前了解到的管道图数...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值