# vue-sprite-plugin

**Repository Path**: kalaxy/vue-sprite-plugin

## Basic Information

- **Project Name**: vue-sprite-plugin
- **Description**: 雪碧图插件
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-03-02
- **Last Updated**: 2022-03-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-sprite-plugin

## 描述

``vue``单文件组件中的图片背景,通过``vue-sprite-plugin``插件处理后,可自动将项目中需要操作的图片合成雪碧图,并自动更新代码内容.

例如``Home.vue``代码如下:

```
<template>
   <div class="logo"></div>
   <div class="banner"></div>
</template>

<script lang="ts">
 ...
</script>
<style scoped lang="less">
  .logo{
    width:50px;
    height:50px;
    background-image: url('../../assets/images/logo.jpg?_sprite');
  }
  .logo{
    width:100px;
    height:100px;
    background-image: url('../../assets/images/banner.jpg?_sprite');
  }
</style>
```
**只要代码中使用``background-image``做属性名,并且``url``后面加上后缀``?_sprite``,那么``vue-sprite-plugin``就会将此图片合成雪碧图**.

**目前插件只作用于生产环境,开发环境下不合成雪碧图**.

``vue-sprite-plugin``处理后会自动将样式代码转化成下面形式:

```
<style scoped lang="less">
  .logo{
    width:50px;
    height:50px;
    background-image: url('../../assets/images/css-sprite.png');
    background-repeat:no-repeat;
    background-position:0 0;
  }
  .logo{
    width:100px;
    height:100px;
    background-image: url('../../assets/images/css-sprite.png');
    background-repeat:no-repeat;
    background-position:-50px 0;
  }
</style>
```

## 安装

项目下运行``yarn add vue-sprite-plugin -D``安装插件

## 配置

``vue``框架下的配置方式.在项目根目录``vue.config.js``添加如下配置.

```
const vueSpritePlugin = require("vue-sprite-plugin");

module.exports = {
    publicPath: './',
    chainWebpack:config =>{
        config.module
        .rule('vue')
        .test(/\.vue$/)
        .use("vue-sprite-plugin/src/loader/index")
        .loader("vue-sprite-plugin/src/loader/index")
        .end()

        config.plugin("vueSpritePlugin").use(vueSpritePlugin)
        .tap((args)=>{
            args = [
                {
                    filename:"css-sprite.png",
                    exclude:[]
                }];    
            return args;
        })
        .end();
    }
}
```

参数列表:

* filename: 生成的雪碧图文件名,选填项,默认值为``css-sprite.png``.
* exclude: 需要排除操作的文件列表,选填项,默认值为``[]``.