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

什么是骨架屏？

简单来说，骨架屏就是在页面没有渲染时，用一些简单的图形勾勒出页面的基本轮廓，给用户一种页面正在加载的错觉。页面渲染后，骨架屏被页面替换，减少了页面白屏的时间，给用户带来更好的体验。本文按照页面-框架-webpack-plugin实现了框架屏幕，并基于vue-cli3实现了矿坑挖掘。

项目开始

安装依赖项，package.json

配置vue.config.js

您需要创建vue.config.js并导入之前下载的page-skeleton-webpack-plugin进行配置。详细配置如下：您可以通过自定义配置来查看正式配置

配置postcss定制的适配方案。请点击查看具体配置，如下：

配置完成

根据上面的依赖配置，可以查看。您可能会发现有一个node.js，它实际上是一个启动本地服务的js。配置的骨架屏幕需要查看打包的dist文件，然后才能查看效果。

当然，从官网我们可以看到，涉及到的很多细节都需要一起挖掘。加油~ ~ ~ ~

项目地址

项目地址，如果你认为对你有帮助，请给一颗星

其他的

Ps:如果安装依赖有问题，你必须首先检查页面-框架-网络包-插件的问题

摘要

以上就是边肖介绍的在vue移动终端中注入骨架屏的配置方法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！