vue 整合雪碧圖功能

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就自己新建一個
②：在配置中，用到了別名（~@ ：@前面需要加波浪線），這樣在生成的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: "~@/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方法):

 

 效果如下