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:
}
})
]
生成 sprite.scss 个规则模板为项目根目录下 sprite_handlebars_template.handlebars//随机数字
@function parse-random($value) {
@return round(random() * $value);
}
$randomId: parse-random(); $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, ) == and nth($px, ) != ) {
@return nth($px, ) / 75px * 1rem;
} @else if (nth($px, ) == and nth($px, ) == ) {
@return ;
} @else if (nth($px, ) != and nth($px, ) == ) {
@return nth($px, ) / 75px * 1rem ;
} @else {
@return nth($px, ) / 75px *1rem nth($px, ) / 75px * 1rem;
}
}
} @function strip-units($number){
@return $number / ($number * + );
} @function format-zero($number){
@if $number == {
@return ;
}@else{
@return $number;
}
} @mixin sprite-width($sprite, $precision) {
@if $precision {
width: px2rem(nth($sprite, ));
}@else{
width: px2rem(nth($sprite, ) + 2px);
} } @mixin sprite-height($sprite, $precision) {
@if $precision {
height: px2rem(nth($sprite, ));
}@else{
height: px2rem(nth($sprite, ) + 2px);
}
} @mixin sprite-position($sprite, $precision) {
@if $precision {
background-position: strip-units(nth($sprite, )) / strip-units(nth($sprite, ) - $spriteWidth) * % strip-units(nth($sprite, )) / format-zero(strip-units(nth($sprite, ) - $spriteHeight)) * %;
}@else{
background-position: strip-units(nth($sprite, )) / strip-units(nth($sprite, ) + - $spriteWidth) * % strip-units(nth($sprite, )) / format-zero(strip-units(nth($sprite, ) + - $spriteHeight)) * %;
}
} @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方法):
效果如下