内容简介：简单的说，骨架屏就是在页面未渲染完成的时候，先用一些简单的图形大致勾勒出页面的基本轮廓，给用户造成页面正在加载的错觉，待页面渲染完成之后再用页面替换掉骨架屏，从而减少页面白屏的时间，给用户带来更好的体验。本文就是根据安装依赖，package.json
什么是骨架屏？
简单的说，骨架屏就是在页面未渲染完成的时候，先用一些简单的图形大致勾勒出页面的基本轮廓，给用户造成页面正在加载的错觉，待页面渲染完成之后再用页面替换掉骨架屏，从而减少页面白屏的时间，给用户带来更好的体验。本文就是根据 page-skeleton-webpack-plugin 实现的骨架屏的实现，基于的是vue-cli3进行采坑 。
项目开始
安装依赖，package.json
配置vue.config.js
需要在新建vue.config.js，把之前的下载好的page-skeleton-webpack-plugin引入进行配置，详细的配置如下自定义配置可以查看官方的配置
配置postcss自定义的适配方案，具体的配置 请点击查看 ，如下：
配置完成
按照上面的依赖配置完成的话就可以查看啦。大家可能发现有个node.js，其实就是一个启动本地serve的一个js，配置好的骨架屏需要查看打包后的dist文件，方能查看效果，
当然可以从官网这边可以可以看到，具体涉及到里面很多的细节需要大家一起采坑。加油~~~~
项目地址
项目地址 ， 如果觉得帮助你 麻烦给个star
其他
ps:如果安装依赖出问题的话一定要先查看page-skeleton-webpack-plugin的 issue
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- Android 骨架屏效果，了解一下
- VUE单页应用骨架屏方案
- Android 提升用户体验之骨架屏
- 原生骨架库模版功能上线，零耦合。
- 使用CSS自定义属性构建骨架屏
- ios - 原生骨架库，网络过渡动画封装
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
王道程序员求职宝典
电子工业出版社 / 2013-11 / 56.00元
本书精选了大量知名企业的程序员笔试、面试题，重点突出、解答翔实。全书共分为四部分，各部分如下：第一部分是程序设计基础及数据结构基础，讨论C/C++基础知识以及数据结构基础知识；第二部分是计算机网络基础，讨论网络模型、套接字编程基本操作、IPv4与IPv6、子网划分、网络常用测试工具等；第三部分是操作系统基础，讨论进程与线程的基本知识、进程间通信与进程同步、内存管理的相关知识等；第四部分是其他计算机......一起来看看 《王道程序员求职宝典》 这本书的介绍吧!
JSON 在线解析
在线 JSON 格式化工具
RGB HSV 转换
RGB HSV 互转工具