vue项目中使用挽救(保存的简写)的方法

github demo: github地址

闲聊背景

本文主要以vue-cli3搭建的项目为例，来聊一下如何在项目中更优雅的使用svg。

众所周知，vue-cli3已经推出很长一段时间了，大家可以感受一下vue-cli3带来的零配置体验但是，也相应带来了一些弊端，就是如归需要修改默认的装货设备时，会比较麻烦。

们接下来主要使用的就是上文中提到的挽救(保存的简写)的使用，先上一张vue-cli3搭建的项目的目录，可以看到根目录下只保留了公共/以及src/，可以说非常干净，大家可以自己创建一个。

在src/组件/下创建SvgIcon组件

模板SVG : class=' SVgclass ' aria-hidden=' true '使用： xlink : href='图标名称'/SVG/templatescript导出默认{ name: 'SvgIcon '，prop 3360 { icon class : { type : String，required: true，}，class name : { type 3: String，default: ' '，}，computed:高度： 1em垂直对齐：-0.15 em；fill: currentColor飞越：隐藏；}/样式在src/下创建一个核标准情报中心目录，目录结构如下：

挽救(保存的简写)目录主要用于存放挽救(保存的简写)文件，来看一下index.js的内容，功能就是把组件注册到全局，方便使用：

从vue '导入某视频剪辑软件从@/组件/SVGicon//SVG导入SvgIcon组件//注册到全局Vue.component('svg-icon '，SvgIcon)const require all=require context=require context。keys().映射(需要上下文)常量请求=需要。上下文(' ./svg '，false，/\ .svg$/)requireAll(请求)当然，如果你有自己的想法或需求，可以单独引入，无需非要注册到全局。

在main.js中引入

这一步就没什么好说的了，如果需要注册到全局，需要在入口文件中引入。

好了，接下来是最重要的一步：

修改默认的装载机：

大家可以去vue-cli3官网去查看具体教程，这里我只说需要修改的装货设备以及具体的代码实现。

首先需要注意的是，通过vue-cli3构建的项目可以初始化进行很多选择，我构建的目录更多的是以*.config.js的形式存在的。

在根目录下创建一个名为vue.config.js文件，接下来的操作都和它有关，先来看一下它完整的代码：

常量路径=必需(“路径”)函数解析(目录){返回路径。join(_ _ dirname，' ./'，dir)}模块。导出={ chainweb pack k : config={ config。插件(“定义”).tap(args={ const argv=process。argv const icourt=argv[argv。indexof('-icourt-mode ')1]args[0]['进程。' env '].MODE=` ' $ { icourt } ' ` return args })//SVG规则加载器const svgRule=config。模块。规则(' SVG ')//找到装载机。用途。clear()//清除已有的装载机，如果不这样做会添加在此装货设备之后斯格鲁勒。排除。添加(/node _ modules/)//正则匹配排除节点_模块目录svgRule //添加挽救(保存的简写)新的装货设备处理。测试(/\。svg$/).使用(“svg-sprite-loader”).加载程序(“svg-sprite-loader”).选项({符号d : ' icon-[name]'，}) //修改图像加载器添加挽救(保存的简写)处理const images规则=配置。模块。规则('图像')图像规则。排除。添加(解析(' src/图标')配置。模块.规则('图像')。测试(/\。(png|jpe？g|gif|svg)(\？*)?$/) }，configureweb pack k : { dev server : { open : true，//https: true，proxy : { '/user ' : { target : ' https://devadminschool。icourt。cc '，}，'/live ' : { target : ' https://devadminschool。icourt。cc '，}，}，}

所有人都忽略了无关的代码，专注于svg规则加载器的注释。其实注释已经比较详细了，就是获取默认加载器并做相关修改，主要包括svg-loader和images-loader。这两种装载机的默认配置可以从vue-cli3的基本装载机中找到。

//默认的SVG加载程序.webpackconfig.module.rule ('SVG ')。测试(/\。(SVG) (\？*)?$/).使用('文件加载器')。加载程序(“文件加载程序”)。选项({ name : genasesetsubpath(' img ')})//默认imagesloader.webpackconfig . module . rule(' images ')。测试(/\。)g|gif|webp)(\？*)?$/).使用('网址加载器')。加载程序(“网址加载程序”)。选项(genurloadoptions(' img ')与我的初始代码相比，我将默认svg加载器配置中使用的文件加载器更改为svg-sprite-loader，排除node_modules，将svg添加到默认images-loader配置中，并排除src/icons目录。

怎么用？

可以将大幅设计的svg或者从iconfont官网下载的开源图标的svg格式复制到src/icons/svg目录；单击svg查看源代码，并修改填充属性，填充='currentColor '，或填充=' '。如果没有这样的属性，就不用担心了，这样可以让外部控制图标的颜色或者父元素的颜色；请注意，svg命名与SvgIcon命名是一致的，看看最终用途：

这里将使用文件src/icons/svg/go-back.svg。

总结：

以上比较粗糙，但是写作技巧比较硬。最后附上一个github演示代码的例子：这个项目也可以作为项目的初始框架，内置vue-router、vuex等。本文以vue-cli3创建的项目为例，通过手动修改对应的加载器，可以直接修改之前的项目。

Github地址

摘要

以上就是边肖介绍的在vue项目中使用Svg的方法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！