资讯专栏INFORMATION COLUMN

vue 移动端注入骨架屏

eechen / 340人阅读

摘要:本文就是根据实现的骨架屏的实现,基于的是进行采坑。大家可能发现有个,其实就是一个启动本地的一个,配置好的骨架屏需要查看打包后的文件,方能查看效果,当然可以从官网这边可以可以看到,具体涉及到里面很多的细节需要大家一起采坑。

什么是骨架屏?

简单的说,骨架屏就是在页面未渲染完成的时候,先用一些简单的图形大致勾勒出页面的基本轮廓,给用户造成页面正在加载的错觉,待页面渲染完成之后再用页面替换掉骨架屏,从而减少页面白屏的时间,给用户带来更好的体验。本文就是根据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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/104970.html

相关文章

  • 骨架】【vue】如何在webpack+vue+vue-cli下搭建多模块/单模块多路由骨架

    摘要:如何在下搭建多模块单模块多路由骨架屏前言骨架屏的用户感知比更好,此前看过很多专栏以及文章,此次实践中还是遇到需要学习的部分。包括因为可能信息面不全,对插件源码进行了详细解读,希望对于将要在项目中搭建骨架屏的小伙伴们有所帮助。 如何在webpack+vue+vue-cli下搭建多模块/单模块多路由骨架屏 前言 骨架屏的用户感知比loading更好,此前看过很多专栏以及文章,此次实践中还是...

    huhud 评论0 收藏0
  • 骨架】【vue】如何在webpack+vue+vue-cli下搭建多模块/单模块多路由骨架

    摘要:如何在下搭建多模块单模块多路由骨架屏前言骨架屏的用户感知比更好,此前看过很多专栏以及文章,此次实践中还是遇到需要学习的部分。包括因为可能信息面不全,对插件源码进行了详细解读,希望对于将要在项目中搭建骨架屏的小伙伴们有所帮助。 如何在webpack+vue+vue-cli下搭建多模块/单模块多路由骨架屏 前言 骨架屏的用户感知比loading更好,此前看过很多专栏以及文章,此次实践中还是...

    MkkHou 评论0 收藏0
  • vue从零开发和部署一款移动pwa单页应用

    摘要:另外,单页应用因为数据前置到了前端,不利于搜索引擎的抓取。所以我们需要对自己的单页应用进行一些优化。 前言 最近秋招之余空出时间来按自己的兴趣动手做了一个项目,一个基于vue-cli3.0, vue,typescript的移动端pwa,现在趁热打铁,将这个项目从开发到部署整个过程记录下来,并将从这个项目中学习到的东西分享出来,如果大家有什么意见或补充也可以在评论区提出。先介绍一下这个项...

    Channe 评论0 收藏0
  • 用纯 DOM 的方式结合 Puppeteer 自动生成网页骨架

    摘要:可以通过的提供的直接控制模拟大部分用户操作来进行或者作为爬虫访问页面来收集数据。   骨架屏是在页面数据尚未加载完成前先给用户展示出页面的大致结构,直到请求数据返回后再显示真正的页面内容;随着单页应用( SPA )的越来越流行,单页应用的用户体验也越来越得到前端开发者的关注;为了优化用户体验,在数据到达用户之前,往往会在页面上加上 loading 的效果,而现在,越来越多的场景倾向于使...

    BlackHole1 评论0 收藏0
  • 骨架方案小结

    摘要:常用于文章列表动态列表页等相对比较规则的列表页面。很多项目中都有应用饿了么版本知乎等网站中都有应用。欢迎讨论,点个赞再走吧 骨架屏 最近在项目不时有用到骨架屏的需求,所以抽时间对骨架屏的方案作了一下调研,骨架屏的实践已经有很多了,也有很多人对自己的方案作了介绍.在这里按照个人的理解做了一个汇总和分类,分享给大家. 关于骨架屏(简介) 骨架屏就是在页面数据尚未加载前先给用户展示出页面的大...

    IntMain 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<