vue 移动端注入骨架屏的配置方法


Posted in Javascript onJune 25, 2019

什么是骨架屏?

简单的说,骨架屏就是在页面未渲染完成的时候,先用一些简单的图形大致勾勒出页面的基本轮廓,给用户造成页面正在加载的错觉,待页面渲染完成之后再用页面替换掉骨架屏,从而减少页面白屏的时间,给用户带来更好的体验。本文就是根据 page-skeleton-webpack-plugin 实现的骨架屏的实现,基于的是vue-cli3进行采坑 。

项目开始

安装依赖,package.json

 vue 移动端注入骨架屏的配置方法

配置vue.config.js

需要在新建vue.config.js,把之前的下载好的page-skeleton-webpack-plugin引入进行配置,详细的配置如下自定义配置可以查看官方的配置

 vue 移动端注入骨架屏的配置方法

配置postcss自定义的适配方案,具体的配置 请点击查看 ,如下:

 vue 移动端注入骨架屏的配置方法

配置完成

按照上面的依赖配置完成的话就可以查看啦。大家可能发现有个node.js,其实就是一个启动本地serve的一个js,配置好的骨架屏需要查看打包后的dist文件,方能查看效果,

当然可以从官网这边可以可以看到,具体涉及到里面很多的细节需要大家一起采坑。加油~~~~

项目地址

项目地址 , 如果觉得帮助你 麻烦给个star

其他

ps:如果安装依赖出问题的话一定要先查看page-skeleton-webpack-plugin的 issue

 vue 移动端注入骨架屏的配置方法

总结

以上所述是小编给大家介绍的vue 移动端注入骨架屏的配置方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
用js实现的仿sohu博客更换页面风格(简单版)
Mar 22 Javascript
JavaScript 学习笔记(九)call和apply方法
Jan 11 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
javascript bom是什么及bom和dom的区别
Nov 26 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
纯js实现html转pdf的简单实例(推荐)
Feb 16 Javascript
jQuery Pagination分页插件使用方法详解
Feb 28 Javascript
js使用i18n实现页面国际化的方法
May 09 Javascript
微信小程序-API接口安全详解
Jul 16 Javascript
利用JS如何获取form表单数据
Dec 19 Javascript
Vue 修改网站图标的方法
Dec 31 Vue.js
基于vue+axios+lrz.js微信端图片压缩上传方法
Jun 25 #Javascript
新手快速入门微信小程序组件库 iView Weapp
Jun 24 #Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 #Javascript
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 #Javascript
微信小程序-可移动菜单的实现过程详解
Jun 24 #Javascript
webpack自动打包和热更新的实现方法
Jun 24 #Javascript
Promise扫盲贴
Jun 24 #Javascript
You might like
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
PHP自毁程序(慎用)
2015/07/09 PHP
php格式化时间戳
2016/12/17 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
认识延迟时间为0的setTimeout
2008/05/16 Javascript
jQuery 性能优化手册 推荐
2010/02/23 Javascript
Cookie 小记
2010/04/01 Javascript
菜鸟javascript基础整理1
2010/12/06 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
JavaScript函数详解
2014/11/17 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
2016/07/21 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
AngularJS HTML DOM详解及示例代码
2016/08/17 Javascript
浅析Node.js:DNS模块的使用
2016/11/23 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
浅谈React中的元素、组件、实例和节点
2018/02/27 Javascript
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
小程序选项卡以及swiper套用(跨页面)
2020/06/19 Javascript
openlayers4实现点动态扩散
2020/08/17 Javascript
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
使用Protocol Buffers的C语言拓展提速Python程序的示例
2015/04/16 Python
详解在Python中处理异常的教程
2015/05/24 Python
Python实现批量修改文件名实例
2015/07/08 Python
Python 3.x读写csv文件中数字的方法示例
2017/08/29 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
django序列化serializers过程解析
2019/12/14 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
CSS3实现缺角矩形,折角矩形以及缺角边框
2019/12/20 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
高二历史教学反思
2014/01/25 职场文书
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
领导干部学习“三严三实”思想汇报
2014/09/15 职场文书
演讲开场白和结束语
2015/05/29 职场文书