「初学者商城」- 后台 - icon 矢量图(新功能)

1. 前言


项目中的精致小图一般都是使用的矢量图,矢量图比位图的优势在于:小,不失真,轻松改变颜色和大小等。


2. 源码


完整项目地址:https://github.com/intomylife/osc-front

v1.4.2 标签地址:https://github.com/intomylife/osc-front/releases/tag/v1.4.2

v1.4.2 下载地址:zip,tar.gz

注:对于标签的说明「初学者商城」- 写在最前面 #5.1


3. 后台


注:查看更改内容:icon 矢量图

3.1 下载矢量图

3.1.1 添加图标

注:Iconfont-阿里巴巴矢量图标库:https://www.iconfont.cn/

  1. 在图标库中选择或者直接根据关键字搜索图标
  2. 把合适的矢量图放到购物车中
  3. 图标都选择好并添加到购物车后再添加至项目
  4. 在图标管理我的项目中就可以看到刚刚添加的图标了

3.1.2 图标三种类型

UnicodeFont class用法很类似,都需要先引入图标库,然后根据特定的字符串如(Unicode)/icon-gouwuche(Font class)来显示对应的图标,可以看出Font class是在Unicode的基础上进一步封装而成的。

Symbol则比Font class更加深入人心,图标是静态方式引入,并且还支持多种颜色。下面都是以Symbol方式使用矢量图

3.2 最简单的方式使用矢量图

  1. 还是在图标管理我的项目页面,点击下载至本地
  2. 下载完成后解压,需要关注的文件是iconfont.js
  3. iconfont.js文件拷贝到项目的@/src/assets/目录下
  4. 打开HelloWorld.vue
  5. script中引入刚刚拷贝的iconfont.js文件
import '@/assets/iconfont'
  1. 在页面中使用,icon-gouwuche更改为你自己添加的图标名称代码
<!-- 矢量图 -->
<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-gouwuche" />
</svg>
  1. npm run dev启动项目,访问http://localhost:9527,显示图标

3.3 封装组件

注:vue的核心思想之一:组件化

  1. vue的组件都是放在了统一的地方:@/src/components/目录
  2. 封装过程非常简单,显示矢量图的方式都是一样的,就是xlink:href的值不一样,所以只需要动态的传入图标名称就可以
<template>
  <svg :class="svgClass" aria-hidden="true">
    <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>

  1. main.js中注册组件
// svg组件
import SvgIcon from '@/components/SvgIcon'

// register globally
Vue.component('svg-icon', SvgIcon)
  1. 在页面中使用,比上面的写法精简很多了
<!-- 矢量图 -->
<svg-icon icon-class="gouwuche" />

3.4 分开引入 svg

痛点: 虽然iconfont.js文件是静态引入,但是每次增改图标都得替换整个iconfont.js文件,更可怕的是,如果前同事离职,你接手了这个项目而且还没加入到图标库的成员中,那将会非常难受。

分开引入svg解决了什么: 首先自己增改图标变得容易,因为需要哪个图标就只引入哪个图标,每个图标文件是单独存在的。其次,当另一个人接手项目时,也是同样的方便,之前开发时添加的图标很容易维护。

分开引入svg又有哪些新的问题: ① 前面使用的iconfont.js文件虽然有种种不便,但是拿来就可以直接使用里面的图标,因为iconfont.js文件已经生成了svg-sprite;而分开引入的svg则需要svg-sprite-loader插件帮我们生成svg-sprite。 ② 前面使用的iconfont.js文件引入一次就可以使用全部的图标;而分开的svg则需要每个都单独引入一次。

如何下载分开的svg 在图标管理我的项目页面,鼠标悬浮到图标上方,点击下载图标按钮;然后再点击SVG 下载按钮。

3.4.1 svg-sprite-loader

  1. svg-sprite-loaderwebpack工具
  2. 主要用svg-sprite-loader把分开引入的svg打包成svg-sprite
  3. webpack中原本就有url-loader来处理svg,所以现在指定svg-sprite-loader来处理svg的同时还要在url-loader中排除svg的处理,当然不是全部,只是分开引入svg的目录
webpack.base.conf.js:

...
      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/icons')],
        options: {
          symbolId: 'icon-[name]'
        }
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        exclude: [resolve('src/icons')],
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
...

3.4.2 自动引入

使用require.context正则匹配批量的方式直接引入所有svg

const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

3.5 整体结构

  1. #3.3中封装的组件放在了@/src/components/SvgIcon目录中
.
├── src
...
│   ├── components
│   │   ├── HelloWorld.vue
│   │   └── SvgIcon
│   │       └── index.vue
...
  1. 引入svg组件,正则匹配批量引入svg操作都写在了一个js文件中
import Vue from 'vue'
// svg组件
import SvgIcon from '@/components/SvgIcon'

// register globally
Vue.component('svg-icon', SvgIcon)

const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
  1. 分开单独下载的svg放在了@/src/icons/svg目录中,对应#3.4.1中使用svg-sprite-loader处理svg时指定的目录include: [resolve('src/icons')],同样也是url-loader排除的目录exclude: [resolve('src/icons')]
.
├── src
...
│   ├── icons
│   │   ├── index.js
│   │   └── svg
│   │       ├── gouwuche.svg
│   │       └── wuliuche.svg
...
  1. 最后需要在main.js中引入
// icon
import '@/icons'

3.6 其它

  1. 版本号的升级

4. 验证


4.1 后台

  1. 下载v1.4.2标签的代码或者对照本篇博客更改v1.4.1标签的代码
  2. vsCode中打开终端(快捷键:ctrl+~
  3. 如果是在v1.4.1基础上做更改,还需安装svg-sprite-loader依赖npm install svg-sprite-loader --save-dev
  4. 如果是下载的v1.4.2标签的代码,则先安装依赖npm install
  5. 输入npm run dev,回车
  6. 启动成功后,访问http://localhost:9527
  7. 显示图标,表示成功

5. 结语


正确的使用矢量图,为项目添彩。阿,快乐。


希望能够帮助到你

over




你可能感兴趣的:(初学者商城)