介绍
这篇文章将为大家详细讲解有关如何在vue项目中使用Svg方法,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
& lt; template>
,& lt; svg :类=皊vgClass", aria-hidden=皌rue"比;
,& lt; use xlink: href=https://www.yisu.com/zixun/" iconName "/>
<脚本>
出口默认{
名称:“SvgIcon”,
道具:{
iconClass: {
类型:字符串,
要求:没错,
},
名称:{
类型:字符串,
默认值:”,
},
},
计算:{
iconName () {
返回“#图标- $ {this.iconClass} '
},
svgClass () {
如果(this.className) {
返回svg-icon + this.className
其他}{
返回“svg-icon”
}
},
},
}>
.svg-icon {
宽度:1 em;
身高:1 em;
vertical-align: -0.15 em;
填充:currentColor;
溢出:隐藏;
}
在src/下创建一个图标目录,目录结构如下:
Svg目录主要用于存放Svg文件,来看一下指数。js的内容,功能就是把组件注册到全局,方便使用:
import Vue 得到& # 39;vue # 39;
import SvgIcon 得到& # 39;@/组件/SvgIcon& # 39;,//, svg组件//,注册到全局
Vue.component (& # 39; svg-icon& # 39;,, SvgIcon)
const requireAll =, requireContext =祝辞,requireContext.keys () . map (requireContext)
const req =, require.context (& # 39;。/svg # 39;,,假的,,//美元\ .)
requireAll(点播) 当然,如果你有自己的想法或需求,可以单独引入,无需非要注册到全局。
<强>在主要。js中引入
这一步就没什么好说的了,如果需要注册到全局,需要在入口文件中引入。
好了,接下来是最重要的一步:
修改默认的装载机:
大家可以去vue-cli3官网去查看具体教程,这里我只说需要修改的装载机以及具体的代码实现。
首先需要注意的是,通过vue-cli3构建的项目可以初始化进行很多选择,我构建的目录更多的是以* . config。js的形式存在的。
在根目录下创建一个名为vue.config。js文件,接下来的操作都和它有关,先来看一下它完整的代码:
const path =,需要(& # 39;path & # 39;)
function resolve (dir), {
,return path.join (__dirname, & # 39;。/& # 39;,, dir)
}
module.exports =, {
,chainWebpack: config =祝辞,{
,config.plugin(& # 39;定义# 39;). tap (args =祝辞,{
const 才能;argv =process.argv
const 才能;icourt =, argv [argv.indexOf (& # 39;——icourt-mode& # 39;), +, 1]
args才能[0][& # 39;process.env& # 39;] .MODE =,““$ {icourt}“;”
return 才能,arg游戏
,})
,//svg rule 加载程序
,const svgRule =, config.module.rule (& # 39; svg # 39;),//,找到svg-loader
,svgRule.uses.clear(),//,清除已有的装载机,,如果不这样做会添加在此装载机之后
),svgRule.exclude.add (/node_modules/,//,正则匹配排除node_modules目录//,,svgRule 添加svg新的装载机处理
test才能(美元/\ ./)
.use才能(& # 39;svg-sprite-loader& # 39;)
.loader才能(& # 39;svg-sprite-loader& # 39;)
.options({才能
symbolId才能:& # 39;图标——[名字]& # 39;
})才能
,//修改images loader 添加svg处理
,const imagesRule =, config.module.rule(& # 39;图像# 39;)
,imagesRule.exclude.add(解决(& # 39;src/图标# 39;))
,config.module
.rule才能(& # 39;图像# 39;)
(/\ test才能。gif (png | jpe ? g | | svg)(\ ?。*) ?/美元)
},
,configureWebpack: {
,devServer: {
开放:才能,真的,//才能,https:,真的,
,,代理:{
& # 39;才能/用户# 39;:,{
,,,目标:& # 39;https://devadminschool.icourt.cc& # 39;
,,},
& # 39;才能/生活# 39;:,{
,,,目标:& # 39;https://devadminschool.icourt.cc& # 39;
,,},
,,},
},
},
}
