如何在基于vue-cli的项目中,使用精灵图 css sprite
新钛云服已为您服务1236天
CSS Sprites通常被称为css精灵图,在国内也被意译为css图片整合和css贴图定位,也有人称他为雪碧图。
就是将多张比较小的图片有规则的合并成一张背景图,然后再利用background-position进行背景图定位的一种技术,也是优化网站性能的重要技术之一,因为项目中小图片都在一张大图里了,请求一次后就不用再次发送HTTP请求去请求图片资源了。
本文介绍如何在Vue-cli创建的项目快速高效的使用这门技术。
首先,要在项目中安装 webpack-spritesmith 这个插件:
npm i webpack-spritesmith
在vue.config.js配置相关参数:
const path = require('path')
const SpritesmithPlugin = require('webpack-spritesmith'); // 引入插件// 自定义模板样式,默认打包会自动生成一个sprite.css的样式,如果有问题可以在这里修改
var templateFunction = function (data) {var shared = '.icon { background-image: url(I);background-size: Wpx Hpx;}'.replace('I', data.sprites[0].image).replace('W', data.spritesheet.width).replace('H', data.spritesheet.height)var perSprite = data.sprites.map(function (sprite) {return '.icon-N { width: Wpx; height: Hpx; background-position: Xpx Ypx; }'.replace('N', sprite.name).replace('W', sprite.width).replace('H', sprite.height).replace('X', sprite.offset_x).replace('Y', sprite.offset_y);}).join('\n');return shared + '\n' + perSprite;
};
module.exports = {configureWebpack:{plugins:[new SpritesmithPlugin({// 目标小图标src: {cwd: path.resolve(__dirname,'./src/assets/sprite'),//小图标的目录glob: '*.png'},// 输出雪碧图文件及样式文件target: {image: path.resolve(__dirname, './src/assets/images/sprite.png'),//生成雪碧图的目录css: [[path.resolve(__dirname, './src/assets/css/sprite.less'),{format:'function_based_template'}]]//生成雪碧图对应的},customTemplates: {'function_based_template': templateFunction, //模板},// 样式文件中调用雪碧图地址写法apiOptions: {cssImageRef: '../images/sprite.png'//对于雪碧图css对应的雪碧图的相对路径},spritesmithOptions: {algorithm: 'binary-tree', // 拼合算法padding:10}})]}
}
这样一来就配置完成了,在启动项目后就会自动拼合./src/assets/sprite目录下小的小图片并生成对应的文件sprite.png 和sprite.less:
//sprite.less
.icon { background-image: url(../images/sprite.png);background-size: 410px 410px;}
.icon-xx1 { width: 200px; height: 200px; background-position: 0px 0px; }
.icon-xx2 { width: 200px; height: 200px; background-position: -210px 0px; }
.icon-xx3 { width: 200px; height: 200px; background-position: 0px -210px; }
最后,在项目的main.js中引入这个样式文件后即可在组件中使用,如下所示:
<template>
<div>
<i class="icon icon-xx1"></i>
<i class="icon icon-xx2"></i>
<i class="icon icon-xx3"></i>
</div>
</template>
其它相关配置参考: https://github.com/mixtur/webpack-spritesmith。
了解新钛云服
新钛云服荣膺第四届FMCG零售消费品行业CIO年会「年度数字化服务最值得信赖品牌奖」
新钛云服三周岁,公司月营收超600万元,定下百年新钛的发展目标
当IPFS遇见云服务|新钛云服与冰河分布式实验室达成战略协议
新钛云服正式获批工信部ISP/IDC(含互联网资源协作)牌照
深耕专业,矗立鳌头,新钛云服获千万Pre-A轮融资
新钛云服,打造最专业的Cloud MSP+,做企业业务和云之间的桥梁
新钛云服一周年,完成两轮融资,服务五十多家客户
上海某仓储物流电子商务公司混合云解决方案
往期技术干货
Kubernetes扩容到7,500节点的历程
低代码开发,全民开发,淘汰职业程序员!
国内主流公有云VPC使用对比及总结
万字长文:云架构设计原则|附PDF下载
刚刚,OpenStack 第 19 个版本来了,附28项特性详细解读!
Ceph OSD故障排除|万字经验总结
七个用于Docker和Kubernetes防护的安全工具
运维人的终身成长,从清单管理开始|万字长文!
OpenStack与ZStack深度对比:架构、部署、计算存储与网络、运维监控等
什么是云原生?
IT混合云战略:是什么、为什么,如何构建?
点????分享
戳????在看
如何在基于vue-cli的项目中,使用精灵图 css sprite相关推荐
- Vue CLI 3开发中试用UIkit 3组件库
一.UIkit组件库与vuikit简介 在选择好意中的前端开发基本框架后,接下来一个重要任务就是选择一款好的UI组件库.其中,UIkit组件库是一款基于Less+JS的一款轻量级.模块化.响应式的前端 ...
- vue 微信公众号支付接口_基于vue的h5项目之支付宝支付与微信支付
本文仅记录基于vue开发h5项目过程中使用支付宝和微信支付过程中的重点与槽点,仅为前端部分,如有疏漏不正之处,请于文末评论探讨.注意:标红部分灰常重要,仔细阅读官方文档非常重要,耐心非常重要,细心非常 ...
- vue项目通过命令行传参实现多环境配置(基于@vue/cli)
大多数项目都有生产环境和开发环境,一般情况下应该够了,但是有时候还需要sit,uat,本地等环境,这时候假如要通过注释的方式切换环境就相当麻烦了. 如果可以像下面这样切换环境就方便了 npm run ...
- 基于vue cli 3.0创建前端项目并安装cube-ui
前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...
- Vue CLI 3开发中屏蔽烦人的EsLint错误
问题 Vue开发中,特别是当你阅读分析别人的其中早期版本的Vue代码时往往会遭遇到满屏幕的烦人的EsLint错误.有关EsLint这个工具的作用不再赘述.查阅网上参考文档,大多是针对早起版本Vue C ...
- SpringBoot+Vue博客项目中遇到的坑
shiro整合jwt,用于用户登录逻辑流程: 登录流程: 用户登录:输入用户名和密码–>后端校验: –>有异常:处理异常 –>正常,生成jwt 访问接口时,统一被jwtFilter, ...
- 解决@vue/cli 创建项目是安装chromedriver时失败的问题
最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...
- 基于android的防抖音直播,基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能...
一.项目简介 uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目.界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5.小程序.Ap ...
- vue整合uniapp_基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室
一.项目简介 uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目.界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5.小程序.Ap ...
最新文章
- IEEE 解除对华为的限制!
- C#的winform拼数字游戏
- mybatis控制台打印执行的sql语句
- 在html中超链接_4.html5中超链接
- 开发基础之使用git把项目提交到github托管
- 高中生用付款截图吃霸王餐近一年 网友:支付宝进来推销
- 有没有软件能限制cpu的使用符合_电脑使用中突然黑屏是什么原因?电脑突然黑屏但是主机还运行的解决方法...
- Flask入门之SQLAlchemy数据库连接操作(第15讲)
- 【Pix4d精品教程】Pix4dmapper航测内业项目化数据处理完整流程(空三、生成点云、DOM和DSM)
- Python给指定QQ好友自动发送信息和图片
- 吹捧导师师娘“神论文”的作者,被处理了
- Excel取消合并单元格时在每个单元格中保留内容,你会批量操作吗?
- Docker命令(二)
- 关于FBB-FFD算法加速因子的证明
- DB2数据库开发工具:DBVisualizer
- 用Java编程卫星坐标_2 分钟掌握卫星星座图
- METD-Medical Transformer:用于医学图像分割的门控轴向注意力Transformer
- 算法-第四版-练习1.3.8解答
- 为什么红外图像分辨率低?
- DMA漏损管理系统(Axure高保真原型)