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 获取服务器控件值的代码
Mar 05 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
Apr 01 Javascript
原生javascript实现解析XML文档与字符串
Mar 01 Javascript
Javascript之String对象详解
Jun 08 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
Oct 07 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
JS实现多张图片预览同步上传功能
Jun 23 Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 Javascript
学习node.js 断言的使用详解
Mar 18 Javascript
一文了解Vue中的nextTick
May 06 Javascript
基于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 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
laravel实现登录时监听事件,添加登录用户的记录方法
2019/09/30 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
[原创]保存的js无法执行的解决办法
2007/02/25 Javascript
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
浏览器解析js生成的html出现样式问题的解决方法
2012/04/16 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
JS中Promise函数then的奥秘探究
2018/07/30 Javascript
JavaScript获取时区实现过程解析
2020/09/24 Javascript
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
常见python正则用法的简单实例
2016/06/21 Python
Python实现字符串格式化输出的方法详解
2017/09/20 Python
Python简易版停车管理系统
2019/08/12 Python
基于css3的属性transition制作菜单导航效果
2015/09/01 HTML / CSS
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
介绍一下linux的文件权限
2012/02/15 面试题
通信工程毕业生自荐信
2013/11/01 职场文书
学期自我鉴定
2013/11/04 职场文书
摄影专业毕业生求职信
2014/03/13 职场文书
课程改革实施方案
2014/03/16 职场文书
局火灾防控工作方案
2014/05/25 职场文书
美术专业自荐信
2014/07/07 职场文书
同学聚会感言一句话
2015/07/30 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书
公安干警正风肃纪心得体会
2016/01/15 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书
详解TypeScript中的类型保护
2021/04/29 Javascript
docker 制作mysql镜像并自动安装
2022/05/20 Servers