vue 整合雪碧图功能

Posted 2020-11-20 liugx

1、通过命令新建一个vue项目

环境要求：  安装有 Node.js、 vue、 vue-cli 。

创建项目：

vue init webpack tx_demo

cd  tx_demo

进入项目，下载依赖：

// 最新版已经无需安装依赖初始化，可直接运行下面的命令 npm install 或者 cnpm install

运行项目：

npm run dev

2、由于我用的是sass样式，所以安装sass依赖

npm install node-sass sass-loader

3、配置雪碧图功能

先安装依赖

npm install webpack-spritesmith


配置webpack配置文件，由于开发和生产环境都需要用到雪碧图，所以我们在base（webpack.base.conf.js）配置中添加
// 雪碧图

const SpritesPlugin = require(‘webpack-spritesmith‘);

①：注意plugins这块代码，没有plugins就自己新建一个
②：在配置中，用到了别名（[email protected] ：@前面需要加波浪线），这样在生成的sprite.scss就不会存在在不到图片资源的问题了

  plugins: [
      // 雪碧图相关
      new SpritesPlugin({
          // 目标小图标
          src: {
              cwd: path.resolve(__dirname, ‘../src/assets/images/icon‘),
              glob: ‘*.png‘
          },
          // 输出雪碧图文件及样式文件
          target: {
              image: path.resolve(__dirname, ‘../src/assets/css/sprite.png‘),
              css:[[path.resolve(__dirname, ‘../src/assets/css/sprite.scss‘),{
                  format: ‘function_based_template‘
              }]]
          },
          customTemplates: {
              function_based_template: path.resolve(__dirname, ‘../sprite_handlebars_template.handlebars‘)
          },
          // 样式文件中调用雪碧图地址写法
          apiOptions: {
              cssImageRef: "[email protected]/assets/css/sprite.png?v="+Date.parse(new Date())
          },
          spritesmithOptions: {
              algorithm: ‘binary-tree‘,
              padding: 4
          }
      })
  ]

生成 sprite.scss 个规则模板为项目根目录下 sprite_handlebars_template.handlebars

//随机数字
@function parse-random($value) {
  @return round(random() * $value);
}
$randomId: parse-random(1000000);

$spriteSrc: "{{{spritesheet.image}}}";
$spriteWidth: {{{spritesheet.width}}}px;
$spriteHeight: {{{spritesheet.height}}}px;
{{#items}}
${{name}}: {{px.offset_x}} {{px.offset_y}} {{px.width}} {{px.height}};
{{/items}}

@function px2rem ($px) {
  @if (type-of($px) == "number") {
    @return $px / 75px * 1rem;
  }
  @if (type-of($px) == "list") {
    @if (nth($px, 1) == 0 and nth($px, 2) != 0) {
      @return 0 nth($px, 2) / 75px * 1rem;
    } @else if (nth($px, 1) == 0 and nth($px, 2) == 0)  {
      @return 0 0;
    } @else if (nth($px, 1) != 0 and nth($px, 2) == 0) {
      @return nth($px, 1) / 75px * 1rem 0;
    } @else {
      @return nth($px, 1) / 75px *1rem nth($px, 2) / 75px * 1rem;
    }
  }
}

@function strip-units($number){
  @return $number / ($number * 0 + 1);
}

@function format-zero($number){
    @if $number == 0 {
        @return 1;
    }@else{
        @return $number;
    }
}

@mixin sprite-width($sprite, $precision) {
    @if $precision {
        width: px2rem(nth($sprite, 3));
    }@else{
        width: px2rem(nth($sprite, 3) + 2px);
    }

}

@mixin sprite-height($sprite, $precision) {
    @if $precision {
        height: px2rem(nth($sprite, 4));
    }@else{
        height: px2rem(nth($sprite, 4) + 2px);
    }
}

@mixin sprite-position($sprite, $precision) {
    @if $precision {
        background-position: strip-units(nth($sprite, 1)) / strip-units(nth($sprite, 3) - $spriteWidth) * 100%  strip-units(nth($sprite, 2)) / format-zero(strip-units(nth($sprite, 4) - $spriteHeight)) * 100%;
    }@else{
        background-position: strip-units(nth($sprite, 1)) / strip-units(nth($sprite, 3) + 1 - $spriteWidth) * 100%  strip-units(nth($sprite, 2)) / format-zero(strip-units(nth($sprite, 4) + 1 - $spriteHeight)) * 100%;
    }
}

@mixin sprite($sprite, $precision) {
    @include sprite-position($sprite, $precision);
    @include sprite-width($sprite, $precision);
    @include sprite-height($sprite, $precision);
  background-image: url(‘#{$spriteSrc}‘);
    background-repeat: no-repeat;
    background-size: px2rem(($spriteWidth, $spriteHeight));
  display: inline-block;
}

{{#sprite}}
    {{class}} {
    background-repeat: no-repeat;
    overflow: hidden;
    border: none;
    background: url(‘#{$spriteSrc}‘);
    @include inline-block();
    vertical-align: middle;
    font-style: normal;
    color:$icon-font-color;
    }
{{/sprite}}

{{#items}}
@mixin mix-{{name}}() {
    @include sprite(${{name}}, $precision: false);
}
{{/items}}

整个工程结构图及配置图如下：
 

 

4、使用方法如下(直接使用 sprite.scss 中的 @mixin方法):

 

 效果如下