Vue电商项目封装svg

最新推荐文章于 2023-01-03 15:04:13 发布

极客James

最新推荐文章于 2023-01-03 15:04:13 发布

阅读量980

点赞数 1

分类专栏： Vue.js 前端开发文章标签： vue.js 电商项目 javascript

本文链接：https://blog.csdn.net/zc639143029/article/details/103462001

版权

前端开发同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

Vue.js

8 篇文章 1 订阅

订阅专栏

一、写在前面🚀

哈喽~各位小伙伴,最近利用工作之余开源了Vue电商项目,高仿某知名O2O买菜平台,整个项目做下来收获还是蛮多的,可以扫描下方二维码体验,本篇是项目的核心知识拆解篇,主要是拆解项目中svg组件封装使用。
在这里插入图片描述

点我体验

🎉🎉 开源两周已获得了1.1K+的点赞开源不易感谢小星星

二、啥是SVG图?

业内知名博主张鑫旭前辈很早就说了SVG Sprittes未来必火,具体为啥火,我偷个懒,不复制粘贴啦O(∩_∩)O哈哈_{点开文章底部的链接可以一看究竟,文章篇幅较长,耐心些看看这个SVG他的前世今生,到底是个神马鬼,对前端工程师来说受益匪浅}

三、拥抱SVG

SVG有其独特的先天体积小,且不管放大多少倍都不会失真的优势,对于移动端App来说是简直是爽的不要不要的…所以在我开源的ddbuy项目中大多数图标都采用了SVG格式图标,用起来真香O(∩_∩)O哈哈~

四、SVG图标资源哪里来

不饶弯弯了直接推荐你到阿里巴巴开源的iconfont上找,图标库非常多,总有你喜欢的那一套,所以墙裂推荐,如何使用iconfont,就不多说了,上去查找自己喜欢的图标,创建到自己的项目,把图标放到你自己的项目中,用的时候直接导出就可以了,我这里说下SVG图的导出方法.

点击复制SVG便可以导出此SVG的代码

<svg t="1575638689495" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8157" width="200" height="200"><path d="M230.4 576.512c-12.288 9.728-25.088 24.064-28.672 41.984-5.12 24.576-1.024 55.296 22.528 79.872 28.672 29.184 72.704 37.376 91.648 38.912 51.2 3.584 105.984-22.016 147.456-50.688 16.384-11.264 44.032-34.304 70.144-69.632-59.392-30.72-133.632-64.512-212.48-61.44-40.448 1.536-69.632 9.728-90.624 20.992z m752.64 135.68c26.112-61.44 40.96-129.024 40.96-200.192C1024 229.888 794.112 0 512 0S0 229.888 0 512s229.888 512 512 512c170.496 0 321.536-83.968 414.72-211.968-88.064-43.52-232.96-115.712-322.56-159.232-42.496 48.64-105.472 97.28-176.64 118.272-44.544 13.312-84.992 18.432-126.976 9.728-41.984-8.704-72.704-28.16-90.624-47.616-9.216-10.24-19.456-22.528-27.136-37.888 0.512 1.024 1.024 2.048 1.024 3.072 0 0-4.608-7.68-7.68-19.456-1.536-6.144-3.072-11.776-3.584-17.92-0.512-4.096-0.512-8.704 0-12.8-0.512-7.68 0-15.872 1.536-24.064 4.096-20.48 12.8-44.032 35.328-65.536 49.152-48.128 114.688-50.688 148.992-50.176 50.176 0.512 138.24 22.528 211.968 48.64 20.48-43.52 33.792-90.112 41.984-121.344h-307.2v-33.28h157.696v-66.56H272.384V302.08h190.464V235.52c0-9.216 2.048-16.384 16.384-16.384h74.752V302.08h207.36v33.28h-207.36v66.56h165.888s-16.896 92.672-68.608 184.32c115.2 40.96 278.016 104.448 331.776 125.952z" fill="#06B4FD" p-id="8158"></path></svg>

于是乎,你就可以把这些代码直接复制到你想用的地方了,以下是我在项目中使用案例

<template>
  <div id="goodsDetail">
    <van-nav-bar title="商品详情"
                 :fixed=true
                 left-arrow
                 @click-left="onClickLeft">
      <svg t="1575254700818"
           class="icon"
           viewBox="0 0 1024 1024"
           version="1.1"
           xmlns="http://www.w3.org/2000/svg"
           p-id="1907"
           width="32"
           height="32"
           slot="right">
        <path d="M621.93259435 611.38542038L423.92102316 703.33559492c-9.52523406 4.42304387-20.93769289 0.2488718-25.36137327-9.27636225-4.42304387-9.52523406-0.2488718-20.93769289 9.27636226-25.36137326l198.01157118-91.95017455c9.52523406-4.42304387 20.93769289-0.2488718 25.36137327 9.27636226 4.42368037 9.52587056 0.2488718 20.93832939-9.27636225 25.36137326zM600.48824684 870.32029948l-189.07064485-109.15988242c-9.09495954-5.25113136-12.24054635-16.98884212-6.98941498-26.08443814 5.25113136-9.09495954 16.98884212-12.24054635 26.08443815-6.98941498l189.07064483 109.15988241c9.09495954 5.25113136 12.24054635 16.98884212 6.98941499 26.08443814-5.25113136 9.09559604-16.98884212 12.24054635-26.08443814 6.98941499z"
              fill="#F9C73D"
              p-id="1908"></path>
        <path d="M358.28506354 712.46556199m-92.29261194 0a92.29261195 92.29261195 0 1 0 184.58522388 0 92.29261195 92.29261195 0 1 0-184.58522388 0Z"
              fill="#FFEABB"
              p-id="1909"></path>
        <path d="M358.28506354 823.85319711c-61.419142 0-111.38763511-49.96849311-111.38763512-111.38763512s49.96849311-111.38763511 111.38763512-111.38763511 111.38763511 49.96849311 111.38763512 111.38763511-49.96849311 111.38763511-111.38763512 111.38763512z m1e-8-184.5852239c-40.36115047 0-73.19758879 32.83643833-73.19758879 73.19758877s32.83643833 73.19758879 73.19758879 73.1975888 73.19758879-32.83643833 73.1975888-73.19758879-32.83643833-73.19758879-73.1975888-73.19758878zM683.85520847 640.54097475c-50.89014624 0-92.29261195-41.40246571-92.29261196-92.29261196s41.40246571-92.29261195 92.29261196-92.29261194 92.29261195 41.40246571 92.29261195 92.29261194-41.40246571 92.29261195-92.29261195 92.29261195z m0-146.39517759c-29.83215469 0-54.10256563 24.27041094-54.10256564 54.10256563s24.27041094 54.10256563 54.10256564 54.10256564 54.10256563-24.27041094 54.10256562-54.10256564-24.27041094-54.10256563-54.10256562-54.10256563zM683.85520847 979.15938549c-50.89014624 0-92.29261195-41.40246571-92.29261196-92.29261195s41.40246571-92.29261195 92.29261196-92.29261195 92.29261195 41.40246571 92.29261195 92.29261195-41.40246571 92.29261195-92.29261195 92.29261196z m0-146.39517756c-29.83215469 0-54.10256563 24.27041094-54.10256564 54.10256561s24.27041094 54.10256563 54.10256564 54.10256564 54.10256563-24.27041094 54.10256562-54.10256564-24.27041094-54.10256563-54.10256562-54.10256561z"
              fill="#F9C73D"
              p-id="1910"></path>
      </svg>
    </van-nav-bar>
    </div>
    <template>

当我第一次这样写,并且没有做任何封装开源出来后,收到很多小伙伴的吐槽,WTFU这TM是什么鬼,就一个商品标题bar然后为了赶个时髦,加了个SVG图标你TM给我写了足足30行的代码,真辣鸡o(╥﹏╥)o

于是乎,我觉得这个事不能一直这么被骂下去,于是谷歌了一把,原来这个问题有个叫花裤衩的大兄弟,据说是字节跳动的大师兄,开源了一个很吊炸天的Vue后台前端解决方案vue-element-admin,封装了很多好用且使用的组件,包括本文借鉴的封装的SVG方案,于是乎从头到尾源码读了一篇,受益匪浅Thanks♪(･ω･)ﾉ强烈推荐小伙伴读一遍源码…

五、封装SVG

第一步:安装 svg-sprite-loader

npm install svg-sprite-loader --save

第二步:在components公共组件文件夹下创建`SvgIcon`和`index.js`并加入以下组件配置代码

在index.js中

<template>
  <svg :class="svgClass"
       aria-hidden="true"
       v-on="$listeners">
    <use :xlink:href="iconName" />
  </svg>
</template>
<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    iconName () {
      return `#icon-${this.iconClass}`
    },
    svgClass () {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }
}
</script>
<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

第三步:在`src`目录下创建`icon`文件及子文件`svg`和`index.js`并配置从svg文件夹中读取svg文件

在index.js中

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon' // svg组件
// 注册为全局组件
Vue.component('svg-icon', SvgIcon)
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

第四步:配置webpage

在vue.config.js中加入以下代码:

function resolve(dir)
{
    return path.join(__dirname, dir)
}

module.exports = {
chainWebpack(config) {
        // set svg-sprite-loader
        config.module
            .rule('svg')
            .exclude.add(resolve('src/icons'))
            .end()
        config.module
            .rule('icons')
            .test(/\.svg$/)
            .include.add(resolve('src/icons'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })
            .end()
    }
}

第五步:在`main.js`中全局引入`icon`

import './icons' // icon

第六步:将复制好的svg图标代码放到`src`下`icon`文件夹的子文件`svg`下:

第七步:使用全局组件`svg-icon`

在需要用svg图标的地方通过

<svg-icon iconClass="backtotop"/>

iconClass是你保存在icon下svg文件下的svg名称.

这下大功告成了,虽然麻烦了点,但是这是个一劳永逸的方法,也是提升逼格,提高代码阅读的好办法,再也不用担心,代码中一大段svg代码被各位大佬喷的尴尬场面啦~开森^_

四、文末彩蛋🌈

希望我的逗B式分享能帮助到你,传播知识,分享快乐,与你一起共同进步~

最近在和一个大厂的小姐姐共同运营公众号:前端甜甜圈,内容呢,肯定是技术相关的,不会瞎扯淡,纯技术,没套路,也不会有各种无聊的广告,还有免费学习资料不定期大放送,已经开始备战年后跳槽季轻松搞定大厂面试题系列啦,每周2-3次推送,相信听完他的每周语音分享,对枯燥乏味的知识将会变得更加有趣和好玩,可以扫描下方的二维码关注下啦,也可以扫描我的私人微信拉你进群,和资深大佬们交朋友,一起发现和探索前端领域好玩有趣有用的新知识Thanks♪(･ω･)ﾉ